<template>
  <!-- 设备品类统计 -->
  <div class="chart-container">
    <div class="chart-header">
      <!--标题  -->
      <span class="title">设备分类统计</span>
    </div>
    <div class="chart-content" :style="{'height':height}">
      <!-- echarts内容 -->
      <doughnutChart :seriesData="seriesData" :title="title" />
    </div>
  </div>
</template>

<script>
import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
import { getDeviceCategory } from '@/api/cockpit/cockpit'
export default {
  name: "layoutChartSelect",
  components: {
    doughnutChart,
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    height:{
      type: String,
      default: "250px"
    }
  },
  data() {
    return {
      seriesData: [],
      title:''
    };
  },
  mounted() {
    this.fetchData()
  },
  methods:{
    fetchData() {
      getDeviceCategory().then(res => {
        let arr = []
        this.seriesData = res.data.map(item => {
          arr.push(item.deviceCount)
          return{
            name:item.categoryName,
            value:item.deviceCount
          }
        })
        this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}`
      })
    }
  }
};
</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>