<template>
  <div class="coreBar">
    <div class="lineBottom" style="height: 320px; width: 100%">
      <operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
    </div>
  </div>
</template>

<script>
import operatingLineBar from './operatingLineBarSaleGroup.vue';
import * as echarts from 'echarts';

export default {
  name: "Container",
  components: { operatingLineBar },
  props: ["chartData"],
  data() {
    return {
      activeButton: 0,
    };
  },
  computed: {
    currentDataSource() {
      console.log('yyyy', this.chartData);

      return this.chartData
    },
    locations() {
      console.log('this.chartData', this.chartData);

      return this.chartData.locations
    },
    // 根据按钮切换生成对应的 chartData
    chartD() {
      // 销量场景数据
      const data = this.currentDataSource;
      const diff = data.diff[0]
      const rate = data.rate[0]
      console.log(this.currentDataSource, 'currentDataSource');

      const salesData = {
        allPlaceNames: this.locations,
        series: [
          // 1. 完成率（折线图）
          // {
          //   name: '完成率',
          //   type: 'line',
          //   yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
          //   lineStyle: {
          //     color: 'rgba(40, 138, 255, .5)',
          //     width: 2
          //   },
          //   itemStyle: {
          //     color: 'rgba(40, 138, 255, 1)',
          //     borderColor: 'rgba(40, 138, 255, 1)',
          //     borderWidth: 2,
          //     radius: 4
          //   },
          //   areaStyle: {
          //     opacity: 0.2,
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0, color: 'rgba(40, 138, 255, .9)' },
          //       { offset: 1, color: 'rgba(40, 138, 255, 0)' }
          //     ])
          //   },
          //   data: data.rates, // 完成率（%）
          //   symbol: 'circle',
          //   symbolSize: 6
          // },
          // 2. 目标（柱状图）
          {
            name: '预算',
            type: 'bar',
            yAxisIndex: 0, // 左侧Y轴（万元）
            label: {
              show: true,
              position: 'top',
              offset: [-30, 0],
              // 固定label尺寸：68px×20px
              width: 68,
              height: 20,
              // 关键：去掉换行，让文字在一行显示，适配小尺寸
              formatter: (params) => {
                // const { rate = 0, diff = 0 } = params.data || {};
                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
                }
              }
            },
            barWidth: 14,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
                ]
              },
              borderRadius: [4, 4, 0, 0],
              borderWidth: 0
            },
            data: data.targets // 目标销量（万元）
          },
          // 3. 实际（柱状图，含达标状态）
          {
            name: '实际',
            type: 'bar',
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              offset: [30, 0],
              // 固定label尺寸：68px×20px
              width: 68,
              height: 20,
              // 关键：去掉换行，让文字在一行显示，适配小尺寸
              formatter: (params) => {

                // const flags = flags || [];
                const currentDiff = diff || 0;
                const currentFlag = flags[0] || 0;
                // 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
                }
              }
            },
            barWidth: 14,
            itemStyle: {
              color: (params) => {
                // 达标状态：1=达标（绿色），0=未达标（橙色）
                const safeFlag = data.flags;
                const currentFlag = safeFlag[params.dataIndex] || 0;
                return currentFlag === 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],
              borderWidth: 0
            },
            data: data.reals // 实际销量（万元）
          }
        ]
      };

      // 毛利率场景数据
      const grossProfitData = {
        series: [
          // 1. 完成率（折线图）
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
            itemStyle: {
              color: 'rgba(40, 138, 255, 1)',
              borderColor: 'rgba(40, 138, 255, 1)',
              borderWidth: 2,
              radius: 4
            },
            areaStyle: {
              opacity: 0.2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(40, 138, 255, .9)' },
                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
              ])
            },
            data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
            symbol: 'circle',
            symbolSize: 6
          },
          // 2. 目标（柱状图）
          {
            name: '预算',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 14,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
                ]
              },
              borderRadius: [4, 4, 0, 0],
              borderWidth: 0
            },
            data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
          },
          // 3. 实际（柱状图）
          {
            name: '实际',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 14,
            itemStyle: {
              color: (params) => {
                const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
                const currentFlag = safeFlag[params.dataIndex] || 0;
                return currentFlag === 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],
              borderWidth: 0
            },
            data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
          }
        ]
      };

      // 根据按钮状态返回对应数据
      return this.activeButton === 0 ? salesData : grossProfitData;
    }
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.coreBar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;

  .barTop {
    display: flex;
    justify-content: flex-end; // 标题左、右侧容器右，整体两端对齐
    align-items: center; // 垂直居中，避免上下错位
    gap: 16px; // 标题与右侧容器的最小间距，防止拥挤
    width: 100%; // 确保占满父容器，实现两端对齐

    .title {
      height: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #000000;
      line-height: 18px;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
      // 标题固定在左侧，不挤压右侧空间
      white-space: nowrap;
    }

    // 1. 右侧容器：包裹图例和按钮组，整体靠右
    .right-container {
      display: flex;
      align-items: center; // 图例和按钮组垂直居中
      gap: 24px; // 图例与按钮组的间距，避免贴紧
      margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
    }

    // 2. 图例：在右侧容器内横向排列
    .legend {
      display: flex;
      gap: 16px; // 图例项之间间距，避免重叠
      align-items: center;
      // 移除原margin-left，避免位置偏移
      margin: 0;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      text-align: left;
      font-style: normal;
      white-space: nowrap; // 防止图例文字换行
    }

    .legend-icon {
      display: inline-block;
    }

    .legend-icon.line {
      width: 12px;
      height: 2px;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        top: -2px;
        left: 3px;
        width: 6px;
        border-radius: 50%;
        height: 6px;
        background-color: rgba(40, 138, 255, 1);
      }
    }

    .legend-icon.square {
      width: 8px;
      height: 8px;
    }

    // 图例颜色
    .yield {
      background: rgba(40, 138, 255, 1);
    }

    .target {
      background: #2889FF;
    }

    .achieved {
      background: rgba(40, 203, 151, 1);
    }

    .unachieved {
      background: rgba(255, 132, 0, 1);
    }

    // 3. 按钮组：在右侧容器内，保留原有样式
    .button-group {
      display: flex;
      position: relative;
      gap: 2px;
      width: 283px;
      align-items: center;
      height: 24px;
      background: #ecf4fe;
      border-radius: 12px;
      // 移除原margin-right，由右侧容器统一控制
      margin: 0;

      .item-button {
        cursor: pointer;
        width: 142px;
        height: 24px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #0b58ff;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        letter-spacing: 8px; // 确保文字间距生效
        padding-left: 8px; // 抵消letter-spacing导致的文字左偏
      }

      .item-button.active {
        width: 142px;
        height: 24px;
        background: #3071ff;
        border-radius: 12px;
        color: #ffffff;
        font-weight: 500;
      }
    }
  }
}
</style>
