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

  https://www.mall4j.com/

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

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-overall-overview">
    <!-- 标题 -->
    <view class="title">
      {{ [$t('shangPinZhengTiGaiKuang'),$t('shangPinLiuLiang-1'),$t('shangPinZhuanHua-1')][tabIndex] }}
    </view>

    <!-- 选择时间 -->
    <view class="select-hang">
      <view
        class="select-item"
        @tap="openSelectDate(1)"
      >
        <view
          v-if="dateData.dateRange.length"
          class="left-time"
        >
          <text class="left">
            {{ dateData.dateRange[0] }}
          </text>
          <text v-if="dateData.dateRange.length>1">
            -
          </text>
          <text
            v-if="dateData.dateRange.length>1"
            class="right"
          >
            {{ dateData.dateRange[1] }}
          </text>
        </view>
        <view class="right-time">
          {{ dateData.label }}
          <uni-icons
            class="ml-auto"
            type="arrowright"
            color="#999999"
            size="24rpx"
          />
          <!-- <text style="font-size:28rpx">></text> -->
        </view>
      </view>
    </view>

    <!-- tab选项栏 -->
    <view class="tab">
      <view
        :class="['tabItem',tabIndex===0?'tabItem-active':'']"
        @tap="choiceTabindex(0)"
      >
        {{ $t('shangPinGaiKuang-1') }}
      </view>
      <view
        :class="['tabItem',tabIndex===1?'tabItem-active':'']"
        @tap="choiceTabindex(1)"
      >
        {{ $t('shangPinLiuLiang-1') }}
      </view>
      <view
        :class="['tabItem',tabIndex===2?'tabItem-active':'']"
        @tap="choiceTabindex(2)"
      >
        {{ $t('shangPinZhuanHua-1') }}
      </view>
    </view>

    <!-- 选中的时间显示 -->
    <view
      v-if="chocieTimeIndex"
      class="designation-time"
    >
      {{ chocieTime[chocieTimeIndex] }}
    </view>

    <!-- 选中tab展示的数据 -->
    <view class="tab-data-box">
      <view
        v-for="(item, index) in tabData[tabIndex]"
        :key="index"
        class="data-item"
      >
        <view class="name">
          <view class="left-name">
            <text class="name">
              {{ item.name }}
              <text class="number">
                {{ item.number }}
              </text>
            </text>
          </view>
          <view :class="['right-rercentage', item.rercentage > 0 ? '' : 'down-size']">
            <text v-if="item.rercentage > 0">
              +
            </text>{{ item.rercentage !== undefined ? ((item.rercentage * 100).toFixed(2) + '%') : $t('zanWuShuJu') }}
          </view>
        </view>
        <view class="progress-bar">
          <view
            v-if="item.rercentage<0||!item.rercentage"
            class="percent"
            :class="{'percent-background':false}"
            :style="{width:'0%'}"
          />
          <view
            v-else-if="item.rercentage<1"
            class="percent"
            :class="{'percent-background':false}"
            :style="{width:`${(item.rercentage*100).toFixed(2)}%`}"
          />
          <view
            v-else
            class="percent"
            :class="{'percent-bacmground':false}"
            :style="{width:'100%'}"
          />
        </view>
      </view>
    </view>

    <select-date
      v-if="showSelectDate"
      :value="dateData"
      @cancal="cancal"
      @handle-select-date="handleSelectDate"
    />
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

const showSelectDate = ref(false) // 时间组件的显隐
const tabIndex = ref(0) // 当前选中的tab栏下标

//  回显
const dateData = reactive({
  value: 1,
  dateRange: ['', ''],
  label: $t('jin_7Tian')
})

const chocieTime = ['', $t('jiaoQian_7Tian'), $t('jiaoQian_30Tian'), $t('jiaoQianYiRi'), $t('jiaoQianYiYue')]
const chocieTimeIndex = ref(null)
const tabData = reactive([
  [
    {
      title: $t('shangPinGaiKuang-1'),
      name: $t('xinZengShangPinShu'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinGaiKuang-1'),
      name: $t('beiFangWenShangPin'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinGaiKuang-1'),
      name: $t('dongXiaoShangPinShu'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ], // 商品概况
  [
    {
      title: $t('shangPinLiuLiang-1'),
      name: $t('fenXiangFangWenShu'),
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinLiuLiang-1'),
      name: $t('shangPinLiuLanLiang'),
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinLiuLiang-1'),
      name: $t('shangPinFangWenKeShu'),
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ], // 商品流量
  [
    {
      title: $t('shangPinZhuanHua-1'),
      name: $t('jiaGouJianShu'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinZhuanHua-1'),
      name: $t('xiaDanJianShu'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: $t('shangPinZhuanHua-1'),
      name: $t('zhiFuJianShu'),
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ] // 商品转化
]) // tab切换栏展示的数据

onMounted(() => {
  initDateData()
})

const initDateData = () => {
  const startDay = -7
  const endDay = -1
  const startTime = dayjs()
    .add(startDay, 'days')
    .startOf('days')
    .format('YYYY.MM.DD')
  // 结束时间
  const endTime = dayjs()
    .add(endDay, 'days')
    .endOf('days')
    .format('YYYY.MM.DD')
  dateData.dateRange = [startTime, endTime]
  getProdSurvey()
}

// 显示SelectDate
const openSelectDate = () => {
  showSelectDate.value = true
}
// SelectDate回调
const handleSelectDate = (data) => {
  dateData.dateRange = dateData.dateRange.map(element => {
    if (element.indexOf(' ') !== -1) {
      return element.substring(0, element.indexOf(' '))
    }
    return element
  })
  dateData.label = data.label
  chocieTimeIndex.value = data.value
  dateData.value = data.value
  dateData.dateRange = data.dateRange.map(element => {
    return element.split(' ')[0]
  })
  getProdSurvey()
  showSelectDate.value = false
}
const cancal = () => {
  showSelectDate.value = false
}

// 切换tab
const choiceTabindex = (index) => {
  tabIndex.value = index
}

/**
 * 请求商品整体概况
 */
const getProdSurvey = () => {
  if (dateData.value === 4) {
    dateData.dateRange[0] = dayjs(dateData.dateRange[0], 'YYYY-MM').startOf('day').format('YYYY.MM.DD')
    dateData.dateRange[1] = dayjs(dateData.dateRange[0], 'YYYY.MM.DD').endOf('month').format('YYYY-MM-DD')
  }
  // 请求参数
  const data = {
    dateType: dateData.value + 1,
    startTime: dayjs(dateData.dateRange[0], 'YYYY.MM.DD').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  }

  switch (dateData.value) {
    case 1:
      data.endTime = dayjs(dateData.dateRange[1], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 2:
      data.endTime = dayjs(dateData.dateRange[1], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 3:
      data.endTime = dayjs(dateData.dateRange[0], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 4:
      data.endTime = dayjs(dateData.dateRange[0], 'YYYY.MM.DD').endOf('month').format('YYYY-MM-DD HH:mm:ss')
      break
  }

  const params = {
    url: '/multishop/prodAnalysis/getProdSurvey',
    method: 'GET',
    data
  }
  http.request(params).then(({ data: res }) => {
    tabData[0][0].number = res.data.newProd
    tabData[0][0].rercentage = res.rate.newProdRate
    tabData[0][1].number = res.data.visitedProd
    tabData[0][1].rercentage = res.rate.visitedProdRate
    tabData[0][2].number = res.data.dynamicSale
    tabData[0][2].rercentage = res.rate.dynamicSaleRate
    tabData[1][0].number = res.data.shareVisit
    tabData[1][0].rercentage = res.rate.shareVisitRate
    tabData[1][1].number = res.data.browse
    tabData[1][1].rercentage = res.rate.browseRate
    tabData[1][2].number = res.data.visitor
    tabData[1][2].rercentage = res.rate.visitorRate
    tabData[2][0].number = res.data.addCart
    tabData[2][0].rercentage = res.rate.addCartRate
    tabData[2][1].number = res.data.orderNum
    tabData[2][1].rercentage = res.rate.orderNumRate
    tabData[2][2].number = res.data.payNum
    tabData[2][2].rercentage = res.rate.payNumRate
  })
}

</script>

<style lang="scss" scoped>
@use "./overall-overview.scss";
</style>
