<template>
  <div class="coreItem">
    <!-- 单独渲染第一个item -->
    <div class="item" v-for="(item, index) in itemList">
      <div class="unit">{{ item.unit }}</div>
      <div class="item-content">
        <div class="content-wrapper">
          <div class="left">
            <div class="number">{{ item.targetValue }}</div>
            <div class="title">预算值</div>
          </div>
          <div class="line"></div>
          <div class="right">
            <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
              {{ item.currentValue }}
            </div>
            <div class="title">实际值</div>
          </div>
        </div>

        <div class="progress-group">
          <div class="progress-container">
            <!-- 进度条颜色和宽度动态绑定 -->
            <div class="progress-bar" :style="{
              width: itemList[0].progress + '%',
              background: getColor(item.progress)
            }"></div>
          </div>
        </div>

        <div class="yield" style="display: flex;justify-content: space-between;">
          <div class="progress-percent">完成率</div>
          <!-- 百分比颜色动态绑定 -->
          <div class="progress-percent" :style="{
            color: getColor(item.progress)
          }">
            {{ item.progress }}%
          </div>
        </div>
      </div>
    </div>
    <div class="item" v-for="(item, index) in itemList2" :key="index" :style="index === 0 ? { width: '100%' } : {}">
      <div class="unit">{{ item.unit }}</div>
      <div class="item-content">
        <div class="content-wrapper">
          <div class="left">
            <div class="number">{{ item.targetValue }}</div>
            <div class="title">预算值</div>
          </div>
          <div class="line"></div>
          <div class="right">
            <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
              {{ item.currentValue }}
            </div>
            <div class="title">实际值</div>
          </div>
        </div>

        <div class="progress-group">
          <div class="progress-container" :style="index === 0 ? { width: '100%' } : {}">
            <!-- 进度条颜色和宽度动态绑定 -->
            <div class="progress-bar" :style="{
              width: itemList2[0].progress + '%',
              background: getColor(item.progress)
            }"></div>
          </div>
        </div>

        <div class="yield" style="display: flex;justify-content: space-between;">
          <div class="progress-percent">完成率</div>
          <!-- 百分比颜色动态绑定 -->
          <div class="progress-percent" :style="{
            color: getColor(item.progress)
          }">
            {{ item.progress }}%
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Container",
  components: {},
  props: ["orderOutput","dateData"],
  data() {
    return {
      progress: 90, // 进度值基础参数
      itemList: [],
      itemList2: []//7月以后得
    };
  },
  watch: {
    orderOutput: {
      handler(newValue, oldValue) {
        this.getItemData(newValue)
      },
      deep: true // 若对象内属性变化需触发，需加 deep: true
    }
  },
  methods: {
    getItemData(data) {
      // 26年7月份以后用海外组的那个
      if (this.dateData.startTime>=new Date('2026-07-01 00:00:00').getTime()) {
        this.itemList2 = [
        {
          unit: "总进度",
          targetValue: data.totalProgress.target,
          currentValue: data.totalProgress.real,
          progress: data.totalProgress.rate,
        },
        {
          unit: "一组",
          targetValue: data.group1.target,
          currentValue: data.group1.real,
          progress: data.group1.rate
        },
        {
          unit: "二组",
          targetValue: data.group2.target,
          currentValue: data.group2.real,
          progress: data.group2.rate
        },
        {
          unit: "海外组",
          targetValue: data.overseaGroup.target,
          currentValue: data.overseaGroup.real,
          progress: data.overseaGroup.rate
        }
      ]
      this.itemList = []
      }else{
        this.itemList = [
        {
          unit: "总进度",
          targetValue: data.totalProgress.target,
          currentValue: data.totalProgress.real,
          progress: data.totalProgress.rate,
        },
        {
          unit: "一组",
          targetValue: data.group1.target,
          currentValue: data.group1.real,
          progress: data.group1.rate
        },
        {
          unit: "二组",
          targetValue: data.group2.target,
          currentValue: data.group2.real,
          progress: data.group2.rate
        },
        {
          unit: "三组",
          targetValue: data.group3.target,
          currentValue: data.group3.real,
          progress: data.group3.rate
        },
        {
          unit: "四组",
          targetValue: data.group4.target,
          currentValue: data.group4.real,
          progress: data.group4.rate
        },
        {
          unit: "五组",
          targetValue: data.group5.target,
          currentValue: data.group5.real,
          progress: data.group5.rate
        }
      ]
      this.itemList2 = []
      }
    },
    // 颜色判断核心方法：实际值≥预算值返回绿色，否则返回橙色
    getColor(progress) {
      return progress >= 100
        ? "rgba(98, 213, 180, 1)"
        : "rgba(249, 164, 74, 1)";
    },
    getTableData(data) {
      this.$emit('handleShowTable',data)

    }
  }
};
</script>

<style scoped lang="scss">
/* 第一个item单独样式（可选） */
.item:first-of-type {
  // background: #f0f7ff; /* 示例背景色 */
}

.coreItem {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.item {
  width: 227px;
  height: 122px;
  background: #f9fcff;
  padding: 12px;
  box-sizing: border-box;

  .unit {
    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;
  }

  .groupName {
    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;
  }

  .left-target {
    .number {
      height: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: rgba(103, 103, 103, 0.79);
      line-height: 22px;
      text-align: center;
      font-style: normal;
    }

    .title {
      height: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #868687;
      line-height: 14px;
      text-align: center;
      font-style: normal;
    }
  }

  .left-real {
    .number {
      height: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      line-height: 22px;
      text-align: center;
      font-style: normal;
      /* 颜色由动态绑定控制，此处不设置固定值 */
    }

    .title {
      height: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #868687;
      line-height: 14px;
      text-align: center;
      font-style: normal;
    }
  }

  .right {
    width: 100%;
      .bg-default {
          background-image: url("../../../assets/img/order-item-bg.png");
        }

        // 实际值 >= 预算值：绿色背景图
        .bg-green {
          background-image: url("../../../assets/img/order-item-greenbg.png");
        }
    .groupName {
      width: 129px;
      height: 32px;
      // background: url(../../../assets/img/order-item-bg.png) no-repeat;
      background-size: 100% 100%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #000000;
      text-align: center;

      .title {
        margin-top: 10px;
        height: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        margin-right: 8px;
        color: #000000;
        line-height: 12px;
        text-align: left;
        font-style: normal;
      }

      .unit {
        margin-top: 10px;
        margin-right: 14px;
        height: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #000000;
        line-height: 12px;
        text-align: left;
        font-style: normal;
      }
    }

    .right-city {
      .city {
        height: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #575757;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }

      .title {
        height: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #868687;
        line-height: 14px;
        text-align: center;
        font-style: normal;
      }
    }
  }

  .item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 26px);
  }

  .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
  }

  .line {
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom,
        rgba(255, 0, 0, 0),
        #cbcbcb);
  }

  .cityLine {
    width: 1px;
    margin-top: 40px;
    height: 76px;
    background: linear-gradient(to bottom,
        rgba(255, 0, 0, 0),
        #cbcbcb);
  }

  .left,
  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
  }

  .number {
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 24px;
    color: rgba(103, 103, 103, 0.79);
    line-height: 22px;
    text-align: center;
    font-style: normal;
  }

  .title {
    height: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #868687;
    line-height: 14px;
    text-align: center;
    font-style: normal;
  }

  .progress-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .progress-container {
    width: 230px;
    height: 10px;
    background: #ECEFF7;
    border-radius: 8px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    border-radius: 8px;
    /* 背景色由动态绑定控制，移除固定值 */
  }

  .city-progress-group {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .city-progress-container {
    width: 112px;
    height: 10px;
    background: #ECEFF7;
    border-radius: 8px;
    overflow: hidden;
  }

  .city-progress-bar {
    height: 100%;
    border-radius: 8px;
    opacity: 1;
    /* 背景色由动态绑定控制，移除固定值 */
  }

  .progress-percent {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    /* 颜色由动态绑定控制，此处不设置固定值 */
  }

  .yield {
    margin-top: 3px;
  }

  .numerator {
    /* 颜色由动态绑定控制，此处不设置固定值 */
  }

  .city-yield {
    /* 颜色由动态绑定控制，此处不设置固定值 */
  }
}

.groupData {
  position: relative;
  overflow: hidden;
}

/* 右上角折现边框（主边框） */
// .groupData::before {
//   content: "";
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   background-color: #000000;
//   clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
// }

/* 右上角折现细节 */
.groupData::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #EFF3F8;
  transform: rotate(-45deg) translate(50%, -50%);
  transform-origin: top right;
}
</style>
