<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)
    districtName: { type: String, default: null }, // 当前选中的区县
    districtData: { type: Object, default: () => ({}) }, // 区县数据
    dataType: { type: String, default: 'patents' } // 数据类型：patents(专利数量)、research(研究机构)、conversion(转化数量)
  },
  data() {
    return {
      myChart: null,
      timer: null,
      pageSize: 4,
      cursor: 0,
      
      // 默认数据，当没有提供区县数据时使用
      defaultXData: [
        '朝阳区', '南关区', '宽城区', '二道区',
        '绿园区', '双阳区', '九台区', '农安县'
      ],
      defaultValues: [220, 180, 190, 170, 185, 120, 140, 130]
    };
  },
  computed: {
    // 根据props计算实际要显示的数据
    xData() {
      return Object.keys(this.districtData).length > 0 ? Object.keys(this.districtData) : this.defaultXData;
    },
    values() {
      if (Object.keys(this.districtData).length === 0) {
        return this.defaultValues;
      }
      
      // 根据dataType选择要显示的数据类型
      return this.xData.map(district => {
        if (this.districtData[district]) {
          return this.districtData[district][this.dataType] || 0;
        }
        return 0;
      });
    },
    // 图表标题
    chartTitle() {
      switch(this.dataType) {
        case 'research':
          return '研究机构数量';
        case 'conversion':
          return '专利转化数量';
        default:
          return '专利数量';
      }
    },
    // 高亮的区县索引
    highlightIndex() {
      return this.districtName ? this.xData.indexOf(this.districtName) : -1;
    }
  },
  watch: {
    chartHeight() { 
      this.myChart && this.myChart.resize(); 
    },
    districtName() {
      this.updateChart();
    },
    dataType() {
      this.updateChart();
    }
  },
  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();
    },
    
    /* ---------- 更新图表 ---------- */
    updateChart() {
      if (this.myChart) {
        // 停止自动滚动
        clearInterval(this.timer);
        
        // 如果有选中的区县，确保它在视图中
        if (this.highlightIndex >= 0) {
          // 计算滚动位置，使选中的区县在视图中
          const startIdx = Math.max(0, Math.min(this.highlightIndex, this.xData.length - this.pageSize));
          this.cursor = startIdx;
          
          this.myChart.setOption({
            dataZoom: [{
              startValue: startIdx,
              endValue: startIdx + this.pageSize - 1
            }]
          });
        }
        
        // 更新图表数据
        this.myChart.setOption({
          xAxis: [{
            data: this.xData
          }],
          series: [
            {
              data: this.values,
              itemStyle: {
                color: (params) => {
                  // 如果是当前选中的区县，使用高亮颜色
                  if (this.highlightIndex === params.dataIndex) {
                    return '#FFE777'; // 高亮黄色
                  }
                  return undefined; // 使用默认颜色
                }
              }
            },
            {
              data: this.values
            }
          ]
        });
        
        // 重新启动自动滚动
        if (this.xData.length > this.pageSize) this.startScroll();
      }
    },

    /* ---------- 配置 & 渲染 ---------- */
    render() {
      const TEAL_LIGHT = '#86F3CE';
      const TEAL_DEEP  = '#1EAF9A';
      const HIGHLIGHT_COLOR = '#FFE777'; // 高亮颜色

      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:${d[0].color || TEAL_LIGHT}"></span>
             ${this.chartTitle} <span style="padding-left:13px;">${d[0].value}</span>`
        },

        legend: {
          data: [{ name: this.chartTitle, 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: this.chartTitle,
            renderItem: (p, api) => {
              const loc = api.coord([api.value(0), api.value(1)]);
              const axis = api.coord([api.value(0), 0]);
              
              // 确定颜色 - 如果是高亮项目则使用高亮颜色
              const isHighlight = this.highlightIndex === api.dataIndex();
              const topColor = isHighlight ? HIGHLIGHT_COLOR : TEAL_LIGHT;
              const deepColor = isHighlight ? '#E5C848' : TEAL_DEEP;
              const sideColor = isHighlight ? '#B19A3A' : '#157B6E';
              
              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: deepColor},
                        {offset: 1, color: sideColor}
                      ])
                    }
                  },
                  {
                    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: topColor},
                        {offset: 1, color: deepColor}
                      ])
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                    style: {fill: topColor}
                  }
                ]
              };
            },
            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.chartTitle
          }
        ]
      };

      this.myChart.setOption(option);
    },

    /* ---------- 平滑滚动 ---------- */
    startScroll() {
      clearInterval(this.timer); // 先清除之前的定时器
      
      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>
