<!--
 * @Author: hcc han_chen301@163.com
 * @Date: 2025-05-24 17:21:02
 * @LastEditors: hcc
 * @LastEditTime: 2025-06-09 15:17:21
 * @remarker: 
-->
<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
} from '@vben/common-ui';

import { nextTick, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  AnalysisChartCard,
  AnalyticsTaskStatistics,
  WorkbenchQuickNav,
} from '@vben/common-ui';
import { SvgDclIcon, SvgDshIcon, SvgYclIcon, SvgYspIcon } from '@vben/icons';
import { openWindow } from '@vben/utils';

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

import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

import { getHomeStatistics } from '#/api/statistics/statistics';
// import { renderText } from '#/utils/render';
import { getDictOptions } from '#/utils/dict';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';

const dictInfo = getDictOptions('biz_task_log_type');

const router = useRouter();

interface PropsItem {
  names?: string[];
  jqrwzs?: number[];
  ajrwzs?: number[];
  zxrwzs?: number[];
  qtrwzs?: number[];
  rwzs?: number[];
}
const homeStatistics = ref<any>({});
const everydayItems = ref<PropsItem>({});
const taskTypeData = ref<any>([]);
const taskLevelData = ref<any>([]);

const todoItems = ref<WorkbenchTodoItem[]>([]);
const initData = async () => {
  homeStatistics.value = await getHomeStatistics();
  everydayItems.value = {
    names: homeStatistics.value.mrrwqs.map((item: any) => item.drq),
    jqrwzs: homeStatistics.value.mrrwqs.map((item: any) => item.jqrws),
    ajrwzs: homeStatistics.value.mrrwqs.map((item: any) => item.ajrws),
    zxrwzs: homeStatistics.value.mrrwqs.map((item: any) => item.zxrws),
    qtrwzs: homeStatistics.value.mrrwqs.map((item: any) => item.qtrws),
    rwzs: homeStatistics.value.mrrwqs.map((item: any) => item.rwzs),
  };
  taskTypeData.value = [
    { name: '案件任务', value: homeStatistics.value.ajrws },
    { name: '警情任务', value: homeStatistics.value.jqrws },
    { name: '专项任务', value: homeStatistics.value.zxrws },
    { name: '其他任务', value: homeStatistics.value.qtrws },
  ];
  taskLevelData.value = [
    { name: '普通任务', value: homeStatistics.value.ptrws },
    { name: '指令任务', value: homeStatistics.value.jjrws },
    { name: '专项任务', value: homeStatistics.value.zxrws },
    { name: '线索核查', value: homeStatistics.value.zlrws },
    { name: '敏感任务', value: homeStatistics.value.mgrws },
    { name: '情指任务', value: homeStatistics.value.qzrws },
  ];
  console.log('dictInfo', dictInfo);
  nextTick(() => {
    dictInfo.forEach((dict: any) => {
      console.log('dict', dict);
    });
  });
  const dictValue = ref<string>('');

  homeStatistics.value?.rwdt.forEach((item: any) => {
    dictInfo.forEach((dict: any) => {
      if (dict.value === item.type) {
        dictValue.value = dict.label;
      }
    });
    todoItems.value.push({
      completed: false,
      content: item.dept_name + item.user_name + item.remark,
      date: item.optime,
      // title: item.type,
      title: dictValue.value,
    });
  });
};
const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:paper-plane-outline',
    title: '新建任务',
    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: SvgDshIcon,
    title: '待我审批',
    url: '/tasks/dwsp',
  },
  {
    color: '#e18525',
    icon: SvgDclIcon,
    title: '待我办理',
    url: '/tasks/dwbl',
  },
  {
    color: '#3fb27f',
    icon: SvgYspIcon,
    title: '已审批的',
    url: '/tasks/ycld', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
  },
  {
    color: '#4daf1bc9',
    icon: SvgYclIcon,
    title: '已处理的',
    url: '/tasks/processed',
  },
  {
    color: '#00d8ff',
    icon: 'ion:home-outline',
    title: '首页',
    url: '/workspace',
  },
];

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
const componentKey = ref(0);
onMounted(async () => {
  // 获取首页统计数据
  initData();
  await nextTick(); // 等待DOM更新
  componentKey.value += 1; // 强制更新Vue3SeamlessScroll组件
});
</script>

<template>
  <div class="p-3">
    <div class="w-full md:flex">
      <!-- <AnalysisOverview class="md:w-3/4" :items="overviewItems" /> -->
      <AnalyticsTaskStatistics
        class="mr-2 md:w-3/4"
        :overview-items="homeStatistics"
      />
      <WorkbenchQuickNav
        :items="quickNavItems"
        class="mt-3 md:w-1/4 lg:mt-0"
        title="快捷导航"
        @click="navTo"
      />
    </div>
    <div class="mt-3 flex flex-col lg:flex-row">
      <div class="mr-2 w-full lg:w-3/4">
        <!-- <AnalysisChartsTabs :tabs="chartTabs" class="">
          <template #trends>
            <AnalyticsTrends
              :everyday-task="everydayItems"
            />
          </template>
          <template #visits>
            <AnalyticsVisits />
          </template>
        </AnalysisChartsTabs> -->
        <AnalysisChartCard class="md:mt-0" title="每日任务趋势">
          <AnalyticsTrends :everyday-task="everydayItems" />
        </AnalysisChartCard>
        <div class="mt-3 w-full md:flex">
          <AnalysisChartCard
            class="md:mr-2 md:mt-0 md:w-1/2"
            title="任务类型统计"
          >
            <AnalyticsVisitsData :task-type-data="taskTypeData" />
          </AnalysisChartCard>
          <AnalysisChartCard class="md:mt-0 md:w-1/2" title="任务级别统计">
            <AnalyticsVisitsSource :task-level-data="taskLevelData" />
          </AnalysisChartCard>
        </div>
      </div>
      <div class="w-full lg:w-1/4">
        <Card style="height: 800px">
          <CardHeader class="py-4">
            <CardTitle class="text-lg">任务动态</CardTitle>
          </CardHeader>
          <CardContent class="flex flex-wrap p-5 pt-0">
            <ul
              class="divide-border w-full divide-y"
              role="list"
              style="height: 700px; overflow: hidden"
            >
              <Vue3SeamlessScroll
                :list="todoItems"
                :step="0.5"
                :hover="true"
                class="scroll-container"
                :key="componentKey"
                :limit-scroll-num="8"
                :single-height="90"
                :copy-num="3"
                v-if="todoItems.length > 0"
              >
                <li
                  v-for="item in todoItems"
                  :key="item.date"
                  :class="{
                    'select-none line-through opacity-60': item.completed,
                  }"
                  class="flex cursor-pointer justify-between gap-x-6 py-5"
                  style="border-bottom: 1px solid hsl(var(--border))"
                >
                  <div class="flex min-w-0 items-center gap-x-4">
                    <div class="min-w-0 flex-auto">
                      <p
                        class="text-foreground text-sm font-semibold leading-6"
                      >
                        {{ item.title }}
                      </p>
                      <p
                        class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
                      >
                        {{ item.content }}
                      </p>
                    </div>
                  </div>
                  <div
                    class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end"
                  >
                    <span class="text-foreground/80 mt-6 text-xs leading-6">
                      {{ item.date }}
                    </span>
                  </div>
                </li>
              </Vue3SeamlessScroll>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</template>
<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden;
}

.item {
  padding: 12px;
  margin: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>
