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

<script>
import Chart from './chart.vue';
import { getDeviceCountByProvince } from '@/api/data.js'; // 引入封装好的接口

export default {
  data () {
    return {
      cdata: []
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.loadChinaMapData();
  },
  methods: {
    async loadChinaMapData() {
      try {
        // 调用封装好的接口
        const response = await getDeviceCountByProvince();
        if (response.code === 200) {
          this.cdata = response.data;
        } else {
          console.error('加载数据失败:', response.msg);
          // 使用模拟数据
          this.cdata = this.getMockData();
        }
      } catch (error) {
        console.error('加载全国地图数据失败:', error);
        // 使用模拟数据
        this.cdata = this.getMockData();
      }
    },

    getMockData() {
      // 模拟数据 - 保持与福建地图相同的格式
      return [
        { name: '北京市', value: 45 },
        { name: '天津市', value: 18 },
        { name: '河北省', value: 23 },
        { name: '山西省', value: 9 },
        { name: '内蒙古自治区', value: 6 },
        { name: '辽宁省', value: 20 },
        { name: '吉林省', value: 8 },
        { name: '黑龙江省', value: 15 },
        { name: '上海市', value: 42 },
        { name: '江苏省', value: 78 },
        { name: '浙江省', value: 89 },
        { name: '安徽省', value: 28 },
        { name: '福建省', value: 45 },
        { name: '江西省', value: 25 },
        { name: '山东省', value: 67 },
        { name: '河南省', value: 38 },
        { name: '湖北省', value: 35 },
        { name: '湖南省', value: 32 },
        { name: '广东省', value: 156 },
        { name: '广西壮族自治区', value: 14 },
        { name: '海南省', value: 8 },
        { name: '重庆市', value: 25 },
        { name: '四川省', value: 42 },
        { name: '贵州省', value: 10 },
        { name: '云南省', value: 12 },
        { name: '西藏自治区', value: 2 },
        { name: '陕西省', value: 18 },
        { name: '甘肃省', value: 7 },
        { name: '青海省', value: 3 },
        { name: '宁夏回族自治区', value: 4 },
        { name: '新疆维吾尔自治区', value: 5 }
      ];
    }
  }
}
</script>

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