import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
import fa from "element-ui/src/locale/lang/fa";
export default {
  props: {
    id: {
      type: String,
      default: 'bar'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '1月',
            value: '10'
          },
          {
            name: '2月',
            value: '19'
          }
        ];
      }
    },
    unit: {
      type: String,
      default: '单位：万元'
    },
    color: {
      type: Array,
      default: function () {
        return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
      }
    },
    barBorderRadius: {
      type: Array,
      default: function () {
        return [0, 0, 0, 0]
      }
    }
  },
  data () {
    return {
      chart: null
    };
  },
  mounted () {
    setTimeout(()=>{
      this.initChart();
    },2000)
  },
  computed: {
  },
  methods: {
    // 设置监听器 页面尺寸变化重新绘制图表
    initResizeCallBack () {
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.id), () => {
        this.$nextTick(() => {
          this.chart.resize();
        });
      });
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chartSetOption();
    },
    chartSetOption () {
      let xAxisData = [];
      let data = [];
      let max = [];
      this.data.forEach(item => {
        xAxisData.push(item.name)
        data.push(item.value)
      });
      data.forEach(item => {
        max.push(Math.max(...data))
      });
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 9, shape.y - 9];
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
              .moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath();
        },
      });
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
          const c4 = [shape.x + 18, shape.y - 9];
          ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 9];
          const c3 = [shape.x + 9, shape.y - 18];
          const c4 = [shape.x - 9, shape.y - 9];
          ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      const MAX = max;
      const VALUE = data;
      const option = {
        // backgroundColor: "#010d3a",
        title: {
          text: "",
          top: 32,
          left: 18,
          textStyle: {
            color: "#00F6FF",
            fontSize: 24,
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
          z: 22,
        },
        xAxis: {
          splitArea: {
            show: false,
            areaStyle: {
              color: ['RGBA(13, 31, 64, 1)']
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(18, 40, 83, 1)'],
              width: 100
            }
          },
          type: "category",
          gridIndex: 0,
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: 'rgba(185, 211, 235, 1)'
          }
        },
        yAxis: {
          name: this.unit,
          type: "value",
          nameTextStyle: {
            color: 'rgba(185, 211, 235, 1)'
          },
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgba(185, 211, 235, 1)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#27b4c2",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#11366e",
            },
          },
        },
        series: [
          {
            type: "custom",
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "rgba(7,29,97,.6)",
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "rgba(10,35,108,.7)",
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "rgba(11,42,106,.8)",
                    },
                  },
                ],
              };
            },
            data: MAX,
          },
          {
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#10fafa",
                        },
                        {
                          offset: 1,
                          color: "#0a97a1",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#0a97a2",
                        },
                        {
                          offset: 1,
                          color: "#10fafa",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#10fcfc",
                        },
                        {
                          offset: 1,
                          color: "#10fcfc",
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: VALUE,
          },
          {
            type: "bar",
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              color: "transparent",
            },
            data: MAX,
          },
        ],
      };

      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};
