<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class=" Mall4j dashboard-container">
    <!-- 1.店铺状态信息提示 -->
    <div
      v-if="shopStatusInfo.supplierStatus !== null && shopStatusInfo.supplierStatus !== 1"
      class="shop-inf-imperfect-tips"
    >
      <div v-if="shopStatusInfo.supplierStatus === 2">
        <div>
          <el-icon color="#FFA900">
            <WarningFilled />
          </el-icon>
          {{ $t('dashboard.offlineBecauseBefore') }}
          <span>{{ shopStatusInfo.offlineReason }}</span>
          <span v-if="paySettlementType !== 1">{{ $t('dashboard.offlineBecauseAfter') }}</span>
          <span v-else>。如有问题请联系平台</span>
        </div>
      </div>
      <div v-if="shopStatusInfo.supplierStatus === 0">
        <div>
          <el-icon color="#FFA900">
            <WarningFilled />
          </el-icon>
          {{ $t('dashboard.closedBecauseBefore') }}
          <span>{{ shopStatusInfo.closedReason }}</span>
          {{ $t('dashboard.closedBecauseAfter') }}
        </div>
      </div>
      <div v-if="shopStatusInfo.supplierStatus === 5 || shopStatusInfo.supplierStatus === 3">
        <div>
          <el-icon color="#FFA900">
            <WarningFilled />
          </el-icon>
          {{ $t('dashboard.applyingOnlineBefore') }}
          <span>{{ $t('dashboard.applyingOnlineAfter') }}</span>
          <span v-if="paySettlementType === 1 && idCardCollectProcessStatus !== 4">，当前影印件状态异常，可通过店铺-工商信息刷新状态</span>
        </div>
      </div>
    </div>

    <!-- 2.平台公告-->
    <div
      v-if="announcementList.length"
      class="platform-notice white-bg"
    >
      <el-icon>
        <Bell />
      </el-icon>
      <!-- 平台公告：欢迎使用后台管理系统，平台最新公告展示在这里，可以滚动展示多条！ -->
      <div class="platform-notice-box">
        <div
          class="platform-notice-list"
          :class="{marquee_top:animate}"
        >
          <div
            v-for="(item,index) in announcementList"
            :key="index"
          >
            <p class="text">
              <span
                class="see-notice"
                @click="toNoticeDetail(item.id)"
              >{{ item.title }}</span>
              <span
                class="see-more-notice"
                @click="toNotify"
              >查看更多</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div style="display:flex">
      <div style="width: 80%;margin-right:20px">
        <!-- 3.订单数量 -->
        <div class="order-all-num white-bg">
          <div class="top">
            {{ $t('dashboard.toDoList') }}
          </div>
          <div class="right">
            <div
              class="wait-payment-num order-num-item"
              @click="toOrderPage(2)"
            >
              <img
                src="~@/assets/home/order-shipped.png"
                alt="图片"
              >
              <div class="item-box">
                <div class="number">
                  {{ payed }}
                </div>
                <div class="words">
                  {{ $t('dashboard.orderShipped') }}
                </div>
              </div>
            </div>
            <div
              class="wait-delivery-num order-num-item"
              @click="toOrderPage(3)"
            >
              <img
                src="~@/assets/home/goods-received.png"
                alt=""
              >
              <div class="item-box">
                <div class="number">
                  {{ consignment }}
                </div>
                <div class="words">
                  {{ $t('dashboard.goodsReceived') }}
                </div>
              </div>
            </div>
            <div
              class="wait-receiving-goods-num order-num-item"
              @click="toRefundOrderPage"
            >
              <img
                src="~@/assets/home/refund-after-sales.png"
                alt=""
              >
              <div class="item-box">
                <div class="number">
                  {{ refund }}
                </div>
                <div class="words">
                  {{ $t('dashboard.refundOrAfterSales') }}
                </div>
              </div>
            </div>
            <div
              class="wait-evaluate-num order-num-item"
              @click="toProductPage(2)"
            >
              <img
                src="~@/assets/home/Illegal-goods-off-shelves.png"
                alt=""
              >
              <div class="item-box">
                <div class="number">
                  {{ removedByPlatform }}
                </div>
                <div class="words">
                  {{ $t('dashboard.IllegalGoodsOffShelves') }}
                </div>
              </div>
            </div>
            <div
              class="wait-after-sales-num order-num-item"
              @click="toProductPage(3)"
            >
              <img
                src="~@/assets/home/commodity-reviewed.png"
                alt=""
              >
              <div class="item-box">
                <div class="number">
                  {{ underReview }}
                </div>
                <div class="words">
                  {{ $t('dashboard.commodityReviewed') }}
                </div>
              </div>
            </div>
            <div
              class="wait-after-sales-num order-num-item"
              @click="toStockPage()"
            >
              <img
                src="~@/assets/home/stock-warning.png"
                alt=""
              >
              <div class="item-box">
                <div class="number">
                  {{ stockWarning }}
                </div>
                <div class="words">
                  {{ $t('dashboard.stockWarning') }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 4.实时数据情况 -->
        <div class="real-time-data-survey data-survey-box">
          <div class="data-survey data-item-box">
            <div class="title">
              <span class="bold-words">{{ $t('dashboard.realTimeData') }}</span>
              <span class="update-time">{{ $t('dashboard.updateTime') + dayStr }}</span>
              <span class="data-center yesterday-data">{{ $t('dashboard.yesterdayData') }}</span>
              <span class="data-center today-data">{{ $t('dashboard.todayData') }}</span>
            </div>
            <div class="data-mid">
              <span class="paid-goods">{{ $t('dashboard.paidGoods') }}</span>
              <span class="paid-goods-num">{{ todayProdSoldCount }}</span>
              <span class="yesterday">{{ $t('dashboard.yesterday') + yesterdayProdSoldCount }}</span>
            </div>
            <!-- 图表 -->
            <div class="realtime-chart-box">
              <common-chart
                :options="getRealTimeDataChart()"
                style="width: 100%; height: 260px"
              />
            </div>
            <!-- /图表 -->
          </div>
          <div class="today-report-form data-item-box">
            <div class="title">
              <span class="bold-words">{{ $t('dashboard.dataStatistics') }}</span>
              <span class="data-center">{{ $t('dashboard.updateTime') + dayStr }}</span>
            </div>
            <div class="all-number">
              <div class="one-line line">
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.paymentAmount') }}(￥)
                  </div>
                  <div class="number">
                    {{ twoActual(data.toDayInfo.todayPayActual) }}
                    <img
                      :src="getArrowImg(data.toDayInfo.todayPayActual, data.toDayInfo.yesterdayPayActual)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ twoActual(data.toDayInfo.yesterdayPayActual) }}
                  </div>
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.newCustomersNumber') }}
                  </div>
                  <div class="number">
                    {{ data.toDayInfo.todayNewUserCount }}
                    <img
                      :src="getArrowImg(data.toDayInfo.todayNewUserCount, data.toDayInfo.yesterdayNewUserCount)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ defaultCount(data.toDayInfo.yesterdayNewUserCount) }}
                  </div>
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.payersNumber') }}
                  </div>
                  <div class="number">
                    {{ data.toDayInfo.todayPayUserCount }}
                    <img
                      :src="getArrowImg(data.toDayInfo.todayPayUserCount, data.toDayInfo.yesterdayPayUserCount)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ defaultCount(data.toDayInfo.yesterdayPayUserCount) }}
                  </div>
                </div>
              </div>
              <div class="two-line line">
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.refundAmount') }}(￥)
                  </div>
                  <div class="number">
                    {{ twoActual(data.toDayInfo.todayRefundAmount) }}
                    <img
                      :src="getArrowImg(data.toDayInfo.todayRefundAmount, data.toDayInfo.yesterdayRefundAmount)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ twoActual(data.toDayInfo.yesterdayRefundAmount) }}
                  </div>
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.productViewsNumber') }}
                  </div>
                  <div class="number">
                    {{ data.shopFlowInfo.visitCount }}
                    <img
                      :src="getArrowImg(data.shopFlowInfo.visitCount, data.shopFlowInfo.yesterdayVisitCount)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ defaultCount(data.shopFlowInfo.yesterdayVisitCount) }}
                  </div>
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('dashboard.goodsSale') }}
                  </div>
                  <div class="number">
                    {{ data.toDayInfo.todayProdSoldNums }}
                    <img
                      :src="getArrowImg(data.toDayInfo.todayProdSoldNums, data.toDayInfo.yesterdayProdSoldNums)"
                      alt=""
                    >
                  </div>
                  <div class="words">
                    {{ $t('dashboard.yesterday') }}{{ defaultCount(data.toDayInfo.yesterdayProdSoldNums) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-data-right">
        <div class="data-item-box">
          <div class="title">
            <div class="left-title">
              {{ $t('multishop.notice.bulletinBoard') }}
            </div>
            <div
              class="right-title"
              @click="toNotify"
            >
              {{ $t('multishop.notice.more') }}
            </div>
          </div>
          <div
            v-for="(item, index) in platformNotify"
            :key="index"
            class="content"
          >
            {{ index + 1 + "、" + item.title }}
          </div>
          <div
            v-if="platformNotify.length <= 0"
            class="no-data"
          >
            {{ $t('table.noData') }}
          </div>
        </div>
        <div class="data-item-box">
          <div class="title">
            <div class="left-title">
              {{ $t('multishop.notice.messageNotification') }}
            </div>
            <div
              class="right-title"
              @click="toManager"
            >
              {{ $t('multishop.notice.more') }}
            </div>
          </div>
          <div
            v-for="(item, index) in notifyList"
            :key="index"
            class="content notify-view"
            @click="notifyView(item)"
          >
            <span
              style="position: relative;margin-right: 6px;"
              :class="item.status ? 'reads-dot': 'unread-point'"
            >●</span>
            {{ item.message }}
          </div>
          <div
            v-if="notifyList.length <= 0"
            class="no-data"
          >
            {{ $t('table.noData') }}
          </div>
        </div>
      </div>
    </div>
    <!-- 5.常用功能 -->
    <div class="month-data-survey data-survey-box">
      <div class="data-item-box data-all-box">
        <div class="title">
          <span class="bold-words">{{ $t('dashboard.commonFunctions') }}</span>
        </div>
        <div class="data-item">
          <div
            class="item"
            @click="commonFun(1)"
          >
            <img
              src="~@/assets/home/commodity-management.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.commodityManagement') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(2)"
          >
            <img
              src="~@/assets/home/orde-management.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.ordeManagement') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(3)"
          >
            <img
              src="~@/assets/home/publish-product.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.publishProduct') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(4)"
          >
            <img
              src="~@/assets/home/price-adjustment-record.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.priceAdjustmentRecord') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(5)"
          >
            <img
              src="~@/assets/home/return-address.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.returnAddress') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(6)"
          >
            <img
              src="~@/assets/home/distribution-settings.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.distributionSettings') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(7)"
          >
            <img
              src="~@/assets/home/collection-account.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.collectionAccount') }}
            </div>
          </div>
          <div
            class="item"
            @click="commonFun(8)"
          >
            <img
              src="~@/assets/home/store-settlement.png"
              alt=""
            >
            <div class="text">
              {{ $t('dashboard.storeSettlement') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 6.近15日交易金额 -->
    <div class="refund-survey">
      <div class="one">
        <div class="title">
          <span class="bold-words">{{ $t('dashboard.transactionAmountEcentdays') }}
          </span>
          <span class="data-center">{{ $t('dashboard.transactionAmount') }}</span>
        </div>
        <common-chart
          :options="getRefundAmountDataChart()"
          style="width: 100%; height: 300px;"
        />
      </div>
      <!-- 新老客户 -->
      <div class="two">
        <div class="title">
          <span class="bold-words">{{ $t('dashboard.ProportionNewOldVisitorsdays') }}</span>
        </div>
        <div
          v-if="data.shopFlowInfo&&data.shopFlowInfo.prodRanking&&data.shopFlowInfo.prodRanking.length>0||!twoGetPark"
          class="data-box"
        >
          <div>
            <div class="data">
              {{ $t('dashboard.newCustomers') }}({{ conversionActual(newCustomersPercentage) }}%)
            </div>
            <div class="data green">
              {{ $t('dashboard.oldCustomers') }}({{ overActual(newCustomersPercentage) }}%)
            </div>
          </div>
        </div>
        <div
          v-if="!(data.shopFlowInfo&&data.shopFlowInfo.prodRanking&&data.shopFlowInfo.prodRanking.length>0||!twoGetPark)"
          class="no-data"
        >
          {{ $t('table.noData') }}
        </div>
        <common-chart
          v-if="data.shopFlowInfo&&data.shopFlowInfo.prodRanking&&data.shopFlowInfo.prodRanking.length>0||!twoGetPark"
          :options="getNewOldProportion()"
          style="width: 100%; height: 300px;"
        />
      </div>
    </div>
    <!-- 7.商品榜单 -->
    <div class="refund-ranking data-survey-box">
      <div class="return-prod-ranking return-ranking-box data-item-box">
        <div class="title">
          <span class="bold-words">{{ $t('dashboard.productList') }}</span>
        </div>
        <div class="ranking-content">
          <table class="refund-prod-table table">
            <tr class="table-tit">
              <td
                class="table-tit-item ref"
                style="text-align: left;padding-left: 20px"
              >
                {{ $t('dashboard.paymentAmountTop') }}
              </td>
              <td class="table-tit-item rank">
                {{ $t('dashboard.ordersNumber') }}
              </td>
              <td class="table-tit-item rank">
                {{ $t('dashboard.lowerPiecesNumber') }}
              </td>
              <td class="table-tit-item ref">
                {{ $t('dashboard.paymentAmountYuan') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in prodRankForActualTotal"
              :key="index"
              class="table-item"
            >
              <td class="rank-name-box">
                <ImgShow
                  :src="item.spuImg"
                  width="42"
                  height="42"
                />
                <div class="rank-name">
                  {{ item.spuName }}
                </div>
              </td>
              <td class="rank-amount">
                {{ item.orderNums || 0 }}
              </td>
              <td class="rank-amount">
                {{ item.productNums || 0 }}
              </td>
              <td class="rank-amount">
                {{ item.payAmount || 0 }}
              </td>
            </tr>
          </table>
          <div
            v-if="!prodRankForActualTotal.length"
            class="table-no-data"
          >
            {{ $t('table.noData') }}
          </div>
        </div>
      </div>
      <!-- 商品访客榜单 -->
      <div class="return-reason-ranking return-ranking-box data-item-box">
        <div class="title">
          <span class="bold-words">{{ $t('dashboard.productVisitorList') }}</span>
        </div>
        <div class="ranking-content">
          <table class="refund-prod-table table">
            <tr class="table-tit">
              <td
                class="table-tit-item rank"
                style="text-align: left;padding-left: 20px"
              >
                {{ $t('dashboard.visitorsNumberTop') }}
              </td>
              <td class="table-tit-item ref">
                {{ $t('dashboard.visitorsNumber') }}
              </td>
              <td class="table-tit-item ref">
                {{ $t('dashboard.accessPaymentConversionRate') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in prodRankForFlowTotal"
              :key="index"
              class="table-item"
            >
              <td class="rank-name-box">
                <ImgShow
                  :src="item.spuImg"
                  width="42"
                  height="42"
                />
                <div class="rank-name">
                  {{ item.spuName }}
                </div>
              </td>
              <td class="rank-amount">
                {{ item.visitUserCount || 0 }}
              </td>
              <td class="rank-amount">
                {{ item.payRate ? bigMultiplier(item.payRate) : 0 }}%
              </td>
            </tr>
          </table>
          <div
            v-if="!prodRankForFlowTotal.length"
            class="table-no-data"
          >
            {{ $t('table.noData') }}
          </div>
        </div>
      </div>
    </div>

    <!-- 公告弹窗 -->
    <el-dialog
      :model-value="viewDialog"
      title="平台公告"
      width="30%"
    >
      <p style="text-align: center">
        {{ announcementData.announcementDetail.title }}
      </p>
      <br>
      <span v-rich="announcementData.announcementDetail.content" />
      <template #footer>
        <el-button
          type="primary"
          @click="viewDialog = false"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import * as orderStatisticsApi from '@/api/order/order-statistics'
import * as shopEventApi from '@/api/multishop/shop-event'
import * as notifyApi from '@/api/notify/notify'
import * as prodApi from '@/api/product/prod-info'
import * as api from '@/api/multishop/notice'
import { getBasicInfo } from '@/api/multishop/shop-process'
import Big from 'big.js'
import { parseTime } from '@/utils'

const router = useRouter()

const shopStatusInfo = reactive({
  accountStatus: 0, // 账号状态， 1:启用 0:禁用 -1:删除
  supplierStatus: null, // 店铺状态 -1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5:申请失败 6:上线申请中
  offlineStatus: 0, // 下线状态 1平台进行下线 2 重新申请，等待审核 3.审核通过 4 审核未通过
  offlineReason: '', // 下线原因
  contractStartTime: '', // 签约起始时间
  contractEndTime: '', // 签约终止时间
  closedReason: '' // 停业原因
})

const paySettlementType = computed(() => useAllinpayStore().paySettlementType)
watch(paySettlementType, (val) => {
  if (val === 1) getBasicInfo()
})

const getShopStatusInfo = () => {
  shopEventApi.getStatusInfo().then(data => {
    if (data) {
      shopStatusInfo.accountStatus = data.accountStatus
      shopStatusInfo.supplierStatus = data.supplierStatus
      shopStatusInfo.offlineStatus = data.offlineStatus
      shopStatusInfo.offlineReason = data.offlineReason
      shopStatusInfo.contractStartTime = data.contractStartTime
      shopStatusInfo.contractEndTime = data.contractEndTime
      shopStatusInfo.closedReason = data.closedReason
      if (data.supplierStatus === 0) {
        const now = new Date()
        const contractStartTime = new Date(Date.parse(data.contractStartTime))
        shopStatusInfo.closedReason = $t(`dashboard.${now < contractStartTime ? 'contractNotValid' : 'validityContractExpired'}`)
      }
    }
  })
}
// 影印件采集审核状态 0.未上传 1.待审核 2.只有工商认证通过 3.只有法人信息通过 4.均审核通过
const idCardCollectProcessStatus = ref(-1)
const onGetBasicInfo = () => {
  getBasicInfo().then((data) => {
    idCardCollectProcessStatus.value = data.idCardCollectProcessStatus
  })
}

const payed = ref(0)
const consignment = ref(0)
const refund = ref(0)
const removedByPlatform = ref(0)
const underReview = ref(0)
// 获取不同状态的订单数量
const getOrderCountOfStatus = () => {
  orderStatisticsApi.getOrderCount().then(resultVO => {
    payed.value = resultVO.payed === null ? 0 : resultVO.payed
    consignment.value = resultVO.consignment === null ? 0 : resultVO.consignment
    refund.value = resultVO.refund === null ? 0 : resultVO.refund
  })
  orderStatisticsApi.getSpuCount().then(resultVO => {
    removedByPlatform.value = resultVO.removedByPlatform == null ? 0 : resultVO.removedByPlatform
    underReview.value = resultVO.underReview === null ? 0 : resultVO.underReview
  })
}

// 获取库存预警数量
const stockWarning = ref(0)
const getStockWarning = () => {
  prodApi.stockWarningCount().then(data => {
    stockWarning.value = data
  })
}

// 当日str
const dayStr = ref('1991-12-1')
const data = reactive({
  // 当天统计数据
  toDayInfo: {
    onePrice: 0, // 客单价
    payActual: 0, // 收入金额
    payUserCount: 0, // 支付客户数
    payOrderCount: 0, // 支付订单数
    chargebackCount: 0, // 退单数
    refund: 0, // 实际退款金额
    payActualList: [] // 收入金额列表
  },
  shopFlowInfo: {}
})

const getArrowImg = (todayData, yesterdayData) => {
  const minus = todayData - yesterdayData
  if (minus > 0) {
    return new URL('../../../assets/home/ic-arrow-narrow-up.png', import.meta.url).href
  } else if (minus === 0) {
    return new URL('../../../assets/home/ic-arrow-normal.png', import.meta.url).href
  } else {
    return new URL('../../../assets/home/ic-arrow-narrow-down.png', import.meta.url).href
  }
}

// 新老访客占比数组
const newCustomersPercentage = ref(0.5)
// 今日售出商品数量
const todayProdSoldCount = ref(0)
// 昨日售出商品数量
const yesterdayProdSoldCount = ref(0)

// 获取实时数据
const getRealTimeInfo = () => {
  orderStatisticsApi.getToDayByHour().then(resultVO => {
    if (resultVO) {
      data.toDayInfo = resultVO
      if (data.toDayInfo.todayProdSoldCountList.length) {
        todayProdSoldCount.value = data.toDayInfo.todayProdSoldCountList.reduce((previous, current) => previous + current)
      }
      if (data.toDayInfo.todayProdSoldCountList.length) {
        yesterdayProdSoldCount.value = data.toDayInfo.yesterdayProdSoldCountList.reduce((previous, current) => previous + current)
      }
    }
    // 获取近15日交易图表
    getRefundAmountDataChart()
  })
}
// 获取实时数据图表
const getRealTimeDataChart = () => {
  return {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);',
      formatter: (params) => {
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${param.seriesIndex === 0 ? date + $t('dashboard.paymentPiecesNumber') : ''}</span>
              <br />
                <div style="margin-top:${param.seriesIndex === 0 ? '12px' : '0'};display: flex;align-items: center;">
                <i style="display: inline-block;width: 6px;height: 6px;background-color: ${param.seriesIndex === 0 ? '#0058FF' : '#21D59B'};margin-right: 9px;border-radius: 50%;"></i>
                <span style=" display:inline-block;">${param.seriesName}：${param.value}</span>
              </div>`
        }
        return html
      }
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      symbol: 'none',
      data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00',
        '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('dashboard.today'),
        symbol: 'none',
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: '#155bd4'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(0, 88, 255, 0.2)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        },
        data: data.toDayInfo.todayProdSoldCountList
      },
      {
        name: $t('date.y'),
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: '#21D59B'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(41, 203, 151, 0.2)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        },
        data: data.toDayInfo.yesterdayProdSoldCountList
      }
    ]
  }
}
// 获取近15日交易图表
const getRefundAmountDataChart = () => {
  return {
    color: ['red'],
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);width:180px;height:62px',
      formatter: function (params) {
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${date}</span>
              <br />
              <div style="margin-top: 12px;display: flex;align-items: center;">
                <i style="display: inline-block;width: 6px;height: 6px;background-color: #0058FF;margin-right: 9px;border-radius: 50%;"></i>
                <span style=" display:inline-block;">${param.seriesName}：${param.data}</span>
              </div>`
        }
        return html
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 20,
      right: 20,
      width: '95%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        showMaxLabel: true
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: data.toDayInfo.dateToStringList
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('dashboard.transactionAmount'),
        type: 'bar',
        itemStyle: {
          color: '#e8f0ff',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#2A4AFF'
          }
        },
        barWidth: 20,
        data: data.toDayInfo.payActualList
      }
    ]
  }
}

// 平台公告
const platformNotify = ref([])
const getPlatformNotify = () => {
  notifyApi.page({ pageNum: 1, pageSize: 6 }).then(pageVO => {
    platformNotify.value = pageVO.list
    announcementList.value = pageVO.list.filter(item => item.isTop)
  })
}

// 消息通知
const notifyList = ref([])
const getNotifyList = () => {
  notifyApi.unreadPage({ pageNum: 1, pageSize: 6 }).then(pageVO => {
    notifyList.value = pageVO.list
  })
}

const prodRankForFlowTotal = ref([])
// 新老用户数据是否请求到
const twoGetPark = ref(false)
// 近10日新老访客占比和商品访问流量排行榜

const getShopFlowInfo = () => {
  const params = {
    dayCount: 30,
    limit: 5
  }
  orderStatisticsApi.getShopProductFlowInfo(params).then(resultVO => {
    data.shopFlowInfo = resultVO
    prodRankForFlowTotal.value = resultVO.prodRanking || []
    data.shopFlowInfo.visitCount = data.shopFlowInfo.visitCount || 0
    data.shopFlowInfo.yesterdayVisitCount = data.shopFlowInfo.yesterdayVisitCount || 0
    if (!data.shopFlowInfo.visitUserCount) {
      newCustomersPercentage.value = new Big(0.5)
    } else {
      newCustomersPercentage.value = new Big(data.shopFlowInfo.newVisitUserCount).div(data.shopFlowInfo.visitUserCount)
    }
    twoGetPark.value = true
  })
}

const getNewOldProportion = () => {
  return {
    tooltip: {
      trigger: 'item'
    },
    color: ['#41D89E', '#2A4AFF'],
    series: [
      {
        center: ['40%', '38%'],
        type: 'pie',
        radius: ['48%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: data.shopFlowInfo.oldVisitUserCount, name: $t('dashboard.oldCustomers') },
          { value: data.shopFlowInfo.newVisitUserCount, name: $t('dashboard.newCustomers') }
        ]
      }
    ]
  }
}

// 获取商品销售数据排行榜
const prodRankForActualTotal = ref([])
const getProdRanking = () => {
  const data = {
    dayCount: 30,
    limit: 5
  }
  orderStatisticsApi.listProdRankingByPayActual(data).then(resultVO => {
    prodRankForActualTotal.value = resultVO
  })
}

// 常用功能跳转
const commonFun = (val) => {
  const pathObj = {
    path: '',
    query: {}
  }
  switch (val) {
    case 1:
      pathObj.path = '/product/list'
      break
    case 2:
      pathObj.path = '/order/order-manage/order'
      break
    case 3:
      pathObj.path = '/product/prod-info'
      break
    case 4:
      pathObj.path = '/product/price-manage/log'
      break
    case 5:
      pathObj.path = '/shop/supplier-refund-addr'
      break
    case 6:
      pathObj.path = '/order/delivery-manage/transport'
      break
    case 7:
      pathObj.path = '/shop/shop-information'
      pathObj.query.activeName = 4
      break
    case 8:
      pathObj.path = '/finance/supplier-walletLog'
      break
    default:
      break
  }
  checkRouter(pathObj)
}

const treeTolist = (list, name = '', newList = []) => {
  for (let i = 0; i < list.length; i++) {
    if (list[i].path[0] != '/') {
      newList.push(name + '/' + list[i].path)
    } else {
      newList.push(name + list[i].path)
    }
    if (list[i].children?.length > 0) {
      newList = newList.concat(treeTolist(list[i].children, list[i].path))
    }
  }
  return newList
}

const commonStore = useCommonStore()
const checkRouter = (pathObj) => {
  const pathArr = pathObj.path
  const routeList = commonStore.routeList
  const flag = treeTolist(routeList, '').includes(pathArr)
  if (!flag) {
    return ElMessage.error($t('dashboard.notPermissionAccess'))
  }
  router.push(pathObj)
}

onMounted(async () => {
  getShopStatusInfo()
  getOrderCountOfStatus()
  getStockWarning()
  getRealTimeInfo()
  getPlatformNotify()
  getNewNotice()
  getNotifyList()
  getShopFlowInfo()
  getProdRanking()

  dayStr.value = parseTime(Date.now(), '{y}-{m}-{d}')
  await nextTick(() => {
    onGetBasicInfo()
  })
})

/**
 * 跳转到订单列表页
 * @param {Number} orderStatus 1-待付款 2-待发货 3-待收货 5-已完成
 */
const toOrderPage = (orderStatus) => {
  const pathObj = {
    path: '/order/order-manage/order',
    query: {
      orderStatus
    }
  }
  checkRouter(pathObj)
}

/**
 * 跳转到退款/售后页
 */
const toRefundOrderPage = () => {
  const pathObj = {
    path: '/order/order-manage/refund-order',
    query: {
      sts: 1
    }
  }
  checkRouter(pathObj)
}

const toProductPage = (spuStatus) => {
  const pathObj = {
    path: '/product/list',
    query: { spuStatus }
  }
  checkRouter(pathObj)
}

const toStockPage = () => {
  const pathObj = {
    path: '/product/list',
    query: {
      stockWarning: 1
    }
  }
  checkRouter(pathObj)
}

const toManager = () => {
  const pathObj = {
    path: '/setting/message-manager/notify-manager',
    query: {
      sts: 1
    }
  }
  checkRouter(pathObj)
}
const notifyView = (row) => {
  const routeList = commonStore.routeList
  const pathObj = {
    path: '',
    query: {}
  }
  if (row.sendType === 1006 || row.sendType === 1007) {
    pathObj.path = '/product/list'
  }
  if (row.sendType === 1002 || row.sendType === 1005) {
    pathObj.path = '/order/order-manage/order'
    pathObj.query.orderStatus = row.sendType === 1002 ? 5 : 2
  }
  if (row.sendType === 1003 || row.sendType === 1111 || row.sendType === 1004) {
    pathObj.path = '/order/order-manage/refund-order'
    pathObj.query.sts = row.sendType === 1003 ? 1 : row.sendType === 1111 ? 4 : 5
  }
  const pathArr = pathObj.path.split('/')
  const flag = routeList.some(item => {
    if (item.children) {
      return item.children.some(el => {
        if (pathArr.length === 4) {
          if (el.path === '/' + pathArr[1] + '/' + pathArr[2] && el.children) {
            return el.children.some(element => {
              return element.path === pathArr[3]
            })
          } else {
            if (el.path === '/' + pathArr[1] && el.children) {
              return el.children.some(element => {
                return element.path === pathArr[2] + '/' + pathArr[3]
              })
            }
          }
        }
        if (el.path === '/' + pathArr[1] && el.children) {
          return el.children.some(element => {
            return element.path === pathArr[2]
          })
        } else {
          return item.path === '/' + pathArr[1] && el.path === pathArr[2]
        }
      })
    } else {
      return false
    }
  })
  if (!flag) {
    return ElMessage.error($t('dashboard.notPermissionAccess'))
  }
  if (row.status === 0) {
    const obj = {
      logIds: row.logId,
      type: 0
    }
    notifyApi.isRead(obj).then(() => {
      router.push(pathObj)
    })
  } else {
    router.push(pathObj)
  }
}

// 原来的filter
const conversionActual = (val) => {
  // 精度运算-除法
  if (val == null) {
    return ''
  }
  return new Big(val).times(100).toFixed(2).valueOf()
}
const bigMultiplier = (val) => {
  // 精度运算-乘法
  if (val == null) {
    return ''
  }
  return new Big(val).times(100).valueOf()
}
const twoActual = (val) => {
  // 保留两位小数
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).toFixed(2).valueOf()
}
const overActual = (val) => {
  if (val == null) {
    return ''
  }
  return new Big(1).minus(val).times(100).toFixed(2).valueOf()
}
const defaultCount = (val) => {
  if (val === undefined) {
    return ''
  } else if (!val) {
    return 0
  } else {
    return val
  }
}
const toNotify = () => {
  const pathObj = {
    path: '/setting/message-manager/platform-notice',
    query: {
      sts: 1
    }
  }
  checkRouter(pathObj)
}

// 公告列表
const announcementList = ref([])
const announcementTime = ref(null)

// 获取最新公告
const getNewNotice = () => {
  if (announcementList.value.length) announcementTime.value = setInterval(showMarquee, 3000)
}
const animate = ref(false)
// 公告的滚动效果
const showMarquee = () => {
  animate.value = true
  setTimeout(() => {
    announcementList.value.push(announcementList.value[0])
    announcementList.value.shift()
    animate.value = false
  }, 1000)
}

const viewDialog = ref(false)
const announcementData = reactive({
  // 公告详情
  announcementDetail: {}
})
// 查看公告
const toNoticeDetail = (id) => {
  viewDialog.value = true
  nextTick(() => {
    if (id) {
      api.get(id).then(data => {
        data.content = data.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'")
        announcementData.announcementDetail = data
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 800px;
  background: #f9f9f9;
  padding-right: 20px;
  // 1.店铺信息未完善提示
  .shop-inf-imperfect-tips {
    width: 100%;
    line-height: 32px;
    font-size: 14px;
    color: #666666;
    background: #FFF7DD;
    border: 1px solid #FFD888;
    border-radius: 2px;
    padding: 5px 10px;
    margin-bottom: 10px;
  }
  .order-data-right {
    width: 20%;
    display: flex;
    flex-direction: column;
    .data-item-box {
      flex: 1;
      background: #FFFFFF;
      margin-bottom: 20px;
      padding: 20px;
      position: relative;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .left-title {
          font-weight: bold;
          font-size: 18px;
        }
        .right-title {
          color: #B3B3B3;
          font-size: 12px;
          cursor: pointer;
        }
      }
      .content {
        font-size: 14px;
        padding: 9px 0;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:last-child {
          padding-bottom: 0;
        }
      }
      .notify-view {
        cursor: pointer;
        &:hover {
          color: #155bd4;
        }
      }
      .no-data {
        position: absolute;
        color: #999999;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
  // 3.订单数量
  .order-all-num {
    display: flex;
    width: 100%;
    height: 164px;
    border-radius: 2px;
    margin-bottom: 20px;
    flex-direction: column;
    padding: 20px;
    .top {
      font-size: 18px;
      font-weight: bold;
    }
    .right {
      display: flex;
      margin-top: 24px;
      .order-num-item {
        display: flex;
        align-items: center;
        flex: 1;
        height: 100%;
        margin-right: 20px;
        cursor: pointer;
        padding: 10px;
        .item-box {
          margin-left: 10px;
          .number {
            font-size: 24px;
            color: #333333;
            font-weight: bold;
          }
          .words {
            font-size: 14px;
            color: #999999;
          }
        }
      }
      .order-num-item:hover {
        background: #F5F6F9;
      }
    }

  }
  // 4、5实时数据情况和当月数据情况
  .data-survey-box {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    .data-item-box {
      flex: 1;
      height: 385px;
      padding: 20px;
      background: #FFFFFF;
      .title {
        font-size: 14px;
        color: #333333;
        border-radius: 1px;
        .bold-words {
          font-weight: bold;
          font-size: 18px;
        }
        .update-time {
          font-size: 12px;
          color: #999999;
          margin-left: 10px;
        }
        .data-center {
          float: right;
          font-size: 12px;
          color: #999999;
          margin-left: 24px;
          &::before {
            display: inline-block;
            content: '';
            width: 16px;
            height: 4px;
            margin: 0 8px 2px 0;
          }
        }
        .today-data::before {
          background: #155bd4;
        }
        .yesterday-data::before {
          background: #21D59B;
        }
      }
      .data-mid {
        margin: 35px 0 0 20px;
        .paid-goods {
          font-size: 14px;
          color: #666666;
        }
        .paid-goods-num {
          font-size: 26px;
          font-weight: bold;
          margin: 0 24px 0 8px;
        }
        .yesterday {
          font-size: 14px;
          color: #666666;
        }
      }
      .all-number {
        margin-top: 44px;
        .line {
          display: flex;
          align-items: center;
          height: 117px;
          margin-top: 20px;
          .item-box {
            flex: 1;
            align-items: center;
            padding: 0 0 0 20px;
            .number {
              font-size: 26px;
              font-weight: bold;
              color: #333333;
              margin: 8px 0;
            }
            .words {
              font-size: 12px;
              color: #999999;
            }
          }
        }
      }
    }
    .data-all-box {
      height: 191px;
      .data-item {
        display: flex;
        justify-content: space-between;
        margin: 24px 0;
        .item {
          width: 94px;
          height: 103px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          &:hover {
            background: #F5F6F9;
          }
          img {
            width: 48px;
            margin: 13px 23px;
          }
          .text {
            font-size: 14px;
            text-align: center;
          }
        }
      }
    }
    .data-survey {
      margin-right: 20px;
    }
  }
  // 6.退款概况
  .refund-survey {
    width: 100%;
    height: 386px;
    margin-bottom: 20px;
    display: flex;
    .one {
      flex: 3;
      background: #FFFFFF;
      padding: 20px;
      margin-right: 20px;
    }
    .two {
      flex: 1;
      background: #FFFFFF;
      position: relative;
      padding: 20px;
      .data-box {
        font-size: 12px;
        color: #999999;
        display: flex;
        margin-right: 80px;
        justify-content: flex-end;
        .data {
          margin-top: 16px;
          &::before {
            display: inline-block;
            content: '';
            width: 12px;
            height: 12px;
            margin: 0 8px -1px 0;
            border-radius: 2px;
            background: #2A4AFF;
          }
        }
        .green {
          margin-top: 16px;
          &::before {
            background:#41D89E
          }
        }
      }

      .no-data {
        position: absolute;
        color: #999999;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
    .title {
      font-size: 14px;
      color: #333333;
      border-radius: 1px;
      .bold-words {
        font-weight: bold;
        font-size: 18px;
      }
      .update-time {
        font-size: 12px;
        color: #999999;
        margin-left: 10px;
      }
      .data-center {
        float: right;
        font-size: 12px;
        color: #999999;
        &::before {
          display: inline-block;
          content: '';
          width: 12px;
          height: 12px;
          margin: 0 8px -1px 0;
          border-radius: 2px;
          background: #2A4AFF;
        }
      }
    }
  }
  // 7.退款排行
  .refund-ranking {
    margin: 0;
    .return-ranking-box {
      height: auto;
      margin-right: 20px;
      .ranking-content {
        .table {
          width: 100%;
          border-collapse: collapse;
          border: 1px solid #EAF0F4;
          margin-top: 15px;
          tr {
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
          .table-tit {
            height: 33px;
            line-height: 33px;
            font-size: 12px;
            color: #333333;
            background: #f7f7f7;
          }
          .table-item {
            height: 60px;
            line-height: 60px;
            &:last-child {
              border: none;
            }
          }
          .rank {
            width: 15%;
          }
          .rank-name-box {
            display: flex;
            .rank-name {
              display: inline-block;
              max-width: 200px;
              font-size: 12px;
              color: #333333;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            img {
              margin: 9px 10px 0 20px;
              width: 42px;
              height: 42px;
            }
          }
          .rank-amount {
            font-size: 12px;
            color: #333333;
          }
          .ref {
            width: 35%;
          }
        }
      }
      &:last-child {
        margin: 0;
      }
    }
    .return-reason-ranking {
      height: auto;
    }
  }
  .white-bg {
    background: #FFFFFF;
  }
  .table-no-data {
    width: 100%;
    color: #909399;
    line-height: 60px;
    text-align: center;
    font-size: 13px;
  }

  // 2.平台公告
  .platform-notice {
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #666666;
    border: 1px solid #EEEEEE;
    border-radius: 2px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .platform-notice-box {
      width: 100%;
      position: relative;
      height: 30px;
      overflow: hidden;
      margin-left: 5px;
    }

    .platform-notice-list {
      display: block;
      position: absolute;
      top: 0;
      left: 0;

      .text {
        margin: 0;
        height: 30px;
        line-height: 30px;
      }
    }

    .see-notice {
      cursor: pointer;
    }

    .see-more-notice {
      margin-left: 5px;
      color: #155bd4;
      cursor: pointer;
    }
  }
}
.reads-dot {
  color: #999;
}
.unread-point {
  color: #155bd4;
}
</style>
