<script setup>
import { useUniApi } from 'hooks/use-uni-api'
import AppGroupItem from './components/AppGroupItem.vue'
import {
  usualList,
  taskList,
  realtimeList,
  historyList,
  otherList
} from './constants'
import { getCompleteStatisticsApi } from '@/api/elevator'
import { useUserStore } from '@/store/user'
const { navigateTo } = useUniApi()

// 概览数据
const workData = ref([
  {
    name: '未完成工作',
    start: 0,
    number: 0,
    stateType: 0,
    stateList: '1'
  },
  {
    name: '已完成工作',
    start: 0,
    number: 0,
    stateType: 1,
    stateList: '4,7'
  }
])

const usualApps = ref(usualList)
const taskApps = ref(taskList)
const realtimeApps = ref(realtimeList)
const historyApps = ref(historyList)
const otherApps = ref(otherList)

// 创建对子组件的引用
const uToastRef = ref(null)

const countHandler = (index) => {
  const { roles } = storeToRefs(useUserStore())
  if (roles.value.includes('maintenance')) {
    const { stateList, stateType } = workData.value[index]
    navigateTo(
      `/pages/views/elevator-maintenance/state-record?stateList=${stateList}&stateType=${stateType}`
    )
  }
}
const itemHandler = ({ path }) => {
  navigateTo(path)
}

const getCompleteStatistics = async () => {
  const { data } = await getCompleteStatisticsApi({})
  const [item1, item2] = data
  const start1 = item1.total - 20
  const start2 = item2.total - 20
  workData.value[0].start = start1 < 0 ? 0 : start1
  workData.value[0].number = item1.total
  workData.value[1].start = start2 < 0 ? 0 : start2
  workData.value[1].number = item2.total
}

onMounted(() => {
  getCompleteStatistics()
})
</script>

<template>
  <view>
    <view class="top-number" mt-20 px-40>
      <up-grid :col="2" @click="countHandler">
        <up-grid-item v-for="(item, index) in workData" :key="index">
          <view h-130 f-c-c flex-col>
            <up-count-to
              :start-val="item.start"
              :end-val="item.number"
              :color="`${'#FFFFFF'}`"
            />
            <text text-28 font-400 text-white mt-8>{{ item.name }}</text>
          </view>
        </up-grid-item>
      </up-grid>
    </view>

    <!-- 常用应用 -->
    <AppGroupItem
      title="常用应用"
      :apps="usualApps"
      @itemHandler="itemHandler"
    />

    <!-- 任务 -->
    <AppGroupItem title="任务" :apps="taskApps" @itemHandler="itemHandler" />

    <!-- 实时 -->
    <AppGroupItem
      title="实时"
      :apps="realtimeApps"
      @itemHandler="itemHandler"
    />

    <!-- 历史 -->
    <AppGroupItem title="历史" :apps="historyApps" @itemHandler="itemHandler" />

    <!-- 其他 -->
    <AppGroupItem title="其他" :apps="otherApps" @itemHandler="itemHandler" />

    <up-toast ref="uToastRef" />
  </view>
</template>

<style lang="scss">
.top-number {
  .u-grid {
    border-radius: 20rpx;
    background-color: #1296db;
    padding: 20rpx 0;
  }
  .u-grid-item {
    border-right: 1px solid #dbfbdb;
    &:last-child {
      border-right: none;
    }
  }
  .u-grid-item--hover-class {
    opacity: 1 !important;
  }
}
</style>
