<template>
  <div>
    <el-row style="margin-bottom: 16px">
      <date-range-picker
        :start-date.sync="queryParams.dateStart"
        :end-date.sync="queryParams.dateEnd"
        @change="getList"
      />
      <el-select v-model="queryParams.channelId" @change="getList" placeholder="请选择渠道">
        <el-option v-for="dict of dict.type.channel_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
      </el-select>
    </el-row>
    <daily-bill-amount-report :bill-data="billData" width="100%" height="250px"/>
  </div>
</template>

<script>
import { getLastDateStr } from '@/utils'
import { getBillDailyAmount } from '@/api/system/dashboard'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import DailyBillAmountReport from '@/views/dashboard/DailyBillAmountReport.vue'

export default {
  name: 'DailyBillAmountChart',
  dicts: ['channel_type'],
  components: { DailyBillAmountReport, DateRangePicker },
  data() {
    return {
      // 查询条件
      queryParams: {
        dateStart: getLastDateStr(6),
        dateEnd: getLastDateStr(0),
        channelId: null,
      },
      billData: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getBillDailyAmount(this.queryParams).then(res => {
        this.billData = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
