<template>
  <!-- 查询配置 -->
  <div style="padding: 0px 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="车辆统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;align-items: center;">
            <el-date-picker v-model="select.year" type="year" formate='yyyy' value-format="yyyy" placeholder="选择年份">
            </el-date-picker>
            <el-button @click="getList" slot="reference" size="medium" type="primary"
              style="margin-left: 10px">查询</el-button>
            <el-button @click="viewPart" slot="reference" size="medium" type="primary"
              style="margin-left: 10px">{{btnText}}</el-button>
            <el-button @click="downloadExel" slot="reference" size="medium" type="primary"
              style="margin-left: 10px">导出</el-button>
          </div>
        </slot>
      </lx-header>
    </div>
    <div class="table-tree" v-if="showData">
      <xy-table :table-item="table" :list="tableData" :is-page="false">
        <template v-slot:btns></template>
      </xy-table>
    </div>
    <div v-else>
      <line-chart :chartData="rptData" :height="chartHeight" />
    </div>
  </div>

</template>
<script>
  import LineChart from '@/components/morecharts/LineChart.vue'
  import {
    carList
  } from "@/api/report";
  import {
    download
  } from '@/utils/downloadRequest'
  export default {
    components: {
      LineChart
    },
    created() {
      // let date = new Date()
      // this.select.year = date.getFullYear()
      let now = new Date()
      this.select.year = this.$moment(now).format("YYYY")
      this.initLoad()
      this.getList()
    },
    mounted() {},
    data() {
      return {
        showData: false,
        select: {
          year: "",
          is_export:0
        },
        tableData: [],
        tableHeight: 0,
        table: [{
            label: '月份',
            sortable: false,
            prop: 'month'
          },
          {
            label: '预约数',
            sortable: false,
            prop: 'plan_total'
          },
          {
            label: '入场数',
            sortable: false,
            prop: 'enter_total'
          },
          {
            label: '取消数',
            sortable: false,
            prop: 'cancel_total'
          }
        ],
        chartHeight: "",
        btnText: "数据展示",
        rptData: {
          xArr: [],
          series: {
            type: "bar"
          },
          legendArr: ["预约人数", "入场人数"]
        }
      }
    },
    methods: {
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
        that.tableHeight = tableHeight;
        that.chartHeight = tableHeight + "px"
      },
      downloadExel() {
        this.select.is_export = 1
        download(
          '/api/admin/chart/car',
          'get', {
            ...this.select
          },
          '车辆统计报表.xlsx')
          this.select.is_export = 0
      },
      viewPart() {
        this.showData = !this.showData;
        this.btnText = this.showData ? "图表展示" : "数据展示"
      },
      getList() {
        // this.showData = true;
        var xarr = [];
        var planarr = [];
        var enterarr = [];
        var cancelarr = []
        carList({
          year: this.select.year
        }).then((res) => {
          for (var m of res) {
            xarr.push(m.month);
            planarr.push(
              m.plan_total
            )
            enterarr.push(
              m.enter_total
            )
            cancelarr.push(
              m.cancel_total
            )
          }

          this.rptData.xArr = xarr;
          this.rptData.series = [{
              name: "预约数",
              type: 'bar',
              data: planarr
            },
            {
              name: "入场数",
              type: 'bar',
              data: enterarr
            }, {
              name: "取消数",
              type: 'bar',
              data: cancelarr
            }

          ]
          this.tableData = res;
        }).catch((res) => {})
      }

    }
  };
</script>
