<template>
  <div class="chart-container">
    <!-- 区域设备排行榜 -->
    <div class="chart-header">
      <!--标题  -->
      <span class="title">区域设备排行榜</span>
    </div>
    <div class="chart-content" :style="{ height: height, width: width }">
      <!-- echarts内容 -->
      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
    </div>
  </div>
</template>

<script>
import verticalBarChart from "../../../components/echart/barChart/verticalBarChart.vue";
import { getRegionalRank } from "@/api/cockpit/cockpit";
export default {
  name: "layoutChartSelect",
  components: {
    verticalBarChart,
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "250px",
    },
    type: {
      //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
      type: String,
      required: true,
    },
  },
  data() {
    return {
      seriesData: [],
      yAxisData: [],
    };
  },
  mounted() {
    // this.fetchData(); //后期接口改好直接用
    setTimeout(() => {
      //模拟数据
      this.seriesData = [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
        },
      ];
      this.yAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
    });
  },
  methods: {
    fetchData() {
      if (this.type === "region") {
        getRegionalRank().then((res) => {
          console.log(res.data, "区域设备排行榜");
          // {
          //     "deviceCount": 17,
          //     "regionName": "北京市"
          // }
          for (var i = 0; i < res.data; i++) {
            this.seriesData.push(res.data[i].deviceCount);
            this.yAxisData.push(res.data[i].regionName);
          }
        });
      } else {
        //设备注册排行
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  .chart-header {
    width: 600px;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .chart-content {
    // width: 600px;
    // height: 400px;
  }
}
</style>