<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: "趋势图",
    },
    yName: {
      type: String,
      default: "趋势图",
    },
    xName: {
      type: String,
      default: "年份",
    },
  },
  data() {
    return {
      chart: null,
      config: {
        color: ["#4d89ff", "rgba(236, 128, 141, 1)"],
        title: {
          text: "",
          top: "3%",
          left: "1%",
          // padding: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontSize: 16,
          },
        },

        //绘图大小
        grid: {
          left: 10,
          right: 38,
          bottom: 20,
          top: "23%", //grid 组件离容器上侧的距离
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          borderWidth:0,
           textStyle: {
            color: "#ffffff",
          },
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
          // formatter: function (params) {
          //   console.log("提示框单位",params)
          //   // if()
          //       var relVal = params[0].name;
          //       for (var i = 0, l = params.length; i < l; i++) {
          //           relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
          //       }
          //       console.log(relVal)
          //       // return relVal;
          //   }
        },
        xAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "white",
            },
            position: "bottom",
            data: [],
            boundaryGap: false,
            axisLabel: {
              color: "white",
              margin: 20,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#40465f"],
              },
            },
            axisPointer: {
              // value: "2021年",
              value: "2021年",
              show: true,
              snap: true, //吸附点上
              lineStyle: {
                color: "#80ffff",
                type: "dashed",
                width: 1,
                cap: "round",
                join: "round",
              },
              link: { xAxisIndex: "all" },
              triggerTooltip: true,
              label: {
                show: false,
                // formatter: function (params) {
                //   console.log("标签值",params)
                //   return echarts.format.formatTime("yyyy-MM-dd", params.value);
                // },
                backgroundColor: "#7581BD",
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "white",
            },
            nameGap: 19,
            axisLabel: {
              color: "white",
              // formatter:""
            },
            axisTick: {
              //刻度
              show: false,
            },
            axisLine: false,
            splitLine: {
              lineStyle: {
                color: ["#40465f"],
              },
            },
            splitArea: false,
            boundaryGap: false,
          },
        ],
        legend: {
          top: 40,
          right: 20,
          textStyle: {
            // 文本样式
            fontSize: 14,
            color: "white",
          },
          itemHeight: 14,
          itemWidth: 14,
          itemStyle: {
            color: ["#4d89ff", "#2852e7"],
          },
          data: [],
        },
        // axisPointer: {
        //   // value: "2021年",
        //   show: true,
        //   snap: true, //吸附点上
        //   label: {
        //     show: false,
        //   },
        //   lineStyle: {
        //     color: "#80ffff",
        //     type: "dashed",
        //     width: 1,
        //   },
        // },
        series: [
          {
            name: "",
            smooth: true,
            symbol: "circle",
            showSymbol: false, //鼠标触发显示折点
            type: "line",
            data: [],
            animationDuration: 2800,
            animationEasing: "cubicInOut",
            lineStyle: {
              color: "#4d89ff",
            },
          },
        ],
      },
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      if (!chartData.data) return;
      let option = {};
      option = this.config;
      // if (chartData.data.length) {
        const series = chartData.data.map((v) => {
          if (this.xName && this.xName == "年份") {
            return {
              name: v.name + "年",
              value: Number(v.value),
            };
          }
          return {
            name: v.name,
            value: Number(v.value),
          };
        });
        //堆叠图 数据结构有label
        if (chartData.data.find((_) => _.label)) {
          //清空
          option.series = [
            {
              name: "",
              smooth: true,
              symbol: "circle",
              showSymbol: false, //鼠标触发显示折点
              type: "line",
              data: [],
              animationDuration: 2800,
              animationEasing: "cubicInOut",
              // //折点颜色
              // itemStyle: {
              //   color: "#80ffff"
              // },
              // //折线颜色
              // lineStyle: {
              //   color: option.color[0]
              // }
            },
          ];
          option.xAxis[0].data = [];
          //基线
          (option.xAxis[0].axisPointer = {
            // value: "2021年",
            value: "2021年",
            show: true,
            snap: true, //吸附点上
            lineStyle: {
              color: "#80ffff",
              type: "dashed",
              width: 1,
              cap: "round",
              join: "round",
            },
            link: { xAxisIndex: "all" },
            triggerTooltip: true,
            label: {
              show: false,
              backgroundColor: "#7581BD",
            },
          }),
            chartData.data.forEach((item, index) => {
              if (index == 0) {
                option.series[0].name = item.label;
                if (option.legend.data) {
                  option.legend.data.push({
                    name: item.label,
                    icon: "rect",
                    itemStyle: {
                      color: "#4d89ff",
                    },
                  });
                }
              }
              if (item.label == option.series[0].name) {
                option.series[0].data.push(item.value);
                option.xAxis[0].data.push(item.name + "年");
              } else {
                //数组第一项处理
                if (option.series.find((_) => _.name == item.label)) {
                  const optionList = option.series.find(
                    (_) => _.name == item.label
                  );
                  optionList.data.push(item.value);
                  // optionList.data = series.map(_ => _.value);
                } else {
                  //数组其他项处理
                  const seriesList = {
                    name: item.label,
                    smooth: true,
                    symbol: "circle",
                    showSymbol: false, //鼠标触发显示折点
                    type: "line",
                    data: [item.value],
                    animationDuration: 2800,
                    animationEasing: "cubicInOut",
                    // //折点颜色
                    // itemStyle: {
                    //   color: "#80ffff"
                    // },
                    // //折线颜色
                    // lineStyle: {
                    //   color: option.color[1]
                    // }
                  };
                  option.series.push(seriesList);
                  option.legend.data.push({
                    name: item.label,
                    icon: "rect",
                    itemStyle: {
                      color: option.color[1],
                    },
                  });
                }
              }
            });
        } else {
          option.xAxis[0].data = series.map((_) => _.name);
          option.series[0].data = series.map((_) => _.value);
        }
      // }
      if (this.yName && this.yName.indexOf("人数") < 0) {
        option.yAxis[0].axisLabel.formatter = "{value} %";
        option.tooltip.formatter = function (params) {
          var relVal = params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal +=
              "<br/>" +
              params[i].marker +
              params[i].seriesName +
              " : " +
              params[i].value +
              "%";
          }
          return relVal;
        };
      }
      if (this.yName && this.yName.indexOf("人数") >= 0) {
        if (this.title.indexOf("性别筛查完成人数") >= 0) {
          option.tooltip.backgroundColor = "rgba(242,242,242,0.3)";
          option.tooltip.formatter = function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                // params[i].marker +
                params[i].seriesName +
                " 筛查完成人数" +
                params[i].value;
            }
            return relVal;
          };
          this.$nextTick(() => {
            let len = this.config.xAxis[0].data.length - 1;
            this.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0, //这行不能省
              // name: params.name
              dataIndex: len, //第 lightIndex   柱子高亮
            });
            this.$forceUpdate();
          });
        }
        else if (this.title.indexOf("中高危人数") >= 0) {
          option.tooltip.backgroundColor = "rgba(242,242,242,0.3)";
          option.tooltip.formatter = function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                // params[i].marker +
                params[i].seriesName +
                " 中高危人数" +
                params[i].value;
            }
            return relVal;
          };
          this.$nextTick(() => {
            let len = this.config.xAxis[0].data.length - 1;
            this.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0, //这行不能省
              dataIndex: len, //第 lightIndex   柱子高亮
            });
            this.$forceUpdate();
          });
        } else {
          option.tooltip.formatter = function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                params[i].marker +
                params[i].seriesName +
                " : " +
                params[i].value +
                "人";
            }
            return relVal;
          };
        }
      }
      option.title.text = this.title;
      option.xAxis[0].name = this.xName;
      option.yAxis[0].name = this.yName;
      this.chart.setOption(option);

      this.$forceUpdate();
    },
  },
};
</script>
