<script name="repairEcharts" setup lang="ts">
import { ref, onMounted } from 'vue';
import { workSpaceRepairTrendListApi } from '@/api/workflow';
import Echarts from '@/components/Echarts/index.vue';
import type { EChartsOption } from 'echarts';

// 使用 ref 而不是 shallowRef，以确保深层响应式，或者在更新时重新赋值整个对象
const chartConfig = shallowRef<EChartsOption>({
  grid: {
    left: '1%',
    right: '1%',
    top: '10%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    type: 'category', // 建议明确指定类型
    data: [] as string[]
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [] as number[],
      type: 'line',
      smooth: true,
      name: '维修单数',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#e2edff' },
            { offset: 1, color: '#f2f9ff' }
          ]
        }
      },
      lineStyle: {
        color: '#1a75ff'
      },
      itemStyle: {
        color: '#1a75ff'
      },
      label: {
        show: true,
        color: '#3f8afc',
        position: 'top'
      }
    }
  ]
});

// 获取维修列表数据
function getRepairList() {
  const id = localStorage.getItem('villageid');
  if (!id) return;

  workSpaceRepairTrendListApi(id)
    .then((res: any[]) => {
      if (!res || res.length === 0) {
        return;
      }
      const map = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
      // 提取日期和数量
      const dates = map.map((item) => item.date);
      const counts = map.map((item) => item.count);

      // 如果使用的是 ref，直接修改属性即可触发响应式
      chartConfig.value = {
        grid: chartConfig.value.grid,
        yAxis: chartConfig.value.yAxis,
        tooltip: chartConfig.value.tooltip,
        xAxis: {
          type: 'category',
          data: dates
        },
        series: [
          {
            ...chartConfig.value.series?.[0],
            type: 'line', // 确保 type 存在
            data: counts
          }
        ]
      } as EChartsOption;

      // 注意：如果 <Echarts> 组件内部没有正确监听 options 的变化，
      // 可能需要强制触发更新，例如：
      // chartConfig.value = { ...chartConfig.value };
      // 但大多数封装好的 Echarts 组件会 watch options 并调用 setOption
    })
    .catch((err) => {
      console.error('获取维修趋势数据失败:', err);
    });
}

onMounted(() => {
  getRepairList();
});
</script>

<template>
  <div class="w-full h-full">
    <Echarts :options="chartConfig" />
  </div>
</template>

<style scoped lang="scss"></style>
