<template>
  <div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  components: {},
  data() {
    return {
      myChart: null // 存储图表实例，避免重复创建
    };
  },
  props: {
    // 明确接收的props结构，增强可读性
    refName: {
      type: String,
      default: () => 'verticalBarChart',
    },
    detailData: {
      type: Object,
      default: () => ({
      }),
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.updateChart();
    });
  },

  // 新增：监听 chartData 变化
  watch: {
    // 深度监听数据变化，仅更新图表配置（不销毁实例）
    detailData: {
      handler() {
        console.log(this.chartData, 'chartData');

        this.updateChart();
      },
      deep: true,
      immediate: true // 初始化时立即执行
    }
  },
  methods: {
getRateFlag(rate, real, target) {
  if (isNaN(rate) || rate === null || rate === undefined) return 0;

  // 1. 完成率 >= 100 => 达标
  if (rate >= 100) return 1;

  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
  if (rate === 0 && target === 0) return 1;

  // 其他情况 => 未达标
  return 0;
},
    updateChart() {
      const chartDom = this.$refs[this.refName];
      if (!chartDom) {
        console.error('图表容器未找到！');
        return;
      }

      if (this.myChart) {
        this.myChart.dispose();
      }

      this.myChart = echarts.init(chartDom);
      const diff = this.detailData.diff || 0
      const rate = this.detailData.rate || 0
      const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          // formatter: (params) => {
          //   let html = `${params[0].axisValue}<br/>`;
          //   params.forEach(item => {
          //     const unit = item.seriesName === '完成率' ? '%' : (
          //       ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
          //     );
          //     html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
          //   });
          //   return html;
          // }
        },
        grid: {
          top: 10,
          bottom: 30,
          right: 50,
          left: 30,
          containLabel: true,
          show: false // 隐藏grid背景，避免干扰
        },
        xAxis: {
          // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值
          type: 'value',
          // offset: 0,
          // boundaryGap: true  ,
          // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白
          axisTick: { show: false },
          min: 0,
          //
          splitNumber: 4,
          axisLine: {
            show: true,
            lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
          },
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontSize: 12,
            interval: 0,
            padding: [5, 0, 0, 0]
          },
          // data: xData // 数值轴不需要手动设置data，由series的数据自动生成
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.75)',
            fontSize: 12,
            interval: 0,
            padding: [5, 0, 0, 0]
          },
          axisLine: {
            show: true, // 显示Y轴轴线（关键）
            lineStyle: {
              color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义）
              width: 1, // 轴线宽度
              type: 'solid' // 实线（可选：dashed虚线、dotted点线）
            }
          },
          axisTick: { show: false },
          // padding: [300, 100, 100, 100],
          data: ['实际', '预算'] // y轴分类：实际、预算
        },
        series: [
          {
            // name: '预算',
            type: 'bar',
            barWidth: 24,
            // barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度）
            // 数据长度与yAxis的分类数量匹配（实际、预算各一个值）
            data: [{
              value: this.detailData.real,
              label: {
                show: true,
                position: 'right',
                offset: [0, 25],
                // 固定label尺寸：68px×20px
                width: 68,
                height: 20,
                // 关键：去掉换行，让文字在一行显示，适配小尺寸
                formatter: (params) => {

                  // const flags = flags || [];
                  const currentDiff = diff || 0;
                  const currentFlag = flagValue || 0;
                  // console.log('flags[params.dataIndex]', flags);

                  const prefix = currentFlag === 1 ? '+' : '-';

                  // 根据标志位选择不同的样式类
                  if (currentFlag === 1) {
                    // 达标 - 使用 rate-achieved 样式
                    return `{achieved|${currentDiff}}{text|差值}`;
                  } else {
                    // 未达标 - 使用 rate-unachieved 样式
                    return `{unachieved|${currentDiff}}{text|差值}`;
                  }
                },
                backgroundColor: {
                  type: 'linear',
                  x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
                    { offset: 0.2, color: '#ffffff' },
                    { offset: 1, color: '#ffffff' }
                  ]
                },
                shadowColor: 'rgba(191,203,215,0.5)',
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowOffsetY: 2,
                borderRadius: 4,
                borderColor: '#BFCBD577',
                borderWidth: 0,
                lineHeight: 20,
                rich: {
                  text: {
                    width: 'auto',
                    padding: [5, 10, 5, 0],
                    align: 'center',
                    color: '#464646',
                    fontSize: 11,
                    lineHeight: 20
                  },
                  achieved: {
                    width: 'auto',
                    padding: [5, 0, 5, 10],
                    align: 'center',
                    color: '#76DABE', // 与达标的 offset: 1 颜色一致
                    fontSize: 11,
                    lineHeight: 20
                  },
                  // 未达标样式
                  unachieved: {
                    width: 'auto',
                    padding: [5, 0, 5, 10],
                    align: 'center',
                    color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
                    fontSize: 11,
                    lineHeight: 20
                  }
                }
              },
              itemStyle: {
                color: flagValue === 1
                  ? {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                      { offset: 0, color: 'rgba(174, 239, 224, 1)' },
                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }
                    ]
                  }
                  : {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                      { offset: 0, color: 'rgba(253, 209, 129, 1)' },
                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }
                    ]
                  },
                borderRadius: [4, 4, 0, 0]
              }
            }, {
              value: this.detailData.target,
              label: {
                show: true,
                position: 'right',
                offset: [0, 25],
                // 固定label尺寸：68px×20px
                width: 68,
                height: 20,
                // 关键：去掉换行，让文字在一行显示，适配小尺寸
                formatter: function (params) {
                  return `{value|完成率}{rate|${rate}%}`;
                },
                // 核心样式：匹配CSS需求
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
                    // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
                    // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
                    { offset: 0.2, color: '#ffffff' }, // 主体白色
                    { offset: 1, color: '#ffffff' }
                  ]
                },
                // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
                shadowColor: 'rgba(191,203,215,0.5)',
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowOffsetY: 2,
                // 圆角：4px
                borderRadius: 4,
                // 移除边框
                borderColor: '#BFCBD577',
                borderWidth: 0,
                // 文字垂直居中（针对富文本）
                lineHeight: 20,
                rich: {
                  value: {
                    // 缩小宽度和内边距，适配68px容器
                    width: 'auto', // 自动宽度，替代固定40px
                    padding: [5, 0, 5, 10], // 缩小内边距
                    align: 'center',
                    color: '#464646', // 文字灰色
                    fontSize: 11, // 缩小字体，适配小尺寸
                    lineHeight: 20 // 垂直居中
                  },
                  rate: {
                    width: 'auto',
                    padding: [5, 10, 5, 0],
                    align: 'center',
                    color: '#0B58FF', // 数字蓝色
                    fontSize: 11,
                    lineHeight: 20
                  }
                }
              },
              itemStyle: {
                // 预算的渐变颜色（蓝系渐变）
                color: {
                  type: 'linear',
                  x: 1, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: '#82CCFF' }, // 浅蓝
                    { offset: 1, color: '#4B9DFF' }  // 深蓝
                  ]
                },
                borderRadius: [4, 4, 0, 0],
                borderWidth: 0
              },
            },],

          },
        ]
      };

      option && this.myChart.setOption(option);

      // 窗口缩放适配和销毁逻辑保持不变
      window.addEventListener('resize', () => {
        this.myChart && this.myChart.resize();
      });

      this.$once('hook:destroyed', () => {
        window.removeEventListener('resize', () => {
          this.myChart && this.myChart.resize();
        });
        this.myChart && this.myChart.dispose();
      });
    }
  },
};
</script>
