<template>
  <div
      ref="chartContainer"
      :style="{ width: '100%', height: chartHeight }"
  ></div>
</template>

<script>
export default {
  name: 'JilinCityBar',
  props: {
    chartHeight: {type: String, default: '220px'},
    interval: {type: Number, default: 2500} // 滚动间隔(ms)
  },
  data() {
    return {
      myChart: null,
      timer: null,
      pageSize: 4,
      cursor: 0,

      /* —— 数据 —— */
      xData: [
        '长春市', '吉林市', '四平市', '辽源市',
        '通化市', '白山市', '松原市', '白城市', '延边自治州'
      ],
      values: [22, 10, 120, 2222, 1111, 3333, 123, 871, 61]
    };
  },
  watch: {
    chartHeight() {
      this.myChart && this.myChart.resize();
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    /* ---------- 立方体形状 ---------- */
    registerCubeShapes() {
      const dx = 0;
      const g = this.$echarts.graphic;

      const L = g.extendShape({
        shape: {x: 0, y: 0},
        buildPath(ctx, s) {
          const {x, y, xAxisPoint} = s;
          ctx.moveTo(x + dx, y)
              .lineTo(x - 9 + dx, y - 9)
              .lineTo(xAxisPoint[0] - 9 + dx, xAxisPoint[1] - 9)
              .lineTo(xAxisPoint[0] + dx, xAxisPoint[1])
              .closePath();
        }
      });
      const R = g.extendShape({
        shape: {x: 0, y: 0},
        buildPath(ctx, s) {
          const {x, y, xAxisPoint} = s;
          ctx.moveTo(x + dx, y)
              .lineTo(xAxisPoint[0] + dx, xAxisPoint[1])
              .lineTo(xAxisPoint[0] + 12 + dx, xAxisPoint[1] - 6)
              .lineTo(x + 12 + dx, y - 6)
              .closePath();
        }
      });
      const T = g.extendShape({
        shape: {x: 0, y: 0},
        buildPath(ctx, s) {
          const {x, y} = s;
          ctx.moveTo(x + dx, y)
              .lineTo(x + 12 + dx, y - 6)
              .lineTo(x + 3 + dx, y - 15)
              .lineTo(x - 9 + dx, y - 9)
              .closePath();
        }
      });
      g.registerShape('CubeLeft', L);
      g.registerShape('CubeRight', R);
      g.registerShape('CubeTop', T);
    },

    /* ---------- 初始化 ---------- */
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chartContainer);
      this.registerCubeShapes();
      this.render();              // 首次渲染
      if (this.xData.length > this.pageSize) this.startScroll();
    },

    /* ---------- 配置 & 渲染 ---------- */
    render() {
      const TEAL_LIGHT = '#86F3CE';
      const TEAL_DEEP = '#1EAF9A';

      const option = {
        backgroundColor: 'transparent',
        animationDurationUpdate: 600,
        animationEasingUpdate: 'cubicOut',

        grid: {left: 30, right: 30, bottom: 20, top: 40, containLabel: true},

        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'},
          formatter: d =>
              `${d[0].axisValue}<br/>
             <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${TEAL_LIGHT}"></span>
             数量 <span style="padding-left:13px;">${d[0].value}</span>`
        },

        legend: {
          data: [{name: '数量', itemStyle: {color: TEAL_LIGHT}}],
          textStyle: {fontSize: 14, color: '#A7C4F6'},
          itemWidth: 10, itemHeight: 8, top: '1%', right: '3%'
        },

        /* ——— 关键：dataZoom 控制窗口宽度=4 ——— */
        dataZoom: [{
          type: 'inside',
          zoomLock: true,
          startValue: 0,
          endValue: this.pageSize - 1
        }],

        xAxis: [{
          type: 'category',
          data: this.xData,
          axisLine: {lineStyle: {color: '#FFFFFF80'}},
          axisTick: {show: false},
          axisLabel: {fontSize: 14, color: '#A7C4F6'}
        }],

        yAxis: [{
          type: 'value',
          min: 0,
          splitLine: {lineStyle: {color: '#FFFFFF20', type: 'dashed'}},
          axisLine: {show: false},
          axisTick: {show: false},
          axisLabel: {fontSize: 12, color: '#A7C4F6'}
        }],

        series: [
          {
            type: 'custom',
            name: '数量',
            renderItem: (p, api) => {
              const loc = api.coord([api.value(0), api.value(1)]);
              const axis = api.coord([api.value(0), 0]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: TEAL_DEEP},
                        {offset: 1, color: '#157B6E'}
                      ])
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: TEAL_LIGHT},
                        {offset: 1, color: TEAL_DEEP}
                      ])
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                    style: {fill: TEAL_LIGHT}
                  }
                ]
              };
            },
            data: this.values,
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#fff',
              offset: [0, -8],
              fontWeight: 'bold'
            }
          },
          {
            type: 'bar',
            data: this.values,
            itemStyle: {color: 'transparent'},
            name: '数量'
          }
        ]
      };

      this.myChart.setOption(option);
    },

    /* ---------- 平滑滚动 ---------- */
    startScroll() {
      const len = this.xData.length;
      this.timer = setInterval(() => {
        this.cursor = (this.cursor + 1) % len;
        this.myChart.setOption({
          dataZoom: [{
            startValue: this.cursor,
            endValue: this.cursor + this.pageSize - 1
          }]
        });
      }, this.interval);
    }
  }
};
</script>
