<template>
    <div class="chart-container">
      <div class="chart-header">
        <!--标题  -->
        <span class="title">{{name}}</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 :xAxisData="xAxisData"
        :seriesData="seriesData"
        :yAxisData="yAxisData"
        :legend="legend"/>
      </div>
    </div>
  </template>
    
    <script>
 import MixChart from '@/components/echart/barChart/MixChart.vue'
  export default {
    name: "commonSelectChart",
    components: {
        MixChart,
    },
    props: {
      name: {
        type: String,
        default: "",
      },
      width: {
        type: String,
        default: "500px",
      },
      height: {
        type: String,
        default: "300px",
      },
      fetchdata:{
        type:Function,
        required:true
      }
    },
    data() {
      return {
        value: "year",
        options: [
          {
            value: "year",
            label: "近一年",
          },
          {
            value: "month",
            label: "近一月",
          },
        ],
        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: "line",
          data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
        },
        {
          name: "环值比",
          type: "line",
          data: [1.6, 1.6, 1.3, 1.9, 0.1, 3.2, 1.2],
        },
      ];
      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);
    },
    methods: {
      fetchData() {
        this.fetchdata(this.value).then(res => {
            console.log(res.data)
        })
      },
    },
    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>