<template>
  <div class="chart-container" :style="{ 'height': height, 'width': width }">
    <!-- 区域设备排行榜 -->
    <div class="chart-header">
      <!--标题  -->
      <span class="title">{{
        this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
      }}</span>
    </div>
    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
      <!-- echarts内容 -->
      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
    </div>
  </div>
</template>

<script>
import verticalBarChart from "../../../components/echart/barChart/verticalBarChart.vue";
import { getRegionalRank, getDeviceRank } from "@/api/cockpit/cockpit";
export default {
  name: "layoutChartSelect",
  components: {
    verticalBarChart,
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "200px",
    },
    width:{
      type:String,
      default:'360px'
    },
    type: {
      //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
      type: String,
      required: true,
    },
  },
  data() {
    return {
      seriesData: [
        { width: 8, data: [] },
        { width: 1, data: [] },
      ],
      yAxisData: [],
    };
  },
  mounted() {
    this.fetchData(); 
  },
  methods: {
    async fetchData() {
      let res = await (this.type === "region"
        ? getRegionalRank()
        : getDeviceRank());
      const { data } = res;
      let max = 0;
      data.forEach((element) => {
        if (element.deviceCount > max) {
          max = element.deviceCount;
        }
      });
      data.forEach((element) => {
        this.seriesData[0].data.push(element.deviceCount);
        this.seriesData[1].data.push(max);
        this.yAxisData.push(this.type === "region" ? element.regionName + '-' +element.deviceCount : element.supplierName +'-' +element.deviceCount);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  background: #edf5f8;
  border-radius: 8px;
  margin:10px;
  padding: 10px;
  .chart-header {
    font-size: 14px;
    color: #2076A1;
    font-weight: 700;
  }
  .chart-content {
    // width: 600px;
    // height: 400px;
  }
}
</style>