<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="9">
        <div class="grid-content bg-purple">
          <el-card v-loading="columnLoading" class="box-card">
            <div slot="header">
              {{ __('退单统计') }}
            </div>
            <vab-chart
              :init-options="initOptions"
              :option="columnReturnOptions"
              style="width: 100%"
              theme="vab-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple">
          <el-card v-loading="columnLoading" class="box-card">
            <div slot="header">
              <span style="font-size: 16px">{{ __('订单统计') }}</span>
            </div>
            <vab-chart
              :init-options="initOptions"
              :option="columnOptions"
              style="width: 100%"
              theme="vab-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-card v-loading="polylineLoading" class="box-card">
      <div slot="header">
        <vab-icon icon="refund-2-fill" />
        {{ __('退单统计趋势图') }}

        <el-radio-group
          v-model="saleTime"
          class="radio-inline"
          size="small"
          style="float: right"
          @change="statisticCountEvt"
        >
          <el-radio-button
            :label="7"
          >{{ __('7天') }}</el-radio-button>
          <el-radio-button
            :label="30"
          >{{ __('30天') }}</el-radio-button>
          <el-radio-button
            :label="90"
          >{{ __('3个月') }}</el-radio-button>
          <el-radio-button
            :label="180"
          >{{ __('半年') }}</el-radio-button>
        </el-radio-group>
      </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 { statisticState as statisticRetrunState, statisticCount } from '@/api/order/return'
import VabChart from '@/extra/VabChart'
import {statisticState} from "@/api/order/base";

export default {
  name: 'OverviewReturnOrder',
  components: { VabChart },
  data() {
    return {
      saleTime: 7,
      columnLoading: true,
      polylineLoading: true,
      initOptions: {
        renderer: 'svg',
      },
      columnOptions: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [
              // 2011-待订单审核;2013-待财务审核;2020-待配货/待出库审核;2030-待发货;2040-已发货/待收货确认;2060-已完成/已签收;2070-已取消/已作废;
              this.__('总数'), // total
              this.__('已完成'), // 2060
              this.__('已取消'), // 2070
              this.__('待付款'), // 2020
              this.__('待发货'), // 2030
              this.__('待收货'), // 2040
              this.__('待评价'),
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 20, 33, 39, 33, 22],
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: new VabChart.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                ['#88D1FF', '#1890FF'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      columnReturnOptions: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [
              // 卖家处理状态(ENUM): 3100-【客户】提交退单;3105-退单审核;3110-收货确认;3115-退款确认;3120-客户】收款确认;3125-完成
              this.__('总数'), // total
              this.__('已完成'), // 3125
              this.__('待审核'), // 3105
              this.__('未完成'), // 3100
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 20, 33, 39, 33, 22],
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: new VabChart.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                ['#f6d4d8', '#f6a2ac'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      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.statisticState()
      await this.statisticRetrunState()
      await this.statisticCount()
    },
    async statisticRetrunState(days) {
      this.columnLoading = true
      const { data } = await statisticRetrunState(days)
      this.columnReturnOptions.series[0].data = [
        data.total,
        data[3125],
        data[3105],
        data[3100],
      ]
      this.columnLoading = false
    },
    async statisticState(days) {
      this.columnLoading = true
      const { data } = await statisticState(days)
      this.columnOptions.series[0].data = [
        data.total,
        data[2060],
        data[2070],
        data[2020],
        data[2030],
        data[2040],
        data[2090],
      ]
      this.columnLoading = false
    },
    async statisticCountEvt() {
      this.statisticCount(parseInt(this.saleTime))
    },
    async statisticCount(days) {
      this.polylineLoading = true
      const { data } = await statisticCount({ days: days })
      this.polylineOption.xAxis.data = data.map((item) => item.curr_date)
      this.polylineOption.series[0].data = data.map(
        (item) => item.record_count
      )
      this.polylineLoading = false
    },
  },
}
</script>
