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

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

import {
  SvgBlzIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDclIcon,
  SvgDownloadIcon,
  SvgDshIcon,
  SvgDycsIcon,
  SvgFkdIcon,
  SvgJjrwIcon,
  SvgMgrwIcon,
  SvgPjhsIcon,
  SvgPtrwIcon,
  SvgQzrwIcon,
  SvgTsrwIcon,
  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: markRaw(SvgCardIcon),
      title: '我的任务',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: markRaw(SvgWfqdIcon),
          title: '我发起的',
          value: 0,
          key: 'wfqdrw',
        },
        {
          icon: markRaw(SvgDshIcon),
          title: props.overviewItems?.leader === 1 ? '待我审批' : '待审批',
          value: 0,
          key: props.overviewItems?.leader === 1 ? 'dwsprw' : 'dsprw',
        },
        {
          icon: markRaw(SvgDclIcon),
          title: props.overviewItems?.leader === 1 ? '待我办理' : '处理中',
          value: 0,
          key: props.overviewItems?.leader === 1 ? 'dwblrw' : 'clzrw',
        },
      ],
    },
    {
      icon: markRaw(SvgDownloadIcon),
      title: '任务处理',
      totalTitle: '任务处理量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: markRaw(SvgXzdIcon),
          title: '协作单',
          value: 0,
          key: 'xzd',
        },
        {
          icon: markRaw(SvgFkdIcon),
          title: '反馈单',
          value: 0,
          key: 'fkd',
        },
        {
          icon: markRaw(SvgPjhsIcon),
          title: '平均耗时',
          value: 0,
          key: 'pjhs',
        },
      ],
    },
  ] as AnalysisTaskStatisticsItem[],
  overviewItems2: [
    {
      icon: markRaw(SvgCakeIcon),
      title: '任务统计',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: markRaw(SvgPtrwIcon),
          title: '普通任务',
          value: 0,
          key: 'ptrw',
        },
        {
          icon: markRaw(SvgJjrwIcon),
          title: '指令任务',
          value: 0,
          key: 'jjrw',
        },
        {
          icon: markRaw(SvgMgrwIcon),
          title: '敏感任务',
          value: 0,
          key: 'mgrw',
        },
        {
          icon: markRaw(SvgQzrwIcon),
          title: '情指任务',
          value: 0,
          key: 'qzrw',
        },
        {
          icon: markRaw(SvgDycsIcon),
          title: '线索核查',
          value: 0,
          key: 'zlrw',
        },
        {
          icon: markRaw(SvgTsrwIcon),
          title: '特殊任务',
          value: 0,
          key: 'tsrw',
        },
      ],
    },
  ] as AnalysisTaskStatisticsItem[],
});
function formatSeconds(totalSeconds: number): string {
  if (totalSeconds === 0) {
    return '';
  }

  const days = Math.floor(totalSeconds / (24 * 3600));
  totalSeconds %= 24 * 3600;
  const hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  const minutes = Math.floor(totalSeconds / 60);

  const result = [];

  if (days > 0) {
    result.push(`${days}天`);
  }
  if (hours > 0) {
    result.push(`${hours}时`);
  }
  if (minutes > 0) {
    result.push(`${minutes}分`);
  }

  return result.join(' ');
}

watchEffect(() => {
  // 会自动追踪 props.activeTab 的依赖
  datas.overviewItems = [
    {
      icon: markRaw(SvgCardIcon),
      title: '我的任务',
      totalTitle: '总任务量',
      totalValue: Number(props.overviewItems?.rwzs) || 0,
      value: Number(props.overviewItems?.rwzs) || 0,
      children: [
        {
          icon: markRaw(SvgWfqdIcon),
          title: '我发起的',
          value: Number(props.overviewItems?.wfqdrws),
          key: 'wfqdrw',
        },
        {
          icon: markRaw(SvgDshIcon),
          title: props.overviewItems?.leader === 1 ? '待我审批' : '待审批',
          value: Number(props.overviewItems?.dwsps) || 0,
          key: props.overviewItems?.leader === 1 ? 'dwsprw' : 'dsprw',
        },
        {
          icon:
            props.overviewItems?.leader === 1
              ? markRaw(SvgDclIcon)
              : markRaw(SvgBlzIcon),
          title: props.overviewItems?.leader === 1 ? '待我办理' : '处理中',
          value: Number(props.overviewItems?.dwbls) || 0,
          key: props.overviewItems?.leader === 1 ? 'dwblrw' : 'clzrw',
        },
      ],
    },
    {
      icon: markRaw(SvgDownloadIcon),
      title: '任务处理',
      totalTitle: '任务处理量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: markRaw(SvgXzdIcon),
          title: '协作单',
          value: Number(props.overviewItems?.xzds) || 0,
          key: 'xzd',
        },
        {
          icon: markRaw(SvgFkdIcon),
          title: '反馈单',
          value: Number(props.overviewItems?.fkds) || 0,
          key: 'fkd',
        },
        {
          icon: markRaw(SvgPjhsIcon),
          title: '平均耗时',
          value: formatSeconds(Number(props.overviewItems?.pjhs)) || 0,
          key: 'pjhs',
        },
      ],
    },
  ];

  datas.overviewItems2 = [
    {
      icon: markRaw(SvgCakeIcon),
      title: '任务统计',
      totalTitle: '总任务量',
      totalValue: 0,
      value: 0,
      children: [
        {
          icon: markRaw(SvgPtrwIcon),
          title: '普通任务',
          value: Number(props.overviewItems?.ptrws) || 0,
          key: 'ptrw',
        },
        {
          icon: markRaw(SvgJjrwIcon),
          title: '指令任务',
          value: Number(props.overviewItems?.jjrws) || 0,
          key: 'jjrw',
        },
        {
          icon: markRaw(SvgMgrwIcon),
          title: '敏感任务',
          value: Number(props.overviewItems?.mgrws) || 0,
          key: 'mgrw',
        },
        {
          icon: markRaw(SvgQzrwIcon),
          title: '情指任务',
          value: Number(props.overviewItems?.qzrws) || 0,
          key: 'qzrw',
        },
        {
          icon: markRaw(SvgZlrwIcon),
          title: '线索核查',
          value: Number(props.overviewItems?.zlrws) || 0,
          key: 'zlrw',
        },
        {
          icon: markRaw(SvgTsrwIcon),
          title: '特殊任务',
          value: Number(props.overviewItems?.tsrws) || 0,
          key: 'tsrw',
        },
      ],
    },
  ];
});

const router = useRouter();

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

<template>
  <div
    class="mr-2 flex grid w-full grid-cols-2 gap-2 md:grid-cols-2 lg:grid-cols-2"
  >
    <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-2">
      <template v-for="item in datas.overviewItems" :key="item.title">
        <Card :title="item.title" class="w-full">
          <CardHeader>
            <CardTitle class="text-xl" style="text-align: left">
              {{ 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>

              <span v-if="i.title === '平均耗时'" class="text-xl">
                <span class="text-primary" style="font-size: 16px; color: #000">
                  {{ i.value }}
                </span>
              </span>
              <!-- <a
                v-else-if="
                  typeof i.value === 'number' &&
                  i.value > 0 &&
                  i.title !== '平均耗时'
                "
                class="text-primary text-xl"
                @click.prevent="goUrl(i.key)"
              >
                <span style="font-size: 20px">
                  {{ i.value }}
                </span>
              </a> -->
              <VbenCountToAnimator
                v-else
                :end-val="Number(i.value)"
                :start-val="0"
                class="text-xl"
                prefix=""
              />
            </div>
          </CardContent>
        </Card>
      </template>
    </div>
    <div class="grid grid-cols-1 gap-2 md:grid-cols-1 lg:grid-cols-1">
      <template v-for="item in datas.overviewItems2" :key="item.title">
        <Card :title="item.title" class="w-full">
          <CardHeader>
            <CardTitle class="text-xl" style="text-align: left">
              {{ item.title }}
            </CardTitle>
          </CardHeader>
          <div class="flex flex-wrap p-5 pt-0">
            <CardContent
              v-for="i in item.children"
              :key="i.title"
              class="flex grid grid-cols-1 gap-2 md:w-1/2 md:grid-cols-1 lg:grid-cols-1"
            >
              <div
                class="flex grid grid-cols-1 items-center justify-between gap-2 md:grid-cols-2 lg:grid-cols-2"
              >
                <span>
                  <VbenIcon
                    :icon="i.icon"
                    class="size-8 flex-shrink-0"
                    style="display: inline"
                  />
                  {{ i.title }}
                </span>
                <!-- <a
                  v-if="Number(i.value) > 0"
                  class="text-xl"
                  @click.prevent="goUrl(i.key)"
                >
                  <span
                    class="text-primary hover:underline"
                    style="font-size: 20px"
                  >
                    {{ i.value }}
                  </span>
                </a>
                <VbenCountToAnimator
                  v-else
                  :end-val="Number(i.value)"
                  :start-val="0"
                  class="text-xl"
                  prefix=""
                /> -->
                <VbenCountToAnimator
                  :end-val="Number(i.value)"
                  :start-val="0"
                  class="text-xl"
                  prefix=""
                />
              </div>
            </CardContent>
          </div>

          <!-- <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>
  </div>
</template>
<style scoped>
.text-xl {
  text-align: right;
}
</style>
