<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="120px">
      <el-form-item label="时间范围" prop="dataRange">
        <el-date-picker
          v-model="queryParams.dataRange"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <pie-cus-chart ref="pieCusChart"></pie-cus-chart>
  </div>
</template>

<script>
import { countryChart } from "@/api/statistics/statistics";
import PieCusChart from '../../dashboard/PieCusChart'
export default {
  name: 'countryChart',
  components: { PieCusChart },
  data() {
    return {
      // 查询参数
      queryParams: {
        dataRange: '',
        startDate: '',
        endDate: '',
        tenantId: null
      },
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.initDateRange()
  },
  methods:{
    initDateRange(){
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      this.queryParams.dataRange = [start,end]
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.queryParams.dataRange && this.queryParams.dataRange.length > 1) {
        this.queryParams.startDate = this.formatDate(this.queryParams.dataRange[0],false)
        this.queryParams.endDate = this.formatDate(this.queryParams.dataRange[1],true)
        console.log(this.queryParams, '12')
      } else {
        this.queryParams.startDate = null
        this.queryParams.endDate = null
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.initDateRange()
    },
    /**
     * 查询数据
     */
    getList(){
      countryChart(this.queryParams).then(response => {
        this.$refs.pieCusChart.initChart(response.data)
      });
    },
    /**
     * 格式化时间戳
     */
    formatDate(timestamp,ifEnd) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      // 月份是从0开始的，所以要加1
      const month = String(date.getMonth() + 1).padStart(2, '0')
      if(ifEnd){
        //取这个月最后一天
        const date = new Date(year, month, 0);
        return `${year}-${month}`+"-"+date.getDate();
      }else{
        //取这个月第一天
        return `${year}-${month}`+"-01"
      }
    },
  }
}
</script>

<style scoped>

</style>
