<template>
  <div>
    <el-row :gutter="24">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <vab-query-form style="float: right;">
          <vab-query-form-right-panel :span="24">
            <el-form :inline="true" :model="queryForm" @submit.prevent>
              <el-form-item class="ml10">
                <ms-date-range-picker
                  v-model="order_time_range"
                  @update:modelValue="order_time_range = $event"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="fetchData"
                >
                  {{ t('查询') }}
                </el-button>
              </el-form-item>
            </el-form>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('订单数量')"
          :count-config="orderNumConfig"
          icon="numbers-line"
          :title="t('订单数量')"
          :unit-text="t('单')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('支付单数')"
          :count-config="orderNumPaidConfig"
          icon="alipay-line"
          :title="t('支付单数')"
          :unit-text="t('个')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('用券数量')"
          :count-config="voucherNumConfig"
          icon="newspaper-line"
          :title="t('用券数量')"
          :unit-text="t('个')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('退款单数')"
          :count-config="refundNumConfig"
          icon="refund-line"
          :title="t('退款单数')"
          :unit-text="t('个')"
        />
      </el-col>
    </el-row>

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

    <el-card v-loading="polylineLoading" class="box-card">
      <template #header>
        <vab-icon icon="file-chart-line" />
        {{ __('订单销售趋势图') }}
        <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>
      </template>
      <ms-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, statisticCount } from '@/api/order/base'

import TopNum from '@/components/MsWidget/TopNum'
import MsDateRangePicker from '@/components/MsDateRangePicker'
import MsChart from '@/extra/VabChart'

import {statisticState as statisticRetrunState} from "@/api/order/return";
import {getOrderNum, getVoucherActiveNum} from "@/api/analytics/order";
import {getReturnNum} from "@/api/analytics/return";

export default {
  name: 'OverviewOrder',
  components: { MsChart, MsDateRangePicker, TopNum },
  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 MsChart.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 MsChart.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                ['#f6d4d8', '#f6a2ac'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      polylineOption: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['有效订单', '取消订单'],
        },
        grid: {
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: this.__('有效订单'),
            type: 'line',
            data: [],
          },
          {
            name: this.__('取消订单'),
            type: 'line',
            data: [],
          },
        ],
      },


      order_time_range: ["", ""],
      userList: [],
      queryForm: {
        stime: "",
        etime: ""
      },

      orderNumConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },

      orderNumPaidConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },

      voucherNumConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },

      refundNumConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    t:__,
    __,
    queryData() {
      this.fetchData()
    },
    async fetchData() {
      if (this.order_time_range.length > 0) {
        if (this.order_time_range[0]) {
          this.queryForm.stime = this.order_time_range[0].getTime();
        }
        if (this.order_time_range[1]) {
          this.queryForm.etime = this.order_time_range[1].getTime();
        }
      } else {
        this.queryForm.stime = null
        this.queryForm.etime = null
      }
      const params = this.queryForm;
      this.getOrderNumFun(params);
      this.getVoucherNumFun(params);
      this.getReturnNumFun(params);

      //支付订单数量
      const paramsPaid = Object.assign({}, params)
      paramsPaid.orderIsPaid = 3013

      this.getOrderNumPaidFun(paramsPaid);

      await this.statisticState()
      await this.statisticRetrunState()
      await this.statisticCount()


    },
    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 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 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.effective_count
      )
      this.polylineOption.series[1].data = data.map(
        (item) => item.cancel_count
      )
      this.polylineLoading = false
    },


    async getOrderNumFun(params) {
      const { data } = await getOrderNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.orderNumConfig = Object.assign(this.orderNumConfig, data);
    },
    async getReturnNumFun(params) {
      const { data } = await getReturnNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.refundNumConfig = Object.assign(this.refundNumConfig, data);
    },
    async getOrderNumPaidFun(params) {
      const { data } = await getOrderNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.orderNumPaidConfig = Object.assign(this.orderNumPaidConfig, data);
    },
    async getVoucherNumFun(params) {
      const { data } = await getVoucherActiveNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.voucherNumConfig = Object.assign(this.voucherNumConfig, data);
    },
  },
}
</script>
