<template>
  <div class="chart-container">
    <div class="chart-header">
      <!--标题  -->
      <span class="title">{{ name }}</span>
    </div>
    <div class="chart-content" :style="{ height: height, width: width }">
      <!-- echarts内容 -->
      <MixChart
        :xAxisData="xAxisData"
        :seriesData="seriesData"
        :yAxisData="yAxisData"
        :legend="legend"
      />
    </div>
  </div>
</template>
  
  <script>
import MixChart from "../../../components/echart/barChart/MixChart.vue";
export default {
  name: "supplierCommon",
  components: {
    MixChart,
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    fetchdata: {
      type: Function,
      required: true,
    },
    legendDefault: {
      type: Array,
      default: () => ["", ""],
    },
  },
  data() {
    return {
      seriesData: [],
      xAxisData: [],
      yAxisData: [],
      legend: [],
    };
  },
  mounted() {
    this.fetchData(); // 真实数据接口，后期接口完成直接打开使用
    // setTimeout(() => {
    //   // 模拟数据
    //   this.seriesData = [
    //     {
    //       name: "资料预审个数",
    //       type: "bar",
    //       tooltip: {
    //         valueFormatter: function (value) {
    //           return value;
    //         },
    //       },
    //       data: [10, 15, 13, 19, 22, 9, 33],
    //       barWidth:20
    //     },
    //     {
    //       name: "预审通过率",
    //       type: "line",
    //       data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
    //       smooth: false, // 折线平滑
    //       symbol: "circle", // 控制折线处小点
    //     },
    //   ];
    //   this.xAxisData = ["10-1", "10-2", "10-3", "10-4", "10-5", "10-6", "10-7"];
    //   this.yAxisData = [
    //     {
    //       type: "value",
    //       show: true,
    //       axisLabel: {
    //         formatter: "{value}",
    //         fontSize: 12,
    //         color: "#000",
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       splitLine: {
    //         //多条横线
    //         show: true,
    //       },
    //       interval: 20,
    //     },
    //     {
    //       type: "value",
    //       show: true,
    //       axisLabel: {
    //         formatter: "{value}%",
    //         fontSize: 12,
    //         color: "#000",
    //       },
    //       splitLine: {
    //         //多条横线
    //         show: true,
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       interval: 20,
    //     },
    //   ];
    //   this.legend = ["资料预审个数", "预审通过率"];
    // },1000);
  },
  watch: {
    //   value(newVal) {
    //     // 根据选择的选项获取不同的数据
    //     if (newVal === "12") {
    //       this.seriesData = [
    //         {
    //           name: "Evaporation",
    //           type: "bar",
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " ml";
    //             },
    //           },
    //           data: [
    //             2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
    //             3.3,
    //           ],
    //         },
    //         {
    //           name: "Precipitation",
    //           type: "bar",
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " ml";
    //             },
    //           },
    //           data: [
    //             2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
    //             2.3,
    //           ],
    //         },
    //         {
    //           name: "Temperature",
    //           type: "line",
    //           yAxisIndex: 1,
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " °C";
    //             },
    //           },
    //           data: [
    //             2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
    //           ],
    //         },
    //       ];
    //     } else {
    //       this.seriesData = [
    //         {
    //           name: "Evaporation",
    //           type: "bar",
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " ml";
    //             },
    //           },
    //           data: [
    //             22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
    //             3.3,
    //           ],
    //         },
    //         {
    //           name: "Precipitation",
    //           type: "bar",
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " ml";
    //             },
    //           },
    //           data: [
    //             12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
    //             2.3,
    //           ],
    //         },
    //         {
    //           name: "Temperature",
    //           type: "line",
    //           yAxisIndex: 1,
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + " °C";
    //             },
    //           },
    //           data: [
    //             42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
    //             16.2,
    //           ],
    //         },
    //       ];
    //     }
    //   },
  },
  methods: {
    fetchData() {
      this.fetchdata().then((res) => {
        let date = [];
        let passRatio = [];
        let preViewCount = [];
        for (var i = 0; i < res.data.length; i++) {
          date.push(res.data[i].date);
          passRatio.push(
            this.name === "供应商资料预审统计"
              ? res.data[i].throughRatio
              : res.data[i].passRatio
          );
          preViewCount.push(
            this.name === "供应商资料预审统计"
              ? res.data[i].preViewCount
              : res.data[i].inputViewCount
          );
        }
        this.seriesData = [
          {
            name: this.legendDefault[0],
            type: "bar",
            data: preViewCount,
            barWidth: 20,
          },
          {
            name: this.legendDefault[1],
            type: "line",
            data: passRatio.map(item => parseInt(item)),
            smooth: false, // 折线平滑
            symbol: "circle", // 控制折线处小点
            tooltip: {
            valueFormatter: function (value) {
              return value + '%';
            },
          },
          },
        ];
        this.xAxisData = date;
        this.yAxisData = [
          {
            name:this.legendDefault[0],
            type: "value",
            show: true,
            axisLabel: {
              formatter: "{value}",
              fontSize: 12,
              color: "#000",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              //多条横线
              show: true,
            },
            interval: 20,
          },
          {
            name:this.legendDefault[1],
            type: "value",
            show: true,
            positon:'right',
            axisLabel: {
              formatter: "{value}%",
              fontSize: 12,
              color: "#000",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              //多条横线
              show: true,
            },
            interval: 20,
          },
        ];
        this.legend = this.legendDefault;
      });
    },
  },
};
</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>