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

<script>
import Chart from './chart.vue';
import { getHeadTypeStats } from '@/api/data.js'; // 根据你的API文件调整路径

export default {
  data () {
    return {
      cdata: {
        xData: [],
        seriesData: []
      },
      // 按摩头类型映射
      massageTypeMap: {
        thermotherapy: '深部热疗',
        shockwave: '点阵按摩',
        ball: '全能滚珠',
        touch: '触觉按摩',
        finger: '指疗通络',
        roller: '滚滚刺疗',
        stone: '温砭舒揉',
        ion: '离子光灸'
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.loadChartData();
  },
  methods: {
    // 根据映射关系转换数据
    transformData(apiData) {
      const transformed = {
        xData: [],
        seriesData: []
      };
      
      // 转换xData和seriesData中的名称
      if (apiData.xData && apiData.seriesData) {
        transformed.xData = apiData.xData.map(item => this.massageTypeMap[item] || item);
        transformed.seriesData = apiData.seriesData.map(item => ({
          ...item,
          name: this.massageTypeMap[item.name] || item.name
        }));
      }
      
      return transformed;
    },
    
    async loadChartData() {
      try {
        const response = await getHeadTypeStats();
        if (response.code === 200) {
          // 在设置数据前进行转换
          this.cdata = this.transformData(response.data);
        } else {
          console.error('获取数据失败:', response.msg);
          this.setDefaultData();
        }
      } catch (error) {
        console.error('请求失败:', error);
        this.setDefaultData();
      }
    },
    
    setDefaultData() {
      // 失败时使用默认数据（已经是中文）
      this.cdata = {
        xData: ["默认数据1", "默认数据2", "默认数据3"],
        seriesData: [
          { value: 30, name: "默认数据1" },
          { value: 20, name: "默认数据2" },
          { value: 50, name: "默认数据3" }
        ]
      };
    }
  }
}
</script>