<template>
  <div class="xiangMuJianShe">
    <div class="partTitleHM">项目建设完成情况</div>
    <div class="ListBoxBody">
      <div class="planCont">
        <div class="list">
          <div class="flex flex-wrap">
            <p class="title">计划开工项目</p>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="96.3" status="success"></el-progress>
            <p class="title2">{{ jhkgxm.quotaTarget }}</p>
            <div class="progressunit">
              <div class="title">（单位：个）</div>
              <div class="title2">{{ jhkgxm.remark }}</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="flex flex-wrap">
            <p class="title">实际竣工项目</p>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="75" status="success"></el-progress>
            <p class="title2">{{ sjjgxm.quotaTarget }}</p>
            <div class="progressunit">
              <div class="title">（单位：个）</div>
              <div class="title2">{{ sjjgxm.remark }}</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="flex flex-wrap">
            <p class="title">计划投入海绵资金</p>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="70" status="success"> </el-progress>
            <p class="title2">{{ jhtrhmzj.quotaTarget }}</p>
            <!-- {{reformAchievement/quotaTarget}} -->
            <div class="progressunit">
              <div class="title">（单位：亿元）</div>
              <div class="title2">{{ jhtrhmzj.remark }}</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="flex flex-wrap">
            <p class="title">海绵资金使用</p>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="65" status="success"> </el-progress>
            <p class="title2">{{ hmzjsy.quotaTarget }}</p>
            <div class="progressunit">
              <div class="title">（单位：亿元）</div>
              <div class="title2">{{ hmzjsy.remark }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="achievements flex flex-j-left flex-align-center">
        <div class="titles titlecg">
          <div class="mbs">成果</div>
        </div>
        <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
          {{ quotaInfo.isCompliance == '1' ? '达标' : '未达标' }}
        </div>
      </div>
      <div class="bottom">
        {{ quotaInfo.remark }}
      </div>
    </div>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';

const quotaInfo = ref({}); //改造措施数据
const tableData = ref([]);

const jhtrhmzj = ref('');
const hmzjsy = ref('');
const sjjgxm = ref('');
const jhkgxm = ref('');

// 产出绩效公共指标信息
async function getjb() {
  let res = await quotaCommomInfoList({
    quotaCode: 'xmjswcqk',
  });
  if (res && res.code == 200) {
    let data = res.data;
    quotaInfo.value = data && data.length ? data[0] : {};
  }
}
// 产出绩效公共指标信息
async function getkhzn() {
  let res = await hmyztQuotaDataList({
    quotaType: 'xmjswcqk',
  });
  if (res && res.code == 200) {
    tableData.value = res.data;
    tableData.value.forEach(item => {
      if (item.reformProjectName == 'jhtrhmzj') {
        jhtrhmzj.value = item;
      }
      if (item.reformProjectName == 'hmzjsy') {
        hmzjsy.value = item;
      }
      if (item.reformProjectName == 'sjjgxm') {
        sjjgxm.value = item;
      }
      if (item.reformProjectName == 'jhkgxm') {
        jhkgxm.value = item;
      }
    });
  }
}
onMounted(() => {
  getjb();
  getkhzn();
});
</script>
<style lang="scss" scoped>
.xiangMuJianShe {
  margin: 5px 0px;
  width: 460px;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    height: 280px;
    overflow: auto;
    .planCont {
      margin: 5px auto;
      font-size: 13px;
      .list {
        margin-top: -12px;
      }
      .activePlan {
        background: #3ce6ff;
      }

      .progressunit {
        display: flex;
        margin-bottom: 5px;
        align-items: center;
        width: 100%;
        margin-top: -10px;
        font-size: 13px;

        .title {
          width: 130px;
          color: #ffffff;
          font-size: 13px;
        }

        .title2 {
          flex: 1;
          margin: 0px 15px;
          color: #67c23a;
        }
      }

      .flex {
        padding: 0px 10px;
        border-radius: 8px;
        align-items: center;
        cursor: pointer;
        flex: 1;

        .title {
          width: 130px;
          color: #ffffff;
          font-size: 14px;
        }

        .el-progress {
          width: 230px;
          margin: 0px 15px;

          .name {
            font-size: 15px;
            font-weight: bold;
            padding-right: 10px;
          }
        }

        .title2 {
          width: 30px;
          color: #67c23a;
        }
      }
    }

    .achievements {
      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
      border-radius: 3px;
      height: 40px;
      padding: 0 10px;
      font-size: 18px;

      .titles {
        width: 50px;
        font-size: 16px;
        color: #ffffff;
        position: relative;
        height: 20px;
        margin-top: 15px;

        .mbs {
          position: absolute;
          top: -10px;
          left: 5px;
        }
      }

      .vals {
        color: #ff5e66;
        margin-left: 20px;
      }
      .colors1 {
        color: #00fe00;
      }
      .colors2 {
        color: #ff5e66;
      }
      .titlecg {
        background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
      }
    }

    .bottom {
      width: 100%;
      height: 50px;
      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
      color: #58d6ff;
      font-size: 14px;
      padding: 5px;
      overflow-y: scroll;
    }
  }
}
</style>