<template>
  <div class="dashboard-container">
    <el-card class="order-card-todo" shadow="hover">
      <template #header>
        <vab-icon icon="todo-line" />
        {{ __('待办事项') }}
      </template>
      <el-row
        class="order-card-todo-content"
        style="padding-left: 20px"
        :gutter="24"
      >
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon one1">
              <vab-icon icon="file-list-2-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="
                  goToPath('/order/onlineOrder', { order_state_id: 2030 })
                "
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.wait_shipping_num || 0"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('待发货') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon two1">
              <vab-icon icon="refresh-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="
                  goToPath('/order/productOrder', { return_state_id: 3105 })
                "
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.review_num"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('待审核退货') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon four1">
              <vab-icon icon="product-hunt-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="
                  goToPath('/product/productManagement/productList', {
                    product_state_id: 1000,
                  })
                "
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.off_num"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('违规商品') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon three1">
              <vab-icon icon="product-hunt-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="
                  goToPath('/product/productManagement/productList', {
                    product_state_id: 1002,
                  })
                "
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.product_warning_num"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('待补货') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon five1">
              <vab-icon icon="reply-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/SellerComment', { comment_is_reply: 0 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.wait_reply_num"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('待回复') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
          <el-row align="middle" type="flex">
            <el-col class="xe-icon one1">
              <vab-icon icon="bill-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/order/invoice', { invoice_status: 0 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.invoice_wait_num"
                  :separator="form.separator"
                  :start-val="form.startVal"
                />
                <div class="xe-name">{{ __('待开票') }}</div>
              </el-link>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20">
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-card
          background="white"
          :bottom-text="t('本月销售额')"
          :count-config="saleConfig"
          icon="money-cny-circle-line"
          :title="t('销售额')"
          :unit-text="t('元')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-card
          background="white"
          :bottom-text="t('本月订单量')"
          :count-config="orderNumConfig"
          icon="file-list-2-line"
          :title="t('订单量')"
          :unit-text="t('单')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-card
          background="white"
          :bottom-text="t('本月使用优惠券')"
          :count-config="voucherNumConfig"
          icon="file-paper-2-line"
          :title="t('使用优惠券')"
          :unit-text="t('张')"
        />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <top-card
          background="white"
          :bottom-text="t('本月退货单数')"
          :count-config="refundNumConfig"
          icon="refresh-line"
          :title="t('退货单数')"
          :unit-text="t('个')"
        />
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="order-card1" shadow="hover">
            <template #header>
              <vab-icon icon="shopping-bag-2-line" />
              店铺
            </template>
            <el-row class="order-card1-content">
              <el-col :span="6">
                <p>店铺状态</p>
                <h1
                  style="font-size: 22px; margin: 1em 0"
                  :style="{
                    color:
                      pram.store_info.store_is_open === 0 ? 'red' : 'green',
                  }"
                >
                  {{ formatOpen(pram.store_info.store_is_open) }}
                </h1>
              </el-col>
              <el-col :span="6">
                <p>商品总数</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.product.total_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="6">
                <p>上架数量</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.product.normal_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="6">
                <p>等待审核</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.product.verify_waiting_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="order-card1" shadow="hover">
            <template #header>
              <vab-icon icon="file-list-2-line" />
              订单
            </template>
            <el-row class="order-card1-content">
              <el-col :span="6">
                <p>订单总数</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.order.total_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="6">
                <p>等待付款</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.order.wait_pay_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="6">
                <p>已完成</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.order.fin_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="6">
                <p>待评价</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.order.eva_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="order-card1" shadow="hover">
            <template #header>
              <vab-icon icon="refund-line" />
              售后
            </template>
            <el-row class="order-card1-content">
              <el-col :span="8">
                <p>已完成</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.return.fin_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="8">
                <p>待审核</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.return.review_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
              <el-col :span="8">
                <p>未完成</p>
                <h1>
                  <ms-count
                    :decimals="countConfig.decimals"
                    :duration="countConfig.duration"
                    :end-val="pram.return.un_fin_num"
                    :prefix="countConfig.prefix"
                    :separator="countConfig.separator"
                    :start-val="countConfig.startVal"
                    :suffix="countConfig.suffix"
                  />
                </h1>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="false">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card v-loading="polylineLoading" class="box-card">
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <i class="el-icon-paperclip" style="font-size: 50px">
                    {{ pram.order.order_day_percentage_complete }}
                  </i>
                  <br />
                  <br />
                  <span>{{ __('今日订单完成率') }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card v-loading="polylineLoading" class="box-card">
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <i class="el-icon-sell" style="font-size: 50px">
                    {{ pram.order.order_percentage_complete }}
                  </i>
                  <br />
                  <br />
                  <span>{{ __('订单完成率') }}:</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="false">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card
            v-if="rid != 3"
            v-loading="polylineLoading"
            class="box-card"
            style="height: 500px"
          >
            <el-row :gutter="20">
              <el-col align="right" :span="12">
                <div class="grid-content bg-purple">
                  <i class="el-icon-goods" style="font-size: 50px"></i>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <h2>{{ __('店铺及商品提示') }}</h2>
                </div>
              </el-col>
            </el-row>
            <el-divider />
            <span>
              <h4>
                {{ __('店铺状态') }}:
                {{ formatOpen(pram.store_info.store_is_open) }}
              </h4>
            </span>
            <el-divider />
            <span>{{ __('商品总数') }}： {{ pram.product.total_num }}</span>
            <el-divider />
            <span>
              {{ __('已审核商品') }}：{{ pram.product.verify_passed_off_num }}
            </span>
            <el-divider />
            <span>
              {{ __('等待审核') }}：{{ pram.product.verify_waiting_num }}
            </span>
            <el-divider />
            <span>{{ __('已下架') }}：{{ pram.product.illegal_num }}</span>
            <el-divider />
            <span>{{ __('售卖中') }}：{{ pram.product.normal_num }}</span>
            <el-divider />
            <span>{{ __('违禁') }}：{{ pram.product.off_num }}</span>
            <el-divider />
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card
            v-loading="polylineLoading"
            class="box-card"
            style="height: 500px"
          >
            <el-row :gutter="20">
              <el-col align="right" :span="12">
                <div class="grid-content bg-purple">
                  <i class="el-icon-chat-dot-round" style="font-size: 50px"></i>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <h2 v-if="rid != 3">{{ __('订单') }}</h2>
                  <h2 v-else>{{ __('门店订单') }}</h2>
                </div>
              </el-col>
            </el-row>

            <el-divider />
            <span>{{ __('今日订单总数') }}：{{ pram.order.day_num }}</span>
            <el-divider />
            <span>{{ __('订单总数') }}：{{ pram.order.total_num }}</span>
            <el-divider />
            <span>{{ __('已发货') }}：{{ pram.order.ship_num }}</span>
            <el-divider />
            <span>{{ __('等待付款') }}：{{ pram.order.wait_pay_num }}</span>
            <el-divider />
            <span>{{ __('待评价') }}：{{ pram.order.eva_num }}</span>
            <el-divider />
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card
            v-if="rid != 3"
            v-loading="polylineLoading"
            class="box-card"
            style="height: 500px"
          >
            <el-row :gutter="20">
              <el-col align="right" :span="12">
                <div class="grid-content bg-purple">
                  <i class="el-icon-chat-dot-round" style="font-size: 50px"></i>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <h2>{{ __('退单') }}</h2>
                </div>
              </el-col>
            </el-row>

            <el-divider />
            <span align="center">
              {{ __('退单总数') }}： {{ pram.return.total_num }}
            </span>
            <el-divider />
            <span>{{ __('已完成') }} ：{{ pram.return.fin_num }}</span>
            <el-divider />
            <span>{{ __('待审核') }}：{{ pram.return.review_num }}</span>
            <el-divider />
            <span>{{ __('未完成') }}：{{ pram.return.un_fin_num }}</span>
            <el-divider />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card v-loading="polylineLoading" class="box-card">
          <div slot="header">
            <vab-icon icon="file-chart-line" />
            {{ __('订单销售趋势图') }}
            <el-radio-group
              v-model="timeChoice"
              class="radio-inline"
              size="small"
              style="float: right"
              @change="statisticCountEvt"
            >
              <el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
              <el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
              <el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
              <el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
            </el-radio-group>
          </div>
          <vab-chart
            :init-options="initOptions"
            :option="polylineOption"
            style="width: 100%"
            theme="vab-echarts-theme"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-if="rid != 3" v-loading="polylineLoading" class="box-card">
          <div slot="header">
            <vab-icon icon="refresh-line" />
            {{ __('退单销售趋势图') }}
            <el-radio-group
              v-model="timeChoice"
              class="radio-inline"
              size="small"
              style="float: right"
              @change="statisticCountReturnReturnEvt"
            >
              <el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
              <el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
              <el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
              <el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
            </el-radio-group>
          </div>
          <vab-chart
            :init-options="initOptions"
            :option="polylineOptionReturn"
            style="width: 100%"
            theme="vab-echarts-theme"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card v-loading="loading" class="box-card">
            <div slot="header">
              <vab-icon icon="money-dollar-box-line" />
              {{ __('订单销售金额对比图') }}
              <el-radio-group
                v-model="timeChoice"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="statisticAmountEvt"
              >
                <el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
                <el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
                <el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
                <el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
              </el-radio-group>
            </div>
            <vab-chart
              :init-options="initOptions"
              :option="polylineOptionMake"
              style="width: 100%"
              theme="vab-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card v-loading="loading" class="box-card">
            <div slot="header">
              <vab-icon icon="user-6-line" />
              {{ __('客户统计') }}
              <el-radio-group
                v-model="timeChoice"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getCustomerTimelineEvt"
              >
                <el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
                <el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
                <el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
                <el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
              </el-radio-group>
            </div>
            <vab-chart
              :init-options="initOptions"
              :option="polylineOptionMakeLine"
              style="width: 100%"
              theme="vab-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { translateTitle as __ } from '@/utils/i18n'
import {
  getCustomerTimeline,
  statisticAmount,
  statisticCount,
  statisticState,
} from '@/api/order/base'
import { dashboard } from '@/api/order/info'
import {
  statisticCount as statisticCountReturn,
  statisticState as statisticStateReturn,
} from '@/api/order/return'
import VabChart from '@/extra/VabChart'
import { mapGetters } from 'vuex'

import MsChart from '@/extra/VabChart'
import TopCard from '@/components/MsWidget/TopCard'
/*
  import MsDateRangePicker from "@/components/MsDateRangePicker";
  import NavList from "@/views/index/components/IconList";
   */
import MsCount from '@/components/MsCount'
import { getSalesAmount } from '@/api/analytics/trade'
import {
  getOrderNumToday,
  getVoucherActiveNumToday,
} from '@/api/analytics/order'
import { getReturnNumToday } from '@/api/analytics/return'

export default {
  name: 'OverviewOrder',
  components: {
    VabChart,
    MsChart,
    TopCard,
    /*MsDateRangePicker, NavList,*/ MsCount,
  },
  data() {
    return {
      data: {},

      form: {
        startVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 5000,
      },
      timeChoice: 7,
      saleConfig: {
        startVal: 0,
        endVal: 0,
        /*decimals: 2,*/
        prefix: '￥',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },
      orderNumConfig: {
        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,
      },
      voucherNumConfig: {
        startVal: 0,
        endVal: 0,
        /*decimals: 0,*/
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

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

      countConfig: {
        startVal: 0,
        endVal: _.random(1000, 6000),
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 5000,
      },

      polylineOptionMakeLine: {
        title: {
          left: 'center',
          text: this.__('最近7天的消费客户数量'),
        },
        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: [],
          },
        ],
      },
      polylineOptionMake: {
        title: {
          left: 'center',
          text: this.__('最近7天的订单成交金额趋势图'),
        },
        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: [],
          },
        ],
      },
      columnOptionsReturn: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            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,
                }))
              ),
            },
          },
        ],
      },
      polylineOptionReturn: {
        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: [],
          },
        ],
      },
      columnLoading: true,
      polylineLoading: true,
      loading: false,
      initOptions: {
        renderer: 'svg',
      },
      pram: {
        order: {
          order_day_percentage_complete: '0%',
          order_percentage_complete: '0%',
          day_num: 0,
          total_num: 0,
          ship_num: 0,
          wait_pay_num: 0,
          eva_num: 0,
        },
        return: {
          total_num: 0,
          fin_num: 0,
          review_num: 0,
          un_fin_num: 0,
        },
        data: {},
        notice: [],
        product: {
          total_num: 0,
          verify_refused_num: 0,
          verify_passed_off_num: 0,
          illegal_num: 0,
          normal_num: 0,
          off_num: 0,
        },
        store_info: {
          store_is_open: undefined,
        },
      },
      columnOptions: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            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,
                }))
              ),
            },
          },
        ],
      },
      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: [],
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters({
      rid: 'user/rid',
    }),
  },
  created() {
    this.dashboard()
    this.fetchData()
  },
  methods: {
    __,
    t: __,
    goToPath(path, query) {
      this.$router.push({ path: path, query: query })
    },

    // 商家端-销售额
    async getSalesAmountFun() {
      const { data } = await getSalesAmount()
      this.topData = data
      this.saleConfig = Object.assign(this.saleConfig, data)
    },
    // 商家端-订单量
    async getOrderNumFun() {
      const { data } = await getOrderNumToday()
      this.topData = data
      this.orderNumConfig = Object.assign(this.orderNumConfig, data)
    },
    // 商家端-退货单数
    async getReturnNumFun() {
      const { data } = await getReturnNumToday()
      this.refundNumConfig = Object.assign(this.refundNumConfig, data)
    },
    // 商家端-使用优惠卷数量
    async getVoucherNumFun() {
      const { data } = await getVoucherActiveNumToday()
      this.voucherNumConfig = Object.assign(this.voucherNumConfig, data)
    },

    formatOpen(row) {
      return row === 0 ? this.__('关闭') : this.__('运营中')
    },
    async statisticStateReturn(days) {
      this.columnLoading = true
      await statisticStateReturn(days)
      this.columnLoading = false
    },
    // 退单销售趋势图
    async statisticCountReturnReturnEvt() {
      this.statisticCountReturnReturn(parseInt(this.timeChoice))
    },
    async statisticCountReturnReturn(days) {
      this.polylineLoading = true
      const { data } = await statisticCountReturn({ days: days })
      this.polylineOptionReturn.xAxis.data = data.map((item) => item.curr_date)
      this.polylineOptionReturn.series[0].data = data.map(
        (item) => item.record_count
      )
      this.polylineLoading = false
    },
    queryData() {
      this.fetchData()
    },
    async fetchData() {
      this.getSalesAmountFun()
      this.getOrderNumFun()

      this.getReturnNumFun()
      this.getVoucherNumFun()

      // 订单返回静止状态
      await this.statisticStateReturn()
      // 退单销售趋势图
      await this.statisticCountReturnReturn(parseInt(this.timeChoice))
      // 订单基础状态
      await this.statisticState()
      // 订单销售趋势图
      await this.statisticCount(parseInt(this.timeChoice))
      // 客户统计趋势图
      await this.getCustomerTimeline(parseInt(this.timeChoice))
      // 订单成交金额趋势图
      await this.statisticAmount(parseInt(this.timeChoice))
    },
    async statisticState(days) {
      this.columnLoading = true
      await statisticState(days)
      this.columnLoading = false
    },
    async dashboard() {
      const { data } = await dashboard()
      if (data != null) {
        this.pram = data
        // 代发货
        this.data.wait_shipping_num = data.order.wait_shipping_num
        // 待审核退货
        this.data.review_num = data.return.review_num
        // 违规商品
        this.data.off_num = data.product.off_num
        // 待补货 (缺少字段)
        this.data.product_warning_num = data.product.product_warning_num
        // 待回复
        this.data.wait_reply_num = data.product.wait_reply_num
        // 待开票
        this.data.invoice_wait_num = data.order.invoice_wait_num
      }
    },
    async statisticAmountEvt() {
      this.statisticAmount(parseInt(this.timeChoice))
    },
    //订单成交金额趋势图
    async statisticAmount(days) {
      this.loading = true
      const { data } = await statisticAmount({ days: days })
      this.polylineOptionMake.title.text = this.sprintf(
        this.__('最近 %s 天的订单成交金额趋势图'),
        days
      )
      this.polylineOptionMake.xAxis.data = data.map((item) => item.curr_date)
      this.polylineOptionMake.series[0].data = data.map((item) => item.amount)
      this.loading = false
    },
    async getCustomerTimelineEvt() {
      this.getCustomerTimeline(parseInt(this.timeChoice))
    },
    //客户统计趋势图
    async getCustomerTimeline(days) {
      const { data } = await getCustomerTimeline({ days: days })
      this.polylineOptionMakeLine.title.text = this.sprintf(
        this.__('最近 %s 天的消费客户数量'),
        days
      )
      this.polylineOptionMakeLine.xAxis.data = data.map((item) => item.time)
      this.polylineOptionMakeLine.series[0].data = data.map((item) => item.num)
    },
    async statisticCountEvt() {
      this.statisticCount(parseInt(this.timeChoice))
    },
    // 订单销售趋势图
    async statisticCount(days) {
      this.polylineLoading = true
      const { data } = await statisticCount({ days: days })
      if (!data) return
      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
    },
  },
}
</script>



<style scoped lang="scss">
.dashboard-container {
  padding: 0 !important;
  background: $base-color-background !important;

  :deep() {
    .el-card {
      [class*='-echart'] {
        width: 100%;
        height: 200px;
      }
    }
  }

  .is-align-middle {
    padding: 10px 0;
  }

  .xe-icon {
    width: 80px;
    padding: 10px;

    .i-wh-workbench {
      display: block;
      color: #fff;
      text-align: center;
      font-size: 25px;
      line-height: 50px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-clip: padding-box;
    }
  }

  .xe-icon {
    width: 56px;
    height: 56px;
    color: #fff;
    text-align: center;

    border-radius: 50%;
  }

  .xe-icon i {
    font-size: 36px;
    line-height: 36px;
  }

  .xe-info {
    padding-left: 10px;
    text-align: left;
  }
  .xe-name {
    font-size: 12px;
    color: #98a9bc;
  }

  .xe-num {
    display: block;
    font-size: 24px;

    text-align: left;
  }

  .xe-label {
    text-align: left;
    display: block;
    font-style: normal;
    font-size: 10px;
    text-transform: uppercase;
    color: #979898;
  }

  .xe-todo {
    text-align: right;
    display: block;
    font-style: normal;
    font-size: 10px;
    text-transform: uppercase;
    color: #979898;
    margin-top: 5px;
  }
}

.order {
  &-card1 {
    //background: linear-gradient(to right, #60b2fb, #6485f6);
    //color: $base-color-white !important;

    &-content {
      text-align: center;
    }

    ::v-deep {
      .el-card {
        &__header,
        &__body {
          //color: $base-color-white !important;

          p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
          }

          h1 {
            margin: 0.67em 0;
            font-size: 2em;
          }
        }
      }
    }
  }

  margin-bottom: $base-margin;
}
</style>
