<template>
  <view>
    <!-- <view class="z-9999 relative">
      <uv-no-network @connected="onConnected"></uv-no-network>
    </view> -->
    <CuNavbar :isBack="false" title="首页">
      <template #center>
        <view class="w-full" v-if="checkPermission(['admin'])">
          <StoreDown @change="storeChange"></StoreDown>
        </view>
      </template>
    </CuNavbar>
    <view class="bg-primary p-base text-center text-white relative">
      <view
        class="absolute top-20rpx right-20rpx z-888"
        @click="goPath('/pages/message/index')"
      >
        <cu-badge
          :value="unread_notifications"
          color="#fff"
          bgColor="transparent"
        >
          <uv-icon color="#fff" size="48rpx" name="chat"></uv-icon>
        </cu-badge>
      </view>

      <swiper class="h-300rpx">
        <swiper-item>
          <view class="mt-60rpx">昨日累计金额</view>
          <view class="mt-20rpx">截止{{ yesday_ledger.date }}</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 v-if="isLotteryStore">兑奖</view>
              <view v-else>支出</view>
              <view>{{ yesday_ledger.expenditure }}</view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="mt-60rpx">本月累计金额</view>
          <view class="mt-20rpx">截止{{ current_month_ledger.deadline }}</view>
          <view class="flex items-center mt-40rpx">
            <view class="flex-1 text-center">
              <view>销售</view>
              <view>{{ current_month_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 v-if="isLotteryStore">兑奖</view>
              <view v-else>支出</view>
              <view>{{ current_month_ledger.expenditure }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </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> -->
      <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import ChartComp from './components/chart.vue'
import CuNavbar from '@/components/cu-navbar/index'
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'
import StoreDown from './components/store-down.vue'
import { useUserStore } from '@/store/modules/user'
import cuBadge from '@/components/cu-badge/index.vue'
import checkPermission from '@/utils/permission'
import checkUpdate from '@/pages/upgrade/check-update'
// #ifdef APP-PLUS
checkUpdate()
// #endif

const onConnected = () => {
  getData()
  userStore.fetchUserInfo()
}

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLotteryStore = computed(
  () => (userStore.userInfo?.store?.is_lottery_store || checkPermission(['admin']))
)
const unread_notifications = computed(
  () => userInfo.value.unread_notifications || 0
)
const opts = {
  color: ['#ee2c37'],
  dataLabel: false,
  dataPointShape: true,
  enableScroll: false,
  legend: {
    show: false,
  },

  xAxis: {
    boundaryGap: 'justify',
    format: 'ssss',
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: 'hollow',
    },
    tooltip: {
      legendShow: false,
    },
  },
}

// const list = ref([
//   {
//     name: '销售金额',
//     key: 'sales',
//   },
//   {
//     name: '支出金额',
//     key: 'expenditure',
//   },
// ])

const list = computed(() => {
  return [
    {
      name: '销售金额',
      key: 'sales',
    },
    {
      name: isLotteryStore.value ? '兑奖金额' : '支出金额',
      key: 'expenditure',
    },
  ]
})

const tabIndex = ref(0)
const detail = ref({
  yesday_ledger: {},
  current_month_ledger: {},
})
const chartData = ref({})
const yesday_ledger = computed(() => detail.value.yesday_ledger || {})
const current_month_ledger = computed(
  () => detail.value.current_month_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 storeChange = (e) => {
  getData(e)
}

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

const updateData = () => {
  const arr =
    trends_of_30days?.value?.reduce((p, c) => {
      p.push({
        key: timeFormat(c.date, 'mm月dd日'),
        value: c[tabObj.value.key],
      })
      return p
    }, []) ?? []
  chartData.value = {
    categories: arr.map((el) => el.key),
    series: [
      {
        name: '金额',
        data: arr.map((el) => el.value),
      },
    ],
  }
  // countData.value = arr
}

onShow(() => {
  getData()
  userStore.fetchUserInfo()
})

const getData = (e = {}) => {
  if (!checkPermission(['admin'])) {
    e.store_id = userStore?.userInfo?.store?.id
  }
  http
    .get('/statistics/dashboard', {
      params: {
        date: yesterday.value,
        ...e,
      },
    })
    .then((res) => {
      detail.value = res
      updateData()
    })
}

const goPath = (url) => {
  uni.navigateTo({ url })
}
</script>
