<template>
  <!-- 主页 -->
  <div class="homePage flex-col">
    <s-header :name="sys ? sys.title : $t('public.sysName')" :noback="true"></s-header>
    <div class="homeBox">
      <!-- 留言滚动条 -->
      <van-notice-bar
        :scrollable="true"
        mode="closeable"
        color="rgba(64,77,116,1)"
        background="#fff"
        left-icon="volume-o"
        text="这里显示最新的消息，您有一条消息待阅读"
      />
      <div class="intervalRow"></div>
      <div class="nameDeviceRow flex-col">
        <span class="txt3">{{ userName }}</span>
        <span class="info3">0总设备</span>
        <span class="word2">0运行中</span>
      </div>
      <div class="titleBox flex-col">
        <div class="layer2 flex-row">
          <div class="section5 flex-col"></div>
          <div class="TextGroup2 flex-col">
            <span class="txt4">数据概览</span>
          </div>
        </div>
      </div>
      <dateSelectList @update="update($event)"></dateSelectList>
      <typeSelectList @upselectdata="upselectdata($event)"></typeSelectList>
      <div class="outer5 flex-col" @click="pushOrderCenter">
        <div class="block5 flex-col">
          <div class="topTitle flex-row justify-end">
            <span class="txt10">订单数据</span>
            <div class="layer4 flex-col"></div>
          </div>
          <div class="outerBox flex-row">
            <div class="main4 flex-col justify-between">
              <div class="main5 flex-row justify-center">
                <span class="word8">&yen;</span>
                <span class="word9">{{salesVolume}}</span>
              </div>
              <span class="info5">收入总额</span>
            </div>
            <div class="TextGroup7 flex-col">
              <div class="mod3 flex-col justify-between">
                <span class="txt8">{{salesNumber}}</span>
                <span class="info6">销售量</span>
              </div>
            </div>
            <div class="TextGroup8 flex-col">
              <div class="outer6 flex-col justify-between">
                <span class="txt9">{{salesNumber}}</span> <span class="word10">订单数</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ref="chartBox" class="Chart1 flex-col"></div>
      <div class="outer9 flex-col justify-center">
        <div class="main24 flex-col justify-between">
          <div class="ImageText10 flex-col">
            <div class="wrap2 flex-row justify-between">
              <div class="outer10 flex-col"></div>
              <div class="TextGroup13 flex-col">
                <span class="txt13">常用工具</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="outer11 flex-row">
        <div
          class="main25 flex-col"
          v-for="(item, index) in pushToolList"
          :key="index"
          @click="pushToolPage(item)"
        >
          <div class="mod7 flex-col" :class=" showModeClass(item)"></div>
          <div class="TextGroup14 flex-col">
            <span class="info15" v-html="item"></span>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import navBar from "@/components/NavBar";
import dateSelectList from "@/components/dateSelectList";
import typeSelectList from "@/components/typeSelectList";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";
import { getStatistics } from "@/service/home";
import dateUtil from "@/utils/dateUtil";

export default {
  name: "home",
  components: { sHeader, navBar, dateSelectList, typeSelectList },
  setup() {
    const user = getLoginUser();
    const router = useRouter();
    const userName = ref(user.name);
    const sys = ref(null);
    // 图表对象
    const chartBox = ref();
    let chartObj = null;
    // 跳转订单中心
    const pushOrderCenter = () => {
      router.push({ path: "/orderCenter" });
    };
    let dateSelect = {};
    const update = (uDate) => {
      dateSelect = uDate;
      getStatisticsFun();
    };
    let typeSelectData = {};
    const upselectdata = (uSData) => {
      typeSelectData = uSData;
      getStatisticsFun();
    };
    const salesVolume = ref(0);
    const salesNumber = ref(0);
    // 查询图表
    const getStatisticsFun = async () => {
      const params = {
        ...dateSelect,
        // ...typeSelectData,
        adminId: user.id,
        ifForeign: user.ifForeign,
        equipmentId: typeSelectData.clientId,
        username: typeSelectData.userName, // 商家
      };
      const { data } = await getStatistics(params);
      if (data.code && data.data) {
        salesVolume.value = 0;
        salesNumber.value = 0;
        data.data.series[0].data.forEach(item => {
          salesNumber.value = parseInt(salesNumber.value + item);
        });
        data.data.series[1].data.forEach(item => {
          salesVolume.value = parseInt(salesVolume.value + item);
        });
        chartObj = window.echarts.init(chartBox.value, null, {
          renderer: "canvas",
          useDirtyRect: false,
        });
        chartObj.setOption({
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true,
          },
          legend: {
            bottom: 0,
            right: 10,
            itemWidth: 10,
            itemHeight: 10,
            icon: "rect",
          },
          xAxis: {
            type: "category",
            data: data.data.categories,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              ...data.data.series[0],
              type: "bar",
              itemStyle: { color: "#4D6ADD" },
            },
            {
              ...data.data.series[1],
              type: "bar",
              itemStyle: { color: "#E59A6D" },
            },
          ],
        });
      }
    };
    const pushToolList = ref([]);
    // 页面初始化
    onMounted(() => {
      if (localStorage.getItem('loginSys')) {
        const loginSysString = localStorage.getItem('loginSys');
        sys.value = JSON.parse(loginSysString);
      }
      if (user.isAdmined) {
        pushToolList.value = ["设备管理", "优惠码", "分销设置", "账号权限", "商户管理", "广告管理", "报警历史", "订单分析", "杉德分账", "任务消息"];
      } else {
        const menuList = [];
        user.menuCodeList.forEach(item => {
          if (item === 'M1') { menuList.push('设备管理'); }
          if (item === 'M7') { menuList.push('优惠码'); }
          if (item === 'M3') { menuList.push('分销设置'); }
          if (item === 'M8') { menuList.push('账号权限'); }
          if (item === 'M8') { menuList.push('商户管理'); }
          if (item === 'M5') { menuList.push('广告管理'); }
          if (item === 'M4') { menuList.push('报警历史'); }
          if (item === 'M9') { menuList.push('订单分析'); }
          if (item === 'M10') { menuList.push('杉德分账'); }
          if (item === 'M6') { menuList.push('任务消息'); }
        });
        pushToolList.value = menuList;
      }
      dateSelect = {
        chartType: "day",
        startDate: dateUtil.formateDate(
          new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0)),
          "yyyy-MM-dd hh:mm:ss"
        ),
        endDate: dateUtil.formateDate(
          new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 59)),
          "yyyy-MM-dd hh:mm:ss"
        ),
      };
      typeSelectData = {
        userName: "all",
        clientId: null,
      };
      getStatisticsFun();
    });
    // 常用操作跳转页面
    const pushToolPage = (index) => {
      switch (index) {
        case '设备管理':
          router.push({ path: "/device" });
          break;
        case '优惠码':
          router.push({ path: "/discountCode" });
          break;
        case '分销设置':
          router.push({ path: "/distributionSet" });
          break;
        case '账号权限':
          router.push({ path: "/accountPer" });
          break;
        case '商户管理':
          router.push({ path: "/merchantManage" });
          break;
        case '广告管理':
          router.push({ path: "/advertManage" });
          break;
        case '报警历史':
          router.push({ path: "/alarmHistory" });
          break;
        case '订单分析':
          router.push({ path: "/orderExport" });
          break;
        case '杉德分账':
          router.push({ path: "/subLedgerManage" });
          break;
        case '任务消息':
          router.push({ path: "/taskMessage" });
          break;
      }
    };
    const showModeClass = (index) => {
      let className = '';
      switch (index) {
        case '设备管理':
          className = 'device';
          break;
        case '优惠码':
          className = 'discountCode';
          break;
        case '分销设置':
          className = 'distributionSet';
          break;
        case '账号权限':
          className = 'accountPer';
          break;
        case '商户管理':
          className = 'merchantManage';
          break;
        case '广告管理':
          className = 'advertManage';
          break;
        case '报警历史':
          className = 'alarmHistory';
          break;
        case '订单分析':
          className = 'orderExport';
          break;
        case '杉德分账':
          className = 'subLedgerManage';
          break;
        case '任务消息':
          className = 'taskMessage';
          break;
      }
      return className;
    }
    return {
      userName,
      update,
      upselectdata,
      chartBox,
      pushOrderCenter,
      pushToolList,
      pushToolPage,
      salesVolume,
      salesNumber,
      showModeClass,
      sys
    };
  },
};
</script>

<style lang="less" scoped >
@import "@/common/style/common.less";
@import "./index.less";
</style>