<template>
  <!-- 用户数量变化趋势 -->
  <div class="chart-container">
    <div class="chart-header">
      <!--标题  -->
      <span class="title">供应商注册统计</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 } 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() {
      if (this.type === "supplier") {
        // 供应商注册统计
        getRegisterCount().then((res) => {
          console.log(res.data, "供应商注册统计");
          let seriesData = [
            {
              name: "供应商注册数量",
              data: [],
            },
          ];
          let xAxisData = [];
          res.data.forEach((item) => {
            seriesData[0].data.push(item.count);
            xAxisData.push(item.date);
          });
          this.seriesData = seriesData;
          this.xAxisData = xAxisData;
        });
      } else {
        // 设备注册数量统计
        // 发请求拿数据，暂时无接口 使用供应商注册统计展示
        getRegisterCount().then((res) => {
          console.log(res.data, "供应商注册统计");
          let seriesData = [
            {
              name: "供应商注册数量",
              data: [],
            },
          ];
          let xAxisData = [];
          res.data.forEach((item) => {
            seriesData[0].data.push(item.count);
            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>