<!--
 * @Author: hcc han_chen301@163.com
 * @Date: 2025-05-24 09:56:53
 * @LastEditors: hcc
 * @LastEditTime: 2025-06-06 10:24:17
 * @remarker: 
-->
<script setup lang="ts">
import type { AnalysisTaskStatisticsItem } from '@vben/common-ui';

import { reactive, watchEffect } from 'vue';
import { useRouter } from 'vue-router';

import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDclIcon,
  SvgDownloadIcon,
  SvgDshIcon,
  SvgDycsIcon,
  SvgFkdIcon,
  SvgJjrwIcon,
  SvgJznlIcon,
  SvgPjhsIcon,
  SvgPtrwIcon,
  SvgWfqdIcon,
  SvgXzdIcon,
  SvgZlrwIcon,
} from '@vben/icons';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VbenCountToAnimator,
  VbenIcon,
} from '@vben-core/shadcn-ui';

const props = defineProps({
  overviewItems: {
    type: Object,
    default: () => ({}),
  },
});
/* withDefaults(defineProps<Props>(), {
  items: () => [],
}); */
const datas = reactive({
  overviewItems: [
    {
      icon: SvgCardIcon,
      title: '我的任务',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgWfqdIcon,
          title: '我发起的',
          value: 0,
        },
        {
          icon: SvgDshIcon,
          title: props.overviewItems?.leader === 1 ? '待我审批' : '待审批',
          value: 0,
        },
        {
          icon: SvgDclIcon,
          title: '待我办理',
          value: 0,
        },
      ],
    },
    {
      icon: SvgCakeIcon,
      title: '任务统计',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgPtrwIcon,
          title: '普通任务',
          value: 0,
        },
        {
          icon: SvgJjrwIcon,
          title: '指令任务',
          value: 0,
        },
        {
          icon: SvgZlrwIcon,
          title: '线索核查',
          value: 0,
        },
      ],
    },
    {
      icon: SvgDownloadIcon,
      title: '任务处理',
      totalTitle: '任务处理量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgXzdIcon,
          title: '协作单',
          value: 0,
        },
        {
          icon: SvgFkdIcon,
          title: '反馈单',
          value: 0,
        },
        {
          icon: SvgPjhsIcon,
          title: '平均耗时',
          value: 0,
        },
      ],
    },
    {
      icon: SvgBellIcon,
      title: '警种能力',
      totalTitle: '总使用量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgJznlIcon,
          title: '能力数',
          value: 0,
        },
        {
          icon: SvgDycsIcon,
          title: '调用次数',
          value: 0,
        },
      ],
    },
  ] as AnalysisTaskStatisticsItem[],
});
watchEffect(() => {
  // 会自动追踪 props.activeTab 的依赖
  datas.overviewItems = [
    {
      icon: SvgCardIcon,
      title: '我的任务',
      totalTitle: '总任务量',
      totalValue: Number(props.overviewItems?.rwzs) || 0,
      value: Number(props.overviewItems?.rwzs) || 0,
      children: [
        {
          icon: SvgWfqdIcon,
          title: '我发起的',
          value: 0,
        },
        {
          icon: SvgDshIcon,
          title: props.overviewItems?.leader === 1 ? '待我审批' : '待审批',
          value: Number(props.overviewItems?.dwsps) || 0,
        },
        {
          icon: SvgDclIcon,
          title: '待我办理',
          value: Number(props.overviewItems?.dwbls) || 0,
        },
      ],
    },
    {
      icon: SvgDownloadIcon,
      title: '任务处理',
      totalTitle: '任务处理量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgXzdIcon,
          title: '协作单',
          value: Number(props.overviewItems?.xzds) || 0,
        },
        {
          icon: SvgFkdIcon,
          title: '反馈单',
          value: Number(props.overviewItems?.fkds) || 0,
        },
        {
          icon: SvgPjhsIcon,
          title: '平均耗时',
          value: Number(props.overviewItems?.pjhs) || 0,
        },
      ],
    },
    {
      icon: SvgCakeIcon,
      title: '任务统计',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgPtrwIcon,
          title: '普通任务',
          value: Number(props.overviewItems?.ptrws) || 0,
        },
        {
          icon: SvgJjrwIcon,
          title: '指令任务',
          value: Number(props.overviewItems?.jjrws) || 0,
        },
        {
          icon: SvgZlrwIcon,
          title: '线索核查',
          value: Number(props.overviewItems?.zlrws) || 0,
        },
      ],
    },
    {
      icon: SvgBellIcon,
      title: '警种能力',
      totalTitle: '总使用量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: SvgJznlIcon,
          title: '能力数',
          value: 0,
        },
        {
          icon: SvgDycsIcon,
          title: '调用次数',
          value: 0,
        },
      ],
    },
  ];
});

const router = useRouter();

const goUrl = () => {
  // 跳转时传递参数
  router.push({
    path: '/data/statDept',
    query: {
      id: '123',
      name: 'vben',
    },
  });
};
</script>

<template>
  <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
    <template v-for="item in datas.overviewItems" :key="item.title">
      <Card :title="item.title" class="w-full">
        <CardHeader>
          <CardTitle class="text-xl">{{ item.title }}</CardTitle>
        </CardHeader>

        <CardContent v-for="i in item.children" :key="i.title">
          <div class="flex items-center justify-between">
            <span>
              <VbenIcon
                :icon="i.icon"
                class="size-8 flex-shrink-0"
                style="display: inline"
              />
              {{ i.title }}
            </span>
            <a v-if="i.value > 0" @click.prevent="goUrl">
              <span
                class="text-primary hover:underline"
                style="font-size: 20px"
              >
                {{ i.value }}
              </span>
            </a>
            <VbenCountToAnimator
              v-else
              :end-val="i.value"
              :start-val="0"
              class="text-xl"
              prefix=""
            />
          </div>
        </CardContent>

        <!-- <CardFooter class="justify-between">
          <span>
            <VbenIcon
              :icon="item.icon"
              class="size-8 flex-shrink-0"
              style="display: inline"
            />
            {{ item.totalTitle }}
          </span>
          <VbenCountToAnimator
            :end-val="item.totalValue"
            :start-val="1"
            prefix=""
          />
        </CardFooter> -->
      </Card>
    </template>
  </div>
</template>
