<template>
  <div>
    <el-card v-loading="polylineLoading" class="box-card">
      <div slot="header" class="clearfix">
        <vab-icon icon="file-chart-line" />
        {{ __('订单销售趋势图') }}
        <div style="float: right">
          <el-button
            style="width: 80px"
            type="primary"
            @click="getPaymentDate(7)"
          >
            {{ __('7天') }}
          </el-button>
          <el-button
            style="width: 80px"
            type="primary"
            @click="getPaymentDate(30)"
          >
            {{ __('30天') }}
          </el-button>
        </div>
      </div>
      <vab-chart
        :init-options="initOptions"
        :option="polylineOption"
        style="width: 100%"
        theme="vab-echarts-theme"
      />
    </el-card>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getPaymentDate } from '@/api/order/base'
  import VabChart from '@/extra/VabChart'

  export default {
    name: 'OverviewReturnOrder',
    components: { VabChart },
    data() {
      return {
        columnLoading: true,
        polylineLoading: true,

        initOptions: {
          renderer: 'svg',
        },
        polylineOption: {
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: this.__('退单数'),
              type: 'line',
              data: [],
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      queryData() {
        this.fetchData()
      },
      async fetchData() {
        await this.getPaymentDate()
      },
      async getPaymentDate(days) {
        this.polylineLoading = true
        const { data } = await getPaymentDate({ day: days })
        this.polylineOption.xAxis.data = data.map((item) => item.time)
        this.polylineOption.series[0].data = data.map((item) => item.num)
        this.polylineLoading = false
      },
    },
  }
</script>
