<template>
    <div class="chart-container">
      <div class="chart-header">
        <!--标题  -->
        <span class="title">供应商季度评价统计</span>
        <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chart-content" :style="{ height: height, width: width }">
        <!-- echarts内容 -->
        <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData"/>
      </div>
    </div>
  </template>
    
    <script>
 import MixChart from '@/components/echart/barChart/MixChart.vue'
  export default {
    name: "supplierEvaluation",
    components: {
        MixChart,
    },
    props: {
      name: {
        type: String,
        default: "",
      },
      width: {
        type: String,
        default: "500px",
      },
      height: {
        type: String,
        default: "300px",
      },
    },
    data() {
      return {
        value: "2022",
        options: [
          {
            value: "2022",
            label: "2022年",
          },
          {
            value: "2021",
            label: "2021年",
          },
          {
            value: "2020",
            label: "2020年",
          },
        ],
        xAxisData: [],
        yAxisData: [],
        seriesData: [],
        legend: [],
      };
    },
    mounted() {
    this.fetchData(); // 真实数据接口，后期接口完成直接打开使用
    setTimeout(() => {
      // 模拟数据
      this.seriesData = [
        {
          name: "资料预审个数",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          data: [10, 15, 13, 19, 22, 9, 33],
        },
        {
          name: "预审通过率",
          type: "bar",
          data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
        },
        {
          name: "预审1",
          type: "bar",
          data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
        },
        {
          name: "预审2",
          type: "bar",
          data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
        },
      ];
      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 = ["资料预审个数", "预审通过率"];
    });
  },
    methods: {
      fetchData() {
        
      },
    },
    watch:{
        value(newVal) {
            this.fetchData()
        }
    }
  };
  </script>
    
    <style lang="scss" scoped>
  .chart-container {
    .chart-header {
      width: 500px;
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
  }
  </style>