<template>
  <view class="page">

    <!-- 时间筛选 -->
    <view class="filter-bar">
      <u-button
        v-for="(item, index) in timeTabs"
        :key="index"
        :type="currentTab === index ? 'primary' : 'default'"
        size="small"
        @click="changeTab(index)"
        class="filter-btn"
      >
        {{ item }}
      </u-button>
    </view>

    <!-- 饼图 -->
    <view class="chart-card" ref="chartContainer">
      <view class="chart-title">预警状态统计</view>

      <!-- 延迟渲染图表组件 -->
      <qiun-data-charts
        v-if="chartReady"
        type="pie"
        :opts="opts"
        :chartData="chartData"
        :animation="true"
        style="width: 100%; height: 300px;"
      />

    </view>

  </view>
</template>

<script>
export default {
  // 页面级注册组件
  components: {
    'qiun-data-charts': () => import('@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue')
  },
  data() {
    return {
      timeTabs: ['本周', '本月', '本季', '本年'],
      currentTab: 0,
      legendData: [
        { name: '待处理', color: 'red', value: 10 },
        { name: '处理中', color: '#2f91ff', value: 20 },
        { name: '已完成', color: '#00cc66', value: 15 }
      ],
      chartData: {}, // 图表数据
      opts: {},      // 图表配置
      chartReady: false // 控制组件渲染
    };
  },
  onReady() {
    // 延迟 50ms 确保 DOM 渲染完成再显示图表
    setTimeout(() => {
      this.chartReady = true;
      this.updateChartData();
    }, 50);
  },
  methods: {
    changeTab(index) {
      this.currentTab = index;
      this.updateChartData();
    },
    updateChartData() {
      // 模拟不同时间 tab 数据变化
      let newData;
      switch (this.currentTab) {
        case 0: // 本周
          newData = [10, 20, 15];
          break;
        case 1: // 本月
          newData = [30, 25, 20];
          break;
        case 2: // 本季
          newData = [50, 30, 20];
          break;
        case 3: // 本年
          newData = [100, 80, 60];
          break;
      }

      // 更新 legendData 的 value
      this.legendData.forEach((item, i) => {
        item.value = newData[i];
      });

      // chartData.series.data 必须是对象数组
      this.chartData = {
        categories: this.legendData.map(item => item.name),
        series: [
          {
            name: '预警状态',
            data: this.legendData.map(item => ({
              value: item.value,
              name: item.name
            }))
          }
        ]
      };

      // 图表配置
      this.opts = {
        color: this.legendData.map(item => item.color),
        dataLabel: true,
        animation: true,
        padding: [5, 5, 5, 5],
        rotate: false
      };
    }
  }
};
</script>

<style scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.filter-bar {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx 0rpx 20rpx;
  background-color: #fff;
}

.filter-btn {
  flex: 1;
  margin: 0 5rpx;
}

.chart-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
}

.chart-title {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

</style>
