<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
import { getRadarStats } from '@/api/data'; // 导入新接口

export default {
  data () {
    return {
      cdata: {
        indicatorData: [],
        dataBJ: [],
        dataSH: [],
        dataGZ: []
      }
    }
  },
  components: {
    Chart,
  },
  mounted() {
    this.loadRadarData();
  },
  methods: {
    async loadRadarData() {
      try {
        const response = await getRadarStats();
        if (response.code === 200) {
          this.cdata = response.data;
        } else {
          console.error('获取雷达图数据失败:', response.msg);
          this.loadDefaultData();
        }
      } catch (error) {
        console.error('获取雷达图数据异常:', error);
        this.loadDefaultData();
      }
    },
    loadDefaultData() {
      // 备用默认数据
      this.cdata = {
        indicatorData: [
          { name: "按摩次数", max: 100 },
          { name: "总时长(分)", max: 250 },
          { name: "按摩头类型", max: 5 },
          { name: "身体部位", max: 6 },
          { name: "平均时长", max: 200 },
          { name: "使用频率", max: 50 }
        ],
        dataBJ: [[94, 69, 3, 4, 114, 39]],
        dataSH: [[91, 45, 2, 3, 125, 23]],
        dataGZ: [[84, 94, 4, 5, 140, 18]]
      };
    }
  }
}
</script>