<template>
  <div class="dashboard-container">
    <el-card class="order-card1" shadow="hover">
      <template #header>
        <vab-icon icon="todo-line" />
        {{ __('待办事项') }}
      </template>
      <el-row class="order-card1-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="store-2-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/store/index', { store_state_id: 3220 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.store_certification_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 two1">
              <vab-icon icon="product-hunt-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/product/base', { product_verify_id: 3002 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.product_verify_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="money-dollar-box-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/pay/withdraw', {withdraw_state: 0,})"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.withdraw_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="user-3-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/user/index', { user_certification: 2 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.user_certification_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="shield-check-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/storybase', { product_verify_id: 3002 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.story_verify_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="feedback-line" />
            </el-col>
            <el-col class="xe-info">
              <el-link
                :underline="false"
                @click="goToPath('/feedback', { product_verify_id: 3002 })"
              >
                <ms-count
                  class="xe-num"
                  :duration="form.duration"
                  :end-val="data.feedback_todo_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>

    <div>
      <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="visitsUserConfig"
            icon="user-3-line"
            :title="t('访问量')"
            :unit-text="t('PV')"
          />
        </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="regUserConfig"
              icon="user-search-line"
              :title="t('新增用户')"
              :unit-text="t('人')"
            />
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <nav-list />
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card :loading="columnLoading" class="box-card">
            <template slot="header">
              <vab-icon icon="bill-line" />
              {{ t('最近订单增长') }}
              <el-radio-group
                v-model="dayTimeOne"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getDashboardTimeLineFunEvt"
              >
                <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>
            </template>
            <ms-chart
              :init-options="initOptions"
              :option="columnOptions"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
      <el-col  :span="12">
        <div class="grid-content bg-purple">
          <el-card :loading="columnLoading" class="box-card">
            <template slot="header">
              <vab-icon icon="user-6-line" />
              {{ t('最近用户增长') }}
              <el-radio-group
                v-model="dayTimeOne"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getDashboardTimeLineFunEvt"
              >
                <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>
            </template>
            <ms-chart
              :init-options="initOptions"
              :option="columnOptionsWeek"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card :loading="columnLoading" class="box-card">
            <template slot="header">
              <vab-icon icon="product-hunt-line" />
              {{ t('最近商品增长') }}
              <el-radio-group
                v-model="dayTimeOne"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getDashboardTimeLineFunEvt"
              >
                <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>
            </template>
            <ms-chart
              :init-options="initOptions"
              :option="columnOptionsWeekGoods"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card :loading="columnLoading" class="box-card">
            <template slot="header">
              <vab-icon icon="money-cny-box-line" />
              {{ t('最近销售额增长') }}
              <el-radio-group
                v-model="dayTimeOne"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getDashboardTimeLineFunEvt"
              >
                <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>
            </template>
            <ms-chart
              :init-options="initOptions"
              :option="columnOptionsMarket"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>


    <!-- The following rows are kept -->
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card v-loading="loading" class="box-card">
          <template slot="header">
            <vab-icon icon="user-6-line" />
            {{ t('购买商品顾客统计') }}
            <el-radio-group
              v-model="dayTimeTwo"
              class="radio-inline"
              size="small"
              style="float: right"
              @change="getOrderCustomerNumTimelineFunEvt"
            >
              <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>
          </template>
          <ms-chart
            :init-options="initOptions"
            :option="customerOpt"
            style="width: 100%"
            theme="ms-echarts-theme"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-card v-loading="loading" class="box-card">
            <template slot="header">
              <vab-icon icon="money-dollar-box-line" />
              {{ t('订单销售金额对比图') }}
              <el-radio-group
                v-model="dayTimeThree"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getSaleOrderAmountFunEvt"
              >
                <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>
            </template>
            <ms-chart
              :init-options="initOptions"
              :option="polylineOptionMake"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { translateTitle as t } from '@/utils/i18n'
import TopCard from '@/components/MsWidget/TopCard'
import MsDateRangePicker from '@/components/MsDateRangePicker'
import MsChart from '@/extra/VabChart'
import NavList from './components/IconList'
import MsCount from '@/components/MsCount'

import { getSalesAmount } from '@/api/analytics/trade';
import { getVisitor, getRegUser } from '@/api/analytics/user';
import {
  getOrderNumToday,
  getDashboardTimeLine,
  getOrderCustomerNumTimeline,
  getSaleOrderAmount,
  getOrderNumTimeline,
} from '@/api/analytics/order';

import { adminDashboard } from '@/api/order/info'

import moment from "dayjs";
import {formatTimeLine} from "@/utils";

export default {
  name: 'OverviewOrder',
  components: { MsChart, TopCard, MsDateRangePicker, NavList, MsCount },
  data() {
    return {
      countConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 5000,
      },

      dayTimeOne: 7,
      dayTimeTwo: 7,
      dayTimeThree: 7,
      saleConfig: {
        startVal: 0,
        endVal: 0,
        /*decimals: 2,*/
        prefix: '￥',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },
      visitsUserConfig: {
        startVal: 0,
        endVal: 0,
        /*decimals: 0,*/
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },
      regUserConfig: {
        startVal: 0,
        endVal: 0,
        /*decimals: 0,*/
        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,
      },
      form: {
        startVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 5000,
      },
      topData: {
        tradeAmount: 0,
        tradeAmountIncreaseRate: 0.0,
        orderFinishNum: 0,
        orderFinishNumIncreaseRate: 0.0,
        userCertificationNum: 0,
        userCertificationNumIncreaseRate: 0.0,
        orderNum: 0,
        orderNumIncreaseRate: 0.0
      },
      data: {
        story_verify_num: 0,
        product_verify_num: 0,
        feedback_todo_num: 0,
        order_num: 0,
        favorable_order_num: 0,
        user_reg_yestoday: [
          {
            num: 0,
          },
          {
            num: 0,
          },
        ],
        user_payment_yestoday: [
          {
            num: 0,
          },
          {
            num: 0,
          },
        ],
      },
      polylineOptionMakeLine: {
        title: {
          left: 'center',
          text: '最近7天的消费客户数量',
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '消费客户数量',
            type: 'line',
            data: [],
          }
        ],
      },
      polylineOptionMake: {
        /*title: {
          left: 'center',
          text: t('最近7天的订单成交金额趋势图'),
        },*/
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订单数量', '成交金额'],
        },
        grid: {
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: [],
          },
          {
            name: '成交金额',
            type: 'line',
            data: [],
          },
        ],
      },
      osOpt: {
        title: {
          text: '操作系统',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      browserOpt: {
        title: {
          text: '浏览器',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      countryOpt: {
        title: {
          text: '访问国家',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      deviceOpt: {
        title: {
          text: '访问设备',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      provinceOpt: {
        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 MsChart.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                ['#88D1FF', '#1890FF'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      customerOpt: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['提交订单的客户数'],
        },
        grid: {
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '提交订单的客户数',
            type: 'line',
            data: [],
          },
        ],
      },
      columnLoading: false,
      polylineLoading: false,
      loading: false,
      initOptions: {
        renderer: 'svg',
      },
      columnOptions: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '0%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [
              // 2011-待订单审核;2013-待财务审核;2020-待配货/待出库审核;2030-待发货;2040-已发货/待收货确认;2060-已完成/已签收;2070-已取消/已作废;
            ],
            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,
                ['#a9ee86', '#78e071'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      columnOptionsMarket: {
        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-已取消/已作废;
            ],
            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,
                ['#dab59c', '#e79a66'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
      columnOptionsWeekGoods: {
        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-已取消/已作废;
            ],
            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,
                }))
              ),
            },
          },
        ],
      },
      columnOptionsWeek: {
        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-已取消/已作废;
            ],
            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,
                ['#958ad3', '#786acc'].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: '有效订单',
            type: 'line',
            data: [],
          },
          {
            name: '取消订单',
            type: 'line',
            data: [],
          },
        ],
      },
    }
  },
  mounted() {
    this.fetchData();
    this.adminDashboard()
  },
  methods: {
    t,
    goToPath(path, query) {
      this.$router.push({ path: path, query: query });
    },
    getUserRegYestodayRate() {
      const num0 = this.data['user_reg_yestoday'][0]['num'];
      const num1 = this.data['user_reg_yestoday'][1]['num'];
      if (num0 && num1) {
        return Math.round((num0 / num1) * 10000) / 100.0 + '%';
      } else {
        return '--';
      }
    },
    getUserPaymentYestodayRate() {
      const user_payment_yestoday = this.data['user_payment_yestoday'];
      if (!user_payment_yestoday || user_payment_yestoday.length < 2) {
        return '--';
      }
      const user_payment_day_num = user_payment_yestoday[1]['num'];
      const user_payment_yesterday_num = user_payment_yestoday[0]['num'];
      if (user_payment_yesterday_num) {
        return (
          Math.round(
            (user_payment_day_num / user_payment_yesterday_num) * 10000
          ) /
          100.0 +
          '%'
        );
      } else {
        return '--';
      }
    },
    getOrderYestodayNumRate() {
      const order_day_num = this.data.order_day_num;
      const order_yestoday_num = this.data.order_yestoday_num;
      if (order_yestoday_num) {
        return (
          Math.round((order_day_num / order_yestoday_num) * 10000) / 100.0 +
          '%'
        );
      } else {
        return '--';
      }
    },
    getProductTodayNumRate() {
      const product_today_num = this.data.product_today_num;
      const product_yestoday_num = this.data.product_yestoday_num;
      if (product_yestoday_num) {
        return (
          Math.round(
            ((product_today_num - product_yestoday_num) /
              product_yestoday_num) *
            10000
          ) /
          100.0 +
          '%'
        );
      } else {
        return '--';
      }
    },
    getUserRegYestoday(index) {
      return this.data['user_reg_yestoday'][index]['num'];
    },
    getUserPaymentYestoday(index) {
      return this.data['user_payment_yestoday'][index]['num'];
    },
    queryData() {
      this.fetchData();
    },
    fetchData() {
      this.getDashboardTimeLineFun(30);
      this.getSalesAmountFun();
      this.getVisitorFun();
      this.getOrderNumFun();
      this.getRegUserFun();
      this.getSaleOrderAmountFun(30);
      this.getOrderCustomerNumTimelineFun(30);
      // this.getAccessOs();
      // this.getAccessBrowser();
      // this.getAccessCountry();
      // this.getAccessDevice();
      // this.getAccessProvince();
    },
    /*
    async getAccessOs() {
      const { data } = await getAO();
      this.osOpt.series[0].data = data;
    },
    async getAccessBrowser() {
      const { data } = await getAB();
      this.browserOpt.series[0].data = data;
    },
    async getAccessCountry() {
      const { data } = await getAC();
      this.countryOpt.series[0].data = data;
    },
    async getAccessDevice() {
      const { data } = await getAD();
      this.deviceOpt.series[0].data = data;
    },
    async getAccessProvince() {
      const { data } = await getAP();
      const names = data.map((item) => item.name);
      this.provinceOpt.xAxis[0].data = names;
      const values = data.map((item) => item.value);
      this.provinceOpt.series[0].data = values;
    },
     */
    async getSalesAmountFun() {
      const { data } = await getSalesAmount();
      this.topData = data;
      this.saleConfig = Object.assign(this.saleConfig, data);
    },
    async getVisitorFun() {
      const { data } = await getVisitor();
      this.topData = data;
      this.visitsUserConfig = Object.assign(this.visitsUserConfig, data);
    },
    async getOrderNumFun() {
      const { data } = await getOrderNumToday();
      this.topData = data;
      this.orderNumConfig = Object.assign(this.orderNumConfig, data);
    },
    async getRegUserFun() {
      const { data } = await getRegUser();
      this.topData = data;
      this.regUserConfig = Object.assign(this.regUserConfig, data);
    },
    async getOrderCustomerNumTimelineFunEvt() {
      this.getOrderCustomerNumTimelineFun(parseInt(this.dayTimeTwo))
    },
    async getOrderCustomerNumTimelineFun(days) {
      const start = new Date(moment(moment().subtract(days - 1, 'days').format('YYYY-MM-DD')));
      const end = new Date();
      const params = { stime: start.getTime(), etime: end.getTime() };
      const { data } = await getOrderCustomerNumTimeline(params);
      formatTimeLine(data, days);
      const date = data.map((item) => item.time);
      this.customerOpt.xAxis.data = date;
      const nums = data.map((item) => item.num);
      this.customerOpt.series[0].data = nums;
    },
    async getDashboardTimeLineFunEvt() {
      this.getDashboardTimeLineFun(parseInt(this.dayTimeOne))
    },
    async getDashboardTimeLineFun(days) {
      this.columnLoading = true;
      const start = new Date(moment(moment().subtract(days - 1, 'days').format('YYYY-MM-DD')));
      const end = new Date();
      const params = { stime: start.getTime(), etime: end.getTime() };
      const { data, status } = await getDashboardTimeLine(params);
      if (status == 200) {
        formatTimeLine(data.orderTimeLine, days);
        formatTimeLine(data.userTimeLine, days);
        formatTimeLine(data.ptTimeLine, days);
        formatTimeLine(data.payTimeLine, days);
        this.columnOptions.xAxis[0].data = data.orderTimeLine.map((item) => item.time);
        this.columnOptions.series[0].data = data.orderTimeLine.map((item) => item.num);
        this.columnOptionsWeek.xAxis[0].data = data.userTimeLine.map((item) => item.time);
        this.columnOptionsWeek.series[0].data = data.userTimeLine.map((item) => item.num);
        this.columnOptionsWeekGoods.xAxis[0].data = data.ptTimeLine.map((item) => item.time);
        this.columnOptionsWeekGoods.series[0].data = data.ptTimeLine.map((item) => item.num);
        this.columnOptionsMarket.xAxis[0].data = data.payTimeLine.map((item) => item.time);
        this.columnOptionsMarket.series[0].data = data.payTimeLine.map((item) => item.num);
      }
      this.columnLoading = false;
    },
    async getSaleOrderAmountFunEvt() {
      this.getSaleOrderAmountFun(parseInt(this.dayTimeThree))
    },
    async getSaleOrderAmountFun(days) {
      this.loading = true;
      const start = new Date(moment(moment().subtract(days - 1, 'days').format('YYYY-MM-DD')));
      const end = new Date();
      const params = { stime: start.getTime(), etime: end.getTime() };

      const { data } = await getSaleOrderAmount(params)
      formatTimeLine(data, days);


      const { data : dataNum } = await getOrderNumTimeline(params)
      formatTimeLine(dataNum, days);


      //state.polylineOptionMake.title.text =  t('最近' + days + '天的订单成交金额趋势图')
      this.polylineOptionMake.xAxis.data = data.map((item) => item.time)
      this.polylineOptionMake.series[0].data = dataNum.map((item) => item.num)
      this.polylineOptionMake.series[1].data = data.map((item) => item.num)
      this.loading = false
    },
    async adminDashboard() {
      const { data } = await adminDashboard()
      this.data = data
    },
  }
}
</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;
    //background: var(--el-color-primary);
    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 {
    //height: 200px;
    //background: linear-gradient(to right, #60b2fb, #6485f6);
    //color: $base-color-white !important;

    &-content {
      text-align: center;
    }

    /*
    :deep() {
      .el-card {
        &__header,
        &__body {
          color: $base-color-white !important;
        }
      }
    }
     */
  }

  &-card2 {
    height: 490px;

    &-content {
      text-align: center;

      .order-chart {
        width: 100%;
        height: 345px;
      }
    }
  }

  margin-bottom: $base-margin;
}

</style>
