<template>
  <view>
    <CuNavbar title="数据报表"></CuNavbar>
    <view>
      <uv-drop-down
        ref="dropDown"
        sign="dropDown_1"
        text-active-color="#3c9cff"
        :extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }"
        :extra-active-icon="{
          name: 'arrow-up-fill',
          color: '#3c9cff',
          size: '26rpx',
        }"
        :defaultValue="['all', 'all']"
        :custom-style="{ padding: '0 30rpx' }"
        @click="selectMenu"
      >
        <uv-drop-down-item
          name="area"
          type="2"
          :label="dropDownData.area.label"
          :value="dropDownData.area.value"
        >
        </uv-drop-down-item>
        <uv-drop-down-item
          name="store"
          type="2"
          :label="dropDownData.store.label"
          :value="dropDownData.store.value"
        >
        </uv-drop-down-item>
      </uv-drop-down>
    </view>
    <view class="card">
      <uv-tabs
        :lineColor="'#ee2c37'"
        :list="tabsList"
        :scrollable="false"
        :current="tabIndex"
        @change="tabChange"
      ></uv-tabs>

      <view class="text-center text-28rpx" v-if="tabIndex != 0"
        >{{ currentTabs.start }} 至 {{ currentTabs.end }}
      </view>
      <view class="text-center text-28rpx" v-else>{{ currentTabs.start }}</view>
      <view class="flex my-20rpx items-center">
        <view class="text-center flex-1">
          <view>销售金额</view>
          <view class="font-600">{{ ledger.sales }}</view>
        </view>
        <view class="h-60rpx">
          <uv-line direction="col"></uv-line>
        </view>
        <view class="text-center flex-1">
          <view>兑奖金额</view>
          <view class="font-600">{{ ledger.sales }}</view>
        </view>
        <view class="h-60rpx">
          <uv-line direction="col"></uv-line>
        </view>
        <view class="text-center flex-1">
          <view>销售涨幅</view>
          <view class="text-primary font-600"
            >{{ ledger.sales_growth_rate }}%</view
          >
        </view>
      </view>
      <uv-tabs
        @change="tabChange1"
        :lineColor="'#ee2c37'"
        :list="[{ name: '销售统计' }, { name: '门店统计' }]"
        :scrollable="false"
        :current="tabIndex1"
      ></uv-tabs>
      <template v-if="tabIndex1 == 0">
        <List0 :list="list"></List0>
      </template>
      <template v-if="tabIndex1 == 1">
        <List1 :list="list"></List1>
      </template>
    </view>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { computed, reactive, ref } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
import { onShow } from '@dcloudio/uni-app'
import { http } from '@/utils/request'
import List0 from './components/list0.vue'
import List1 from './components/list1.vue'
const tabIndex1 = ref(0)
const tabIndex = ref(0)
const tabsList = ref(generateTimeArray())
const list = ref([])
const currentTabs = computed(() => tabsList.value[tabIndex.value])

const dropDownData = reactive({
  area: {
    label: '全部区域',
    value: 'all',
    activeIndex: 0,
    color: '#333',
    activeColor: '#2878ff',
    child: [
      {
        label: '全部区域',
        value: 'all',
      },
      {
        label: '重庆',
        value: 'cq',
      },
      {
        label: '北京',
        value: 'bj',
      },
    ],
  },
  store: {
    label: '全部门店',
    value: 'all',
    activeIndex: 0,
    color: '#333',
    activeColor: '#2878ff',
    child: [
      {
        label: '全部门店',
        value: 'all',
      },
      {
        label: '门店1',
        value: 'new',
      },
      {
        label: '门店2',
        value: 'money',
      },
    ],
  },
})

const result = ref([])
const ledger = ref({
  expenditure: '0',
  sales: '0',
  sales_growth_rate: '0',
})

const activeName = ref('area')

onShow(() => {
  getCount()
  getList()
})

const getCount = async () => {
  const resData = await http.get('/statistics/ledger', {
    params: {
      start_at: currentTabs.value.start,
      end_at: currentTabs.value.end,
      before_start_at: currentTabs.value.start,
      before_end_at: currentTabs.value.end,
    },
  })
  ledger.value = resData
}

const selectMenu = (e) => {
  const { name, active, type } = e
  activeName.value = name
  const find = result.value.find((item) => item.name == activeName.value)
  if (find) {
    const findIndex = dropDownData[activeName.value].child.findIndex(
      (item) => item.label == find.label && item.value == find.value
    )
    dropDownData[activeName.value].activeIndex = findIndex
  } else {
    dropDownData[activeName.value].activeIndex = 0
  }
}

function generateTimeRange(name, start, end) {
  start = timeFormat(start, 'yyyy-mm-dd')
  end = timeFormat(end, 'yyyy-mm-dd')
  return { name, start, end }
}

function getStartOfWeek(date) {
  const dayOfWeek = date.getDay()
  const diff = date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 如果今天是周日，从上周一开始
  return new Date(date.setDate(diff))
}

function getStartOfMonth(date) {
  return new Date(date.getFullYear(), date.getMonth(), 1)
}

function generateTimeArray() {
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(today.getDate() - 1)

  const currentWeekStart = getStartOfWeek(today) // 获取本周第一天
  const currentWeekEnd = new Date(today)
  currentWeekEnd.setDate(currentWeekStart.getDate() + 6)

  const lastWeekStart = new Date(currentWeekStart)
  lastWeekStart.setDate(currentWeekStart.getDate() - 7)
  const lastWeekEnd = new Date(currentWeekEnd)
  lastWeekEnd.setDate(currentWeekEnd.getDate() - 7)

  const currentMonthStart = getStartOfMonth(today) // 获取本月第一天
  const currentMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0)

  const lastMonthStart = new Date(currentMonthStart)
  lastMonthStart.setMonth(lastMonthStart.getMonth() - 1)
  const lastMonthEnd = new Date(currentMonthEnd)
  lastMonthEnd.setMonth(lastMonthEnd.getMonth() - 1)

  return [
    generateTimeRange('昨日', yesterday, yesterday),
    generateTimeRange('本周', currentWeekStart, currentWeekEnd),
    generateTimeRange('上周', lastWeekStart, lastWeekEnd),
    generateTimeRange('本月', currentMonthStart, currentMonthEnd),
    generateTimeRange('上月', lastMonthStart, lastMonthEnd),
  ]
}

const tabChange = (e) => {
  list.value = []
  tabIndex.value = e.index
  getCount()
  getList()
}

const tabChange1 = (e) => {
  list.value = []
  tabIndex1.value = e.index
  getList()
}

const getList = async () => {
  const url = tabIndex1.value == 0 ? '/statistics/sales' : '/statistics/stores'
  const resData = await http.get(url, {
    params: {
      start_at: currentTabs.value.start,
      end_at: currentTabs.value.end,
    },
  })
  list.value = resData
}
</script>
