<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";
const animationDuration = 2600;
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,
    },
    // chartDataII: {
    // },
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: "柱状图",
    },
    yName: {
      type: String,
      default: "柱状图",
    },
    xName: {
      type: String,
      // default: "年份"
    },
    color: {
      type: String,
      default: "#49d4b5",
    },
  },
  data() {
    return {
      chart: null,
      config: {
        color: [],
        title: {
          text: "",
          // subtext:"(千人)",
          subtextStyle: {
            align: "right",
            verticalAlign: "top",
            lineHeight: -30,
          },
          top: "3%",
          left: "1%",
          // padding: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontSize: 16,
          },
        },
        grid: {
          left: 10,
          right: 80,
          bottom: 20,
          top: "23%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          borderWidth: 0,
          textStyle: {
            color: "#ffffff",
          },
        },

        xAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "#C8E1F4",
            },
            position: "bottom",
            type: "category",
            data: [],
            axisLabel: {
              color: "#C8E1F4",
              // margin: 10,
              interval: 0,
              // formatter: function(value) {
              //   //x轴的文字改为竖版显示
              //   var str = value.split("");
              //   return str.join("\n");
              // }
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#555c7a"],
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "#636996",
            },
            nameGap: 20,
            axisLabel: {
              color: "#636996",
            },
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#555c7a"],
              },
            },
            splitLine: {
              lineStyle: {
                color: ["#444b69"],
              },
            },
            splitArea: false,
          },
        ],
        legend: {
          top: 40,
          right: 20,
          textStyle: {
            // 文本样式
            fontSize: 14,
            color: "white",
          },
          itemHeight: 14,
          itemWidth: 14,
          itemStyle: {
            color: ["#4d89ff", "#2852e7"],
          },
          data: [],
        },
        series: [
          {
            name: "患者",
            type: "bar",
            barWidth: 22,
            // barGap: "-10%" /*多个并排柱子设置柱子之间的间距*/,
            // barCategoryGap: "-10%" /*同一系列的柱间距离*/,
            data: [],
            itemStyle: {
              normal: {
                //竖向数值
                label: {
                  show: true,
                  position: "top",
                  color: "#E9EEF4",
                  rotate: 90,
                  offset: [15, 7],
                },
                barBorderRadius: 20,
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //   { offset: 0, color: this.color },
                //   { offset: 1, color: "#39405d" },
                // ]),
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#80ffff",
                    },
                    // {
                    //   offset: 0.4,
                    //   color: "rgba(82,90,132,0.6)"rgba(57,64,93,0.1)
                    // },
                    {
                      offset: 0.7,
                      color: "rgba(210,210,210,0.1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(57,64,93,0.2)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            animationDuration: 2600,
          },
        ],
      },
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
    // chartDataII:{
    //   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||!chartData.data) return;
      const option = Object.assign(this.config, this.chartConfig);
      //单位处理
      // 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: "",
            type: "bar",
            barWidth: 22,
            data: [],
            itemStyle: {
              normal: {
                //竖向数值
                label: {
                  show: true,
                  position: "top",
                  color: "#E9EEF4",
                  rotate: 90,
                  offset: [15, 7],
                },
                barBorderRadius: 20,
                // ]),
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#80ffff",
                    },
                    {
                      offset: 0.7,
                      color: "rgba(210,210,210,0.1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(57,64,93,0.2)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            animationDuration: 2600,
          },
        ];
        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: "#80ffff",
                  },
                });
              }
            }
            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,
                  type: "bar",
                  barWidth: 22,
                  data: [item.value],
                  itemStyle: {
                    normal: {
                      //竖向数值
                      label: {
                        show: true,
                        position: "top",
                        color: "#E9EEF4",
                        rotate: 90,
                        offset: [15, 7],
                      },
                      barBorderRadius: 20,
                      // ]),
                      color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0.1,
                            color: "#2852e7",
                          },
                          {
                            offset: 0.7,
                            color: "rgba(210,210,210,0.1)",
                          },
                          {
                            offset: 1,
                            color: "rgba(57,64,93,0.2)",
                          },
                        ],
                        global: false, // 缺省为 false
                      },
                    },
                  },
                  animationDuration: 2600,
                };
                option.series.push(seriesList);
                option.legend.data.push({
                  name: item.label,
                  icon: "rect",
                  itemStyle: {
                    // color: option.color[1],
                    color: "#2852e7",
                  },
                });
              }
            }
          });
      } else {
        option.xAxis[0].data = series.map((_) => _.name);
        option.series[0].data = series.map((_) => _.value);
      }
      // }
      if (this.yName == "发病率") {
        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;
          }
          // +"/10万"
          return relVal;
        };
      } else if (
        (this.yName && this.yName.indexOf("人数") < 0) ||
        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;
        };
      } else if (this.yName && this.yName.indexOf("人数") >= 0) {
        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.xAxis[0].data = series.map((_) => _.name);
      // option.series[0].data = series.map((_) => _.value);
      // option.series[1].data = series.map(_ => _.value);
      // option.series[1].itemStyle.normal.color.colorStops[0].color = this.color;
      option.title.text = this.title;
      option.xAxis[0].name = this.xName;
      option.yAxis[0].name = this.yName;
      this.chart.setOption(option);
      this.$forceUpdate();
    },
  },
};
</script>
