
<template>
  <div>
    <el-row style="margin-bottom: 16px">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getData"
        :picker-options="pickerOptions"
        :clearable="false"
      />
    </el-row>
    <daily-profit-report :bill-data="billData" width="100%" height="250px"/>
  </div>
</template>
<script>
import DailyProfitReport from '@/views/dashboard/DailyProfitReport.vue'
import { getServiceIncome } from '@/api/system/dashboard'
import { getLastDate, getLastDateStr, getLastMonth } from '@/utils'

export default {
  name: 'ServiceIncomeChart',
  components: { DailyProfitReport },
  computed: {
    dateRange: {
      get() {
        return [this.queryParams.startDate, this.queryParams.endDate];
      },
      set(val) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];
      }
    }
  },
  data() {
    return {
      billData: [],
      queryParams: {
        startDate: getLastDateStr(6),
        endDate: getLastDateStr(0),
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = getLastDate(0);
            const start = getLastDate(6);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = getLastDate(0);
            const start = getLastMonth(1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = getLastDate(0);
            const start = getLastMonth(3);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      getServiceIncome(this.queryParams).then(res => {
        if (res.code === 200) {
          this.billData = res.data;
        }
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
