<template>
  <div class="app-container home">
    <!-- 欢迎栏 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="never">
          <div class="welcome-header">
            <div>
              <h2 class="welcome-title">{{ $t('dashboard.welcome') }}</h2>
              <p class="welcome-desc">{{ $t('dashboard.description') }}</p>
            </div>
            <div class="welcome-meta">
              <el-tag type="primary">{{ currentDate }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 核心指标 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="item in statCards" :key="item.key">
        <el-card shadow="hover" class="stat-card" @click="goTarget(item.path)">
          <div class="stat-icon" :style="{ background: item.color }">
            <svg-icon :icon-class="item.icon" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 状态分布图表 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xs="24" :md="12" :lg="8">
        <el-card shadow="never">
          <template #header>
            <span>{{ $t('dashboard.taskStatus') }}</span>
          </template>
          <div ref="taskStatusChartRef" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8">
        <el-card shadow="never">
          <template #header>
            <span>{{ $t('dashboard.deviceStatus') }}</span>
          </template>
          <div ref="deviceStatusChartRef" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8">
        <el-card shadow="never">
          <template #header>
            <span>{{ $t('dashboard.locationStatus') }}</span>
          </template>
          <div ref="locationStatusChartRef" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近任务与快捷入口 -->
    <el-row :gutter="20">
      <el-col :xs="24" :lg="16" class="mb-4">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>{{ $t('dashboard.recentTasks') }}</span>
              <el-button link type="primary" @click="goTarget('/base/taskQueue')">{{ $t('dashboard.more') }}</el-button>
            </div>
          </template>
          <el-table v-loading="loading" :data="recentTasks" stripe>
            <el-table-column prop="taskCode" :label="$t('dashboard.taskCode')" min-width="120" />
            <el-table-column prop="materialName" :label="$t('dashboard.materialName')" min-width="120" />
            <el-table-column prop="startPoint" :label="$t('dashboard.startPoint')" min-width="100" />
            <el-table-column prop="endPoint" :label="$t('dashboard.endPoint')" min-width="100" />
            <el-table-column prop="taskStatus" :label="$t('dashboard.taskStatus')" width="100">
              <template #default="scope">
                <dict-tag :options="wcs_task_status" :value="scope.row.taskStatus" />
              </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="$t('dashboard.createTime')" width="170">
              <template #default="scope">
                <span>{{ parseTime(scope.row.createTime, CREATED_TIME_DISPLAY_FORMAT) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card shadow="never">
          <template #header>
            <span>{{ $t('dashboard.quickLinks') }}</span>
          </template>
          <div class="quick-link-list">
            <div v-for="link in quickLinks" :key="link.path" class="quick-link" @click="goTarget(link.path)">
              <svg-icon :icon-class="link.icon" class="quick-link-icon" />
              <div class="quick-link-info">
                <div class="quick-link-title">{{ link.title }}</div>
                <div class="quick-link-desc">{{ link.desc }}</div>
              </div>
              <svg-icon icon-class="caret-forward" class="quick-link-arrow" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { parseTime } from '@/utils/ruoyi';
import { countTaskQueue, listTaskQueue } from '@/api/wcs/taskQueue';
import { countTaskDetail } from '@/api/wcs/taskDetail';
import { countDeviceInfo } from '@/api/wcs/deviceInfo';
import { countDeviceParam } from '@/api/wcs/deviceParam';
import { countLocationInfo } from '@/api/wcs/locationInfo';
import { countMaterialInfo } from '@/api/wcs/materialInfo';
import { countStoreInfo } from '@/api/wcs/storeInfo';
import { countPathInfo } from '@/api/wcs/pathInfo';
import { countDeviceHost } from '@/api/wcs/deviceHost';
import { TaskQueueVO } from '@/api/wcs/taskQueue/types';
import { CREATED_TIME_DISPLAY_FORMAT } from './wcs/utils/createTimeRange';
import { useI18n } from 'vue-i18n';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { t } = useI18n();
const router = useRouter();

const { wcs_task_status } = toRefs<any>(proxy?.useDict('wcs_task_status'));

const loading = ref(false);
const currentDate = ref('');

const statCards = ref([
  { key: 'taskQueue', label: t('dashboard.taskQueue'), value: 0, icon: 'list', color: '#3b82f6', path: '/base/taskQueue' },
  { key: 'taskDetail', label: t('dashboard.taskDetail'), value: 0, icon: 'component', color: '#6366f1', path: '/base/taskDetail' },
  { key: 'deviceHost', label: t('dashboard.deviceHost'), value: 0, icon: 'server', color: '#64748b', path: '/base/deviceHost' },
  { key: 'deviceInfo', label: t('dashboard.deviceInfo'), value: 0, icon: 'chart', color: '#10b981', path: '/base/deviceInfo' },
  { key: 'deviceParam', label: t('dashboard.deviceParam'), value: 0, icon: 'edit', color: '#0ea5e9', path: '/base/deviceParam' },
  { key: 'locationInfo', label: t('dashboard.locationInfo'), value: 0, icon: 'dict', color: '#f59e0b', path: '/base/locationInfo' },
  { key: 'materialInfo', label: t('dashboard.materialInfo'), value: 0, icon: 'excel', color: '#8b5cf6', path: '/base/materialInfo' },
  { key: 'storeInfo', label: t('dashboard.storeInfo'), value: 0, icon: 'tree', color: '#ec4899', path: '/base/storeInfo' },
  { key: 'pathInfo', label: t('dashboard.pathInfo'), value: 0, icon: 'build', color: '#14b8a6', path: '/base/pathInfo' }
]);

const quickLinks = ref([
  { title: t('dashboard.taskQueue'), desc: t('dashboard.taskQueueDesc'), icon: 'list', path: '/base/taskQueue' },
  { title: t('dashboard.taskDetail'), desc: t('dashboard.taskDetailDesc'), icon: 'component', path: '/base/taskDetail' },
  { title: t('dashboard.deviceHost'), desc: t('dashboard.deviceHostDesc'), icon: 'server', path: '/base/deviceHost' },
  { title: t('dashboard.deviceInfo'), desc: t('dashboard.deviceInfoDesc'), icon: 'chart', path: '/base/deviceInfo' },
  { title: t('dashboard.deviceParam'), desc: t('dashboard.deviceParamDesc'), icon: 'edit', path: '/base/deviceParam' },
  { title: t('dashboard.locationInfo'), desc: t('dashboard.locationInfoDesc'), icon: 'dict', path: '/base/locationInfo' },
  { title: t('dashboard.materialInfo'), desc: t('dashboard.materialInfoDesc'), icon: 'excel', path: '/base/materialInfo' },
  { title: t('dashboard.storeInfo'), desc: t('dashboard.storeInfoDesc'), icon: 'tree', path: '/base/storeInfo' },
  { title: t('dashboard.pathInfo'), desc: t('dashboard.pathInfoDesc'), icon: 'build', path: '/base/pathInfo' }
]);

const recentTasks = ref<TaskQueueVO[]>([]);

const taskStatusChartRef = ref<HTMLDivElement>();
const deviceStatusChartRef = ref<HTMLDivElement>();
const locationStatusChartRef = ref<HTMLDivElement>();
let taskStatusChart: echarts.ECharts | null = null;
let deviceStatusChart: echarts.ECharts | null = null;
let locationStatusChart: echarts.ECharts | null = null;

const goTarget = (path: string) => {
  if (path.startsWith('http')) {
    window.open(path, '__blank');
  } else {
    router.push(path);
  }
};

const formatDate = (date: Date) => {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${weekdays[date.getDay()]}`;
};

const getCount = (res: any) => (res && typeof res.data === 'number' ? res.data : 0);

const loadCounts = async () => {
  const [taskQueueRes, taskDetailRes, hostRes, deviceRes, deviceParamRes, locationRes, materialRes, storeRes, pathRes] = await Promise.all([
    countTaskQueue(),
    countTaskDetail(),
    countDeviceHost(),
    countDeviceInfo(),
    countDeviceParam(),
    countLocationInfo(),
    countMaterialInfo(),
    countStoreInfo(),
    countPathInfo()
  ]);
  statCards.value[0].value = getCount(taskQueueRes);
  statCards.value[1].value = getCount(taskDetailRes);
  statCards.value[2].value = getCount(hostRes);
  statCards.value[3].value = getCount(deviceRes);
  statCards.value[4].value = getCount(deviceParamRes);
  statCards.value[5].value = getCount(locationRes);
  statCards.value[6].value = getCount(materialRes);
  statCards.value[7].value = getCount(storeRes);
  statCards.value[8].value = getCount(pathRes);
};

const loadTaskStatusChart = async () => {
  const statusOptions = wcs_task_status.value || [];
  if (!statusOptions.length) {
    taskStatusChart?.setOption({
      title: { text: t('dashboard.noData'), left: 'center', top: 'center', textStyle: { fontSize: 14, color: '#999' } },
      series: []
    });
    return;
  }
  const data = await Promise.all(
    statusOptions.map(async (dict: any) => {
      const res = await countTaskQueue({ taskStatus: parseInt(dict.value) });
      return { name: dict.label, value: getCount(res) };
    })
  );
  taskStatusChart?.setOption({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    series: [
      {
        type: 'pie',
        radius: '65%',
        data,
        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
      }
    ]
  });
};

const loadDeviceStatusChart = async () => {
  const statuses = [
    { label: t('dashboard.deviceNormal'), value: 0 },
    { label: t('dashboard.deviceBusy'), value: 1 },
    { label: t('dashboard.deviceAbnormal'), value: 2 }
  ];
  const data = await Promise.all(
    statuses.map(async (status) => {
      const res = await countDeviceInfo({ deviceStatus: status.value });
      return { name: status.label, value: getCount(res) };
    })
  );
  deviceStatusChart?.setOption({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    color: ['#10b981', '#f59e0b', '#ef4444'],
    series: [
      {
        type: 'pie',
        radius: ['40%', '65%'],
        data,
        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
      }
    ]
  });
};

const loadLocationStatusChart = async () => {
  const statuses = [
    { label: t('dashboard.locationUnused'), value: 0 },
    { label: t('dashboard.locationUsed'), value: 1 },
    { label: t('dashboard.locationLocked'), value: 2 },
    { label: t('dashboard.locationAbnormal'), value: 3 }
  ];
  const data = await Promise.all(
    statuses.map(async (status) => {
      const res = await countLocationInfo({ locationStatus: status.value });
      return { name: status.label, value: getCount(res) };
    })
  );
  locationStatusChart?.setOption({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    color: ['#94a3b8', '#3b82f6', '#f59e0b', '#ef4444'],
    series: [
      {
        type: 'pie',
        radius: ['40%', '65%'],
        data,
        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
      }
    ]
  });
};

const loadRecentTasks = async () => {
  loading.value = true;
  try {
    const res = await listTaskQueue({ pageNum: 1, pageSize: 5, params: {} });
    recentTasks.value = res.rows || [];
  } finally {
    loading.value = false;
  }
};

const initCharts = () => {
  if (taskStatusChartRef.value) taskStatusChart = echarts.init(taskStatusChartRef.value);
  if (deviceStatusChartRef.value) deviceStatusChart = echarts.init(deviceStatusChartRef.value);
  if (locationStatusChartRef.value) locationStatusChart = echarts.init(locationStatusChartRef.value);
};

const loadCharts = async () => {
  await Promise.all([loadTaskStatusChart(), loadDeviceStatusChart(), loadLocationStatusChart()]);
};

const handleResize = () => {
  taskStatusChart?.resize();
  deviceStatusChart?.resize();
  locationStatusChart?.resize();
};

onMounted(() => {
  currentDate.value = formatDate(new Date());
  initCharts();
  Promise.all([loadCounts(), loadRecentTasks(), loadCharts()]);
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  taskStatusChart?.dispose();
  deviceStatusChart?.dispose();
  locationStatusChart?.dispose();
});
</script>

<style lang="scss" scoped>
.home {
  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--el-text-color-regular);
  overflow-x: hidden;

  .mb-4 {
    margin-bottom: 16px;
  }

  .welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    .welcome-title {
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    .welcome-desc {
      margin: 0;
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }

    .welcome-meta {
      font-size: 14px;
    }
  }

  .stat-card {
    cursor: pointer;
    transition:
      transform 0.2s,
      box-shadow 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--app-shadow-md);
    }

    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      flex-shrink: 0;

      .svg-icon {
        width: 26px;
        height: 26px;
      }
    }

    .stat-info {
      flex: 1;
      min-width: 0;

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        line-height: 1.2;
      }

      .stat-label {
        font-size: 13px;
        color: var(--el-text-color-secondary);
        margin-top: 4px;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 280px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .quick-link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .quick-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: var(--app-radius-md);
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background: var(--el-fill-color-light);
      }

      .quick-link-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .quick-link-info {
        flex: 1;
        min-width: 0;

        .quick-link-title {
          font-size: 14px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }

        .quick-link-desc {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-top: 2px;
        }
      }

      .quick-link-arrow {
        color: var(--el-text-color-secondary);
      }
    }
  }
}
</style>
