<template>
  <!-- 绩效管理 -->
  <div class="management">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">管理绩效</div>
    </div>
    <!-- 年份切换 -->
    <div class="subRightBox">
      <div
        class="headcenter"
        v-for="(item, index) in categoryList"
        :key="item"
        :class="activedname == item.name ? 'activedright' : ''"
        @click="categoryclick(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 2023 -->
    <div class="managementBox">
      <!-- 循环 -->
      <div class="listBox" v-for="(item, v) in obj">
        <div class="title">{{ item.name }}</div>
        <div class="progress">
          <div class="ratio flex flex-align-center">
            <div class="one">年度进度</div>
            <div class="two">
              <div class="in"><div class="zb" :style="{ width: `${item.pro1}%` }"></div></div>
            </div>
            <div class="three">
              {{ item.pro3 }}
              {{ item.pro1 }}%
            </div>
          </div>
          <div class="ratio flex flex-align-center">
            <div class="one">总体进度</div>
            <div class="two">
              <div class="in"><div class="zb" :style="{ width: `${item.pro2}%` }"></div></div>
            </div>
            <div class="three">
              {{ item.pro4 }}
              {{ item.pro2 }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 满意度 -->
  <div class="SatisfactionLevel">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">满意度</div>
    </div>
    <div class="mydContent">
      <div class="list flex flex-justcontent-spacebetween">
        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
          <div class="left">目标</div>
          <div class="right">96.17%</div>
        </div>
        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center" style="width: 49%">
          <div class="left">结果</div>
          <div class="right">96.17%</div>
        </div>
      </div>
      <div class="list flex flex-justcontent-spacebetween">
        <div class="listBox flex flex-justcontent-spacebetween">问卷数<span>324</span></div>
        <div class="listBox flex flex-justcontent-spacebetween">反馈数<span>324</span></div>
        <div class="listBox flex flex-justcontent-spacebetween">五星评分数<span>324</span></div>
      </div>
      <div class="list">
        <div class="mydBox flex flex-justcontent-spacebetween flex-align-center">
          <div class="left">满意率</div>
          <div class="right">96.17%<span>明细</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
const categoryList = ref([
  { name: '2023', value: 1 },
  { name: '2024', value: 2 },
  { name: '2025', value: 3 },
]);
const obj = ref([
  { name: '立法及长效机制', pro1: '70', pro2: '30' },
  { name: '立法及长效机制', pro1: '88', pro2: '45' },
  {
    name: '海绵城市建设的全域性',
    pro1: '75',
    pro2: '35',
  },
  {
    name: '规划建设管控制度',
    pro1: '70',
    pro2: '30',
  },

  { name: '投融资机制', pro1: '70', pro2: '30' },
  { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
  {
    name: '宣传与公众参与',
    pro1: '85',
    pro2: '40',
  },
]);
const activedname = ref('2023');
// 点击事件
function categoryclick(val) {
  activedname.value = val.name;
  console.log(activedname.value, ' activedname.value');
  if (activedname.value == '2023') {
    obj.value = [
      { name: '立法及长效机制', pro1: '70', pro2: '30' },
      { name: '立法及长效机制', pro1: '88', pro2: '45' },
      {
        name: '海绵城市建设的全域性',
        pro1: '75',
        pro2: '35',
      },
      {
        name: '规划建设管控制度',
        pro1: '70',
        pro2: '30',
      },

      { name: '投融资机制', pro1: '70', pro2: '30' },
      { name: '培训', pro1: '70', pro2: '30', pro3: '3/4', pro4: '6/10' },
      {
        name: '宣传与公众参与',
        pro1: '85',
        pro2: '40',
      },
    ];
    console.log(obj.value, '2023');
  } else if (activedname.value == '2024') {
    obj.value = [
      { name: '立法及长效机制', pro1: '70', pro2: '30' },
      { name: '立法及长效机制', pro1: '88', pro2: '45' },
      {
        name: '海绵城市建设的全域性',
        pro1: '75',
        pro2: '35',
      },
      {
        name: '规划建设管控制度',
        pro1: '70',
        pro2: '30',
      },

      { name: '投融资机制', pro1: '70', pro2: '30' },
      { name: '培训', pro1: '70', pro2: '60', pro3: '3/4', pro4: '6/10' },
      {
        name: '宣传与公众参与',
        pro1: '85',
        pro2: '40',
      },
    ];
    console.log(obj.value, '2024');
  } else if (activedname.value == '2025') {
    obj.value = [
      { name: '立法及长效机制', pro1: '100', pro2: '100' },
      { name: '立法及长效机制', pro1: '100', pro2: '100' },
      {
        name: '海绵城市建设的全域性',
        pro1: '100',
        pro2: '100',
      },
      {
        name: '规划建设管控制度',
        pro1: '100',
        pro2: '100',
      },

      { name: '投融资机制', pro1: '100', pro2: '100' },
      { name: '培训', pro1: '100', pro2: '100', pro3: '3/3', pro4: '10/10' },
      {
        name: '宣传与公众参与',
        pro1: '100',
        pro2: '100',
      },
    ];
    console.log(obj.value, '2025');
  }
}
</script>

<style lang="scss" scoped>
.management {
  width: 450px;
  height: calc(100vh - 300px);

  .subRightBox {
    width: 450px;
    margin: 10px auto;
    height: 35px;
    display: flex;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;

    .headcenter {
      width: 136px;
      height: 26px;
      padding: 4px 3px;
      background: #00344f;
      text-align: center;
      margin-top: 3px;
      margin-left: 10px;
    }
    .activedright {
      border: 1px solid #2cfce9;
      color: #e4f5ff;
      background: #166f84;
    }
  }
  .managementBox {
    padding: 0 10px;
    height: calc(100% - 95px);
    overflow: auto;
    .listBox {
      background: rgba(7, 86, 128, 0.6);
      border: 1px solid #1cf5fc;
      padding: 0 10px;
      overflow: hidden;
      margin-bottom: 10px;
      .title {
        line-height: 34px;
        font-weight: 500;
        font-size: 14px;
        color: #1cf5fc;
      }
      .progress {
        overflow: hidden;
        .ratio {
          padding-bottom: 10px;
          overflow: hidden;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          .one {
            width: 64px;
          }
          .two {
            flex: 1;
            height: 16px;
            border-radius: 2px;
            border: 1px solid rgba(223, 254, 255, 0.15);
            padding: 5px 9px;
            overflow: hidden;
            .in {
              height: 100%;
              background: rgba(94, 167, 255, 0.3);
              border-radius: 2px;
            }
            .zb {
              background: linear-gradient(
                90deg,
                rgba(0, 246, 255, 0.3) 40%,
                rgba(0, 246, 255, 0.85) 80%,
                rgba(197, 253, 255, 1) 100%
              );
              height: 100%;
              border-radius: 2px;
              position: relative;
              &::after {
                content: '';
                width: 7px;
                height: 7px;
                background: rgba(197, 253, 255, 1);
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 50%;
                box-shadow: 0 0 10px rgba(223, 254, 255, 1);
              }
            }
          }
          .three {
            width: 60px;
            text-align: right;
            // background: red;
          }
        }
      }
    }
  }
}
.SatisfactionLevel {
  width: 450px;
  height: 180px;
  // background: red;
  .mydContent {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 60px);
    .list {
      overflow: hidden;
      margin-bottom: 10px;
    }
    .mydBox {
      height: 32px;
      background: rgba(7, 86, 128, 0.6);
      border: 1px solid #02b9c3;
      box-shadow: 0 0 10px #02b9c3 inset;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      border-left: 2px solid rgba(0, 242, 255, 1);
      padding-left: 35px;
      padding-right: 10px;
      position: relative;
      &::before {
        content: '';
        width: 12px;
        height: 10px;
        background: url('@/assets/images/zhhm/jb.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: '';
        width: 27px;
        height: 1px;
        background: rgba(0, 242, 255, 1);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .right {
        font-weight: 500;
        font-size: 16px;
        color: #ffed98;
        font-family: DINPro;
        span {
          font-weight: 400;
          font-size: 14px;
          color: #5fe889;
          margin-left: 10px;
        }
      }
    }
    .listBox {
      width: 32%;
      line-height: 32px;
      background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
      border-radius: 4px;
      border: 1px solid #1cf5fc;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      padding: 0 10px;
      span {
        font-weight: 500;
        font-size: 16px;
        color: #12f9ff;
      }
    }
  }
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}
</style>