<template>
  <view>
    <view>
      <StoreDropDown></StoreDropDown>
    </view>

    <view class="bg-primary p-base text-center text-white relative">
      <view class="absolute top-20rpx right-20rpx">
        <uv-icon color="#fff" size="48rpx" name="chat"></uv-icon>
      </view>
      <view class="mt-60rpx">昨日累计金额</view>
      <view class="mt-20rpx">截止{{ yesterday }}</view>
      <view class="flex items-center mt-40rpx">
        <view class="flex-1 text-center">
          <view>销售</view>
          <view>{{ yesday_ledger.sales }}</view>
        </view>
        <view class="h-80rpx flex-none flex-center">
          <uv-line direction="vertical"></uv-line>
        </view>
        <view class="flex-1 text-center">
          <view>支出</view>
          <view>{{ yesday_ledger.expenditure }}</view>
        </view>
      </view>
    </view>
    <view>
      <view class="h-80rpx leading-80rpx px-base">近30天趋势数据</view>
    </view>
    <view>
      <uv-tabs
        :activeStyle="{ color: '#ee2c37' }"
        lineColor="#ee2c37"
        :list="list"
        :current="tabIndex"
        @click="onTabClick"
        :scrollable="false"
      ></uv-tabs>

      <ChartComp :data="countData"></ChartComp>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import ChartComp from './components/chart.vue'
import StoreDropDown from '@/pages/home/components/store-drop-down/index.vue'
import { http } from '@/utils/request'
import { onShow } from '@dcloudio/uni-app'
import { timeFormat } from '@climblee/uv-ui/libs/function'
const list = ref([
  {
    name: '销售金额',
    key: 'sales',
  },
  {
    name: '支出金额',
    key: 'expenditure',
  },
])
const tabIndex = ref(0)
const detail = ref({
  yesday_ledger: {
    sales: 0,
    expenditure: 0,
  },
})
const yesday_ledger = computed(() => detail.value.yesday_ledger)
const trends_of_30days = computed(() => detail.value.trends_of_30days)

const yesterday = computed(() => {
  return timeFormat(Number(new Date()) - 1000 * 60 * 60 * 24)
})
const tabObj = computed(() => list.value[tabIndex.value])
const countData = computed(() => {
  const arr =
    trends_of_30days?.value?.reduce((p, c) => {
      p.push({
        key: timeFormat(c.date, 'mm月dd日'),
        value: c[tabObj.value.key],
      })
      return p
    }, []) ?? []
  return arr
})

const onTabClick = (e) => {
  console.log(e)
  tabIndex.value = e.index
}

onShow(() => {
  getData()
})

const getData = () => {
  http
    .get('/statistics/dashboard', {
      params: {
        date: yesterday.value,
      },
    })
    .then((res) => {
      detail.value = res
    })
}
</script>
