<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 15, //柱状图宽
    zWidth: 8, //阴影折角宽
    zHeight: 4, //阴影折角高
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];

    ctx.moveTo(p0[0], p0[1]);
    ctx.lineTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.lineTo(p0[0], p0[1]);
    ctx.closePath();
  },
});
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 14,
    zWidth: 10,
    zHeight: 8,
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];
    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
    const p6 = [
      shape.x + shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight / 2,
    ];
    const p7 = [
      shape.x - shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight,
    ];
    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p5[0], p5[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p4[0], p4[1]);

    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p7[0], p7[1]);
    ctx.lineTo(p1[0], p1[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.closePath();
  },
});

// 注册图形元素
echarts.graphic.registerShape("leftRect", leftRect);
echarts.graphic.registerShape("rightRect", rightRect);

export default {
  name: "Histogram",
  props: {
    getDataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      labels: ["骨科", "心胸外科", "普通外科", "神经外科", "整形外科"],
      seriesData: [
        {
          label: "骨科",
          value: [32],
          isHave: false,
        },
        {
          label: "心胸外科",
          value: [24],
          isHave: false,
        },
        {
          label: "普通外科",
          value: [42],
          isHave: false,
        },
        {
          label: "神经外科",
          value: [20],
          isHave: false,
        },
        {
          label: "整形外科",
          value: [18],
          isHave: false,
        },
      ],
      colors: [
        [
          { offset: 0, color: "rgba(26, 132, 191, 1)" },
          { offset: 1, color: "rgba(52, 163, 224, 0.5)" },
        ],
        [
          { offset: 0, color: "rgba(137, 163, 164, 1)" },
          { offset: 1, color: "rgba(137, 163, 164, 0.5)" },
        ],
        [
          { offset: 0, color: "rgba(44, 166, 166, 1)" },
          { offset: 1, color: "rgba(44, 166, 166, 0.5)" },
        ],
        [
          { offset: 0, color: "rgba(34, 66, 186, 1)" },
          { offset: 1, color: "rgba(34, 66, 186, 0.5)" },
        ],
        [
          { offset: 0, color: "rgba(250,200,88, 1)" },
          { offset: 1, color: "rgba(250,200,88, 0.6)" },
        ],
      ],
      option: {},
      myChart: null,
    };
  },
  watch: {
    getDataList(newVal) {
      if (this.$store.getters.isMock) {
        return;
      }
      if (newVal.length) {
        this.wrapData(newVal);
        this.initOption();
        // 手动更新数据
        this.option && this.myChart && this.myChart.setOption(this.option);
      }
    },
  },
  created() {
    // 包装接口数据--初始化调用
    if (this.getDataList.length) {
      if (this.$store.getters.isMock) {
        console.log("sssxx");
      } else {
        this.wrapData(this.getDataList);
      }
    }
    this.initOption();
  },
  methods: {
    initOption() {
      this.option = {
        grid: {
          height: "80%",
          top: "8%",
          // bottom: "5%",
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#fff",
          },
          data: this.labels,
          axisLabel: {
            interval: 0,
            rotate: -20, // 表示倾斜的角度
            color: "#fff",
          },
        },
        legend: {
          // data: this.getlegendData(),
          // right: "25",
          // top: "18",
          // icon: "rect",
          // itemHeight: 10,
          // itemWidth: 10,
          // textStyle: {
          //   color: "red",
          // },
          show: false,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: ["#fff"],
            },
          },
        },
        series: this.getSeriesData(),
      };
    },
    getlegendData() {
      let that = this;
      const data = [];
      this.labels.forEach((item, index) => {
        data.push({
          name: item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              that.colors[index]
            ),
          },
        });
      });
      return data;
    },
    getSeriesData() {
      let that = this;
      const data = [];
      this.seriesData.forEach((item, index) => {
        data.push({
          type: "custom",
          name: item.label,
          renderItem: function (params, api) {
            return that.getRenderItem(params, api);
          },
          label: {
            show: true, // 显示数值
            position: "insideTop", // 数值显示的位置
            textStyle: {
              //数值样式
              color: "#fff",
            },
            formatter: function (data) {
              let txt = "";
              that.seriesData.forEach((a) => {
                if (a.label == data.seriesName && !a.isHave) {
                  a.isHave = true;
                  txt = data.value;
                }
              });
              return txt;
            },
          },
          data: item.value,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                that.colors[index]
              );
            },
          },
        });
      });
      console.log("data总:", data);
      return data;
    },
    getRenderItem(params, api) {
      const index = params.seriesIndex;
      let location = api.coord([api.value(0) + index, api.value(1)]);
      //   var extent = api.size([0, api.value(1)]);
      return {
        type: "group",
        children: [
          {
            type: "leftRect",
            shape: {
              api,
              xValue: api.value(0) + index,
              yValue: api.value(1),
              x: location[0],
              y: location[1],
            },
            style: api.style(),
          },
          {
            type: "rightRect",
            shape: {
              api,
              xValue: api.value(0) + index,
              yValue: api.value(1),
              x: location[0],
              y: location[1],
            },
            style: api.style(),
          },
        ],
      };
    },
    wrapData(list) {
      let that = this;
      that.labels = [];
      that.seriesData = [];
      list.forEach((item) => {
        that.labels.push(item.deptName);
        that.seriesData.push({
          label: item.deptName,
          value: [item.deptCount],
          isHave: false,
        });
      });
    },
  },
  mounted() {
    var chartDom = document.getElementById("main");
    this.myChart = echarts.init(chartDom);
    this.option && this.myChart.setOption(this.option);
  },
};
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
