<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" v-if="activedname == '2023'"></div>
    <div class="managementBoxA" v-if="activedname == '2024'"></div>
    <div class="managementBoxB" v-if="activedname == '2025'"></div>
  </div>
  <!-- 满意度 -->
  <div class="SatisfactionLevel">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">满意度</div>
    </div>
    <div class="mydImg"></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: 5px 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 {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 95px);
    background: url('@/assets/images/Sponge_screen/jx2023.png') no-repeat;
    background-size: 100% 100%;
  }
  .managementBoxA {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 95px);
    background: url('@/assets/images/Sponge_screen/js2024.png') no-repeat;
    background-size: 100% 100%;
  }
  .managementBoxB {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 95px);
    background: url('@/assets/images/Sponge_screen/jx2025.png') no-repeat;
    background-size: 100% 100%;
  }
}
.SatisfactionLevel {
  width: 450px;
  height: 180px;
  // background: red;
  .mydImg {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 60px);
    background: url('@/assets/images/Sponge_screen/mydJS.png') no-repeat;
    background-size: 100% 100%;
  }
}
.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>