<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">
        <div class="title">立法及长效机制</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:`${30}%`}"></div></div></div>
            <div class="three">70%</div>
          </div>
          <div class="ratio flex flex-align-center">
            <div class="one">总体进度</div>
            <div class="two"><div class="in"><div class="zb" :style="{width:`${60}%`}"></div></div></div>
            <div class="three">70%</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 activedname = ref('2023');
// 点击事件
function categoryclick(val) {
  activedname.value = val.name;
}
</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: 46px;
            text-align: right;
          }
        }
      }
    }
  }
}
.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>