<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
        :xAxisData="xAxisData"
        :seriesData="seriesData"
        :yAxisData="yAxisData"
        :legend="legend"
        width="600px"
        height="400px"
      />
    </div>
  </div>
</template>

<script>
import MixChart from "../../../components/echart/barChart/MixChart.vue";
export default {
  name: "layoutChartSelect",
  components: {
    MixChart,
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    width:{
      type: String,
      default: "500px"
    },
    height:{
      type: String,
      default: "250px"
    }
  },
  data() {
    return {
      value: "12",
      options: [
        { value: "12", label: "近一年" },
        { value: "1", label: "近一月" },
      ],
      seriesData: [],
      xAxisData: [],
      yAxisData: [],
      legend: [],
    };
  },
  mounted() {
    setTimeout(() => {
      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,
          ],
        },
      ];
      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
      this.yAxisData = [
        {
          type: "value",
          show: true,
          axisLabel: {
            formatter: "{value} ml",
            fontSize: 12,
            color:'#000'
          },
          axisLine: {
            show: false,
          },
          splitLine: { //多条横线
            show: true
          },
          interval: 20,
        },
        {
          type: "value",
          show: true,
          axisLabel: {
            formatter: "{value} °C",
            fontSize: 12,
            color:'#000'
          },
          splitLine: {
            //多条横线
            show: true,
          },
          axisLine: {
            show: false,
          },
          interval: 20,
        },
      ];
      this.legend = ["Evaporation", "Precipitation", "Temperature"];
    });
  },
  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,
            ],
          },
        ];
      }
    },
  },
};
</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>