<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="12" :md="12" :sm="24" :xl="12" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('新增店铺数')"
          :count-config="newNumConfig"
          icon="store-2-line"
          :title="t('新增店铺数')"
          :unit-text="t('人')"
        />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <top-num
          background="white"
          :bottom-text="t('店铺总量')"
          :count-config="storeNumConfig"
          icon="store-line"
          :title="t('店铺总量')"
          :unit-text="t('个')"
        />
      </el-col>
    </el-row>


    <el-row :gutter="30">
      <el-col :span="12">
        <el-card v-loading="loading" class="box-card">
          <div slot="header">
            {{ t('店铺入驻状态') }}
          </div>
          <ms-chart
            :init-options="initOptions"
            :option="stateOption"
            style="width: 100%"
            theme="vab-echarts-theme"
          />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card v-loading="loading" class="box-card">
          <div slot="header">
            {{ t('店铺状态数据') }}
          </div>
          <ms-chart
            :init-options="initOptions"
            :option="isOpenOption"
            style="width: 100%"
            theme="vab-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 #header>
              <vab-icon icon="store-2-line" />
              {{ t('店铺入驻趋势图') }}
              <el-radio-group
                v-model="userTime"
                class="radio-inline"
                size="small"
                style="float: right"
                @change="getAccessItemUserTimeLineFunEvt"
              >
                <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="accessUserTimeLineOption"
              style="width: 100%"
              theme="ms-echarts-theme"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {statisticState} from '@/api/store/base'

import {translateTitle as t} from '@/utils/i18n'
import TopNum from '@/components/MsWidget/TopNum'
import MsDateRangePicker from '@/components/MsDateRangePicker'
import MsChart from '@/extra/VabChart'

import {getStoreNum, getStoreTimeLine,} from '@/api/analytics/store';

import moment from 'dayjs';
import {formatTimeLineRange} from '@/utils';


export default {
  name: 'OverviewStore',
  components: {MsChart, TopNum, MsDateRangePicker},
  data() {
    return {
      userTime: 7,
      storeNumConfig: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,

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

        today: 0,
        yestoday: 0,
        daym2m: 0,
      },
      accessUserTimeLineOption: {
        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',
      },
      height: this.$baseTableHeight(),
      itemList: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      order_time_range: ['', ''],
      userList: [],
      queryForm: {
        product_name: '',
        product_id: '',
        product_number: '',
        user_id: '',
        stime: '',
        etime: '',
      },
      stateOption: {
        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)',
              },
            },
          },
        ],
      },
      isOpenOption: {
        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)',
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    t,
    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.getStoreNumFun({stime: null, etime: null});

      this.getStoreNewNum(params);

      let days = 30;
      if (this.queryForm.stime && this.queryForm.etime) {
        this.userTime = '';
        days = (this.queryForm.etime - this.queryForm.stime) / (1000 * 3600 * 24);
        const timeRange = {
          days,
          stime: this.queryForm.stime,
          etime: this.queryForm.etime,
        };
        this.getAccessItemUserTimeLineFunRange(timeRange);
      } else {
        this.getAccessItemUserTimeLineFun(days);
      }

      await this.statisticState()
    },


    async getStoreNumFun(params) {
      const {data} = await getStoreNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.storeNumConfig = Object.assign(this.storeNumConfig, data);
    },
    async getStoreNewNum(params) {
      const {data} = await getStoreNum(params);
      data.today = data.current;
      data.yestoday = data.pre;
      this.newNumConfig = Object.assign(this.newNumConfig, data);
    },


    async getAccessItemUserTimeLineFunEvt() {
      this.getAccessItemUserTimeLineFun(parseInt(this.userTime))
    },

    async getAccessItemUserTimeLineFunRange(timeRange) {
      this.loading = true;
      const params = {stime: timeRange.stime, etime: timeRange.etime};
      const {data} = await getStoreTimeLine(params);
      formatTimeLineRange(data, timeRange.days, timeRange.etime);
      this.accessUserTimeLineOption.xAxis.data = data.map((item) => item.time);
      this.accessUserTimeLineOption.series[0].data = data.map((item) => item.num);
      this.loading = false;
    },

    async getAccessItemUserTimeLineFun(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(), days:days};
      this.getAccessItemUserTimeLineFunRange(params)
    },


    async statisticState(days) {
      const {data} = await statisticState(days)
      this.stateOption.series[0].data = [
        {value: data[0][3230], name: this.t('拒绝')},
        {value: data[0][3240], name: this.t('通过')},
        {value: data[0][3220], name: this.t('待审核')},
      ]
      this.isOpenOption.series[0].data = [
        {value: data[1][1], name: this.t('开启')},
        {value: data[1][0], name: this.t('关闭')},
      ]
    },
  },
  created() {
    this.fetchData();
  },
}
</script>

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

  .el-card {
    height: 300px;

    [class*='-echart'] {
      width: 100%;
      height: 200px;
    }
  }
}

.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-info {
}

.xe-num {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: #3e3f3f;
  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;
}

.el-row {
  margin-bottom: 0px;
}

.ml10 {
  margin-left: 10px;
}
</style>
