<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: '300px', width: '500px' }"
  />
</template>
<!-- 折柱混合图表 -->
<script>
import tdTheme from "./../theme.json"; // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
export default {
  name: "mixChart",
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    unit: {
      // 单位
      type: String,
      default: "",
    },
    colors: {
      // 颜色
      type: Array,
      default: () => {
        return ["#01b4ff", "#0337ff"];
      },
    },
    axisLineColor: {
      // 轴线颜色
      type: String,
      default: "#101d5d",
    },
    fontColor: {
      // 轴线上文字颜色
      type: String,
      default: "#000fff",
    },
    labelColor: {
      // 图形上文本标签颜色
      type: String,
      default: "#47c8b2",
    },
    smooth: {
      type: Boolean,
      default: true,
    }, // 平滑
    seriesData: {
      // 数据
      type: Array,
      default: () => {
        return [];
      },
    },
    xAxisData: {
      // X轴数据
      type: Array,
      default: () => {
        return [];
      },
    },
    yAxisData: {
      // y轴数据
      type: Array,
      default: () => {
        return [];
      },
    },
    legend: {
      //图例数据
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          orient: "horizontal",
          bottom: "auto",
          top: "bottom",
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          textStyle: {
            width: "300",
            color: "#000",
            fontSize: 12,
          },
          // data: [],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              show: true,
              color: "#000",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show:true,
            axisLabel: {
              formatter: "{value}",
              fontSize: 12,
              color: "#000",
            },
            show: true,
            position: "left",
            axisLine: {
              show: false,
            },
            splitLine: {
              //多条横线
              show: true,
            },
          },
          {
            type: "value",
            show:true,
            axisLabel: {
              formatter: "{value} %",
              fontSize: 12,
              color: "#000",
            },
            position: "right",
            axisLine: {
              show: false,
            },
            splitLine: {
              //多条横线
              show: true,
            },
          },
          {
            type: "value",
            show: false,
          },
        ],
        series: [],
        grid: {
          left: 30,
          right: 30,
          bottom: 30,
          top: 10,
          containLabel: true,
        },
      },
    };
  },
  watch: {
    xAxisData(newVal) {
      this.option.xAxis[0].data = newVal;
    },
    yAxisData(newVal) {
      this.option.yAxis = newVal;
    },
    legend(newVal) {
      this.option.legend.data = newVal;
      // this.refreshEchart()
    },
    unit(newVal) {
      // this.option.yAxis[0].name = newVal
      // this.refreshEchart()
    },
    seriesData: {
      handler(newVal) {
        const newSeries = [];
        let index = 1
        for (const item of newVal) {
          // const series = {
          //   ...item,
          //   name: item.name,
          //   type: item.type,
          //   data: item.data,
          // };
          let series = {}
          if( item.type==='bar'){
            index++
            series = {
              ...item,
            barWidth: 15,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            }
          } else if( item.type === 'line'){
            series = {
              ...item,
              tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            yAxisIndex: index,
            smooth: false, // 折线平滑
            symbol: "circle", // 控制折线处小点
            }
          }
          newSeries.push(series);
        }
        this.$set(this.option, "series", newSeries);
        // this.refreshChart();
      },
      deep: true,
    },
    option: {
      handler(newVal) {
        // 设置true清空echart缓存
        this.chart.setOption(newVal, true);
      },
      deep: true,
    },
  },
  mounted() {
    // debugger
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, "tdTheme");
      if (this.option.xAxis[0].data?.length) {
        this.chart.setOption(this.option, true);
      } else {
        this.chart.setOption({}, true);
      }
    },
  },
};
</script>

<style scoped>
</style>