<template>
  <!-- 用户数量变化趋势 -->
  <div class="chart-container">
    <div class="chart-header">
      <!--标题  -->
      <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
    </div>
    <div class="chart-content" :style="{ height: height, width: width }">
      <!-- echarts内容 -->
      <gradientLineChart
        :seriesData="seriesData"
        :xAxisData="xAxisData"
        :legend="legend"
      />
    </div>
  </div>
</template>
  
  <script>
import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
import { getRegisterCount, getDeviceCount } from "@/api/cockpit/cockpit";
export default {
  name: "layoutChartSupplier",
  components: {
    gradientLineChart,
  },
  props: {
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    type: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      seriesData: [],
      xAxisData: [],
      yAxisData: [],
      legend: [],
    };
  },
  mounted() {
    this.fetchData();
    // this.seriesData = [
    //   {
    //     data: [13, 15, 19, 8, 14, 3, 22],
    //   },
    // ];
    // this.xAxisData = ["10-1", "10-2", "10-3", "10-4", "10-5", "10-6", "10-7"];
  },
  methods: {
    fetchData() {
        // 供应商注册统计
        (this.type === "supplier" ? getRegisterCount() : getDeviceCount()).then((res) => {
          let seriesData = [
            {
              name: this.type === 'supplier' ? '供应商注册数量' : '设备注册数量数量',
              data: [],
            },
          ];
          let xAxisData = [];
          res.data.forEach((item) => {
            seriesData[0].data.push(this.type === "supplier" ? item.count : item.deviceCount);
            xAxisData.push(item.date);
          });
          this.seriesData = seriesData;
          this.xAxisData = xAxisData;
        });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.chart-container {
  .chart-header {
    width: 600px;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}
</style>