<script setup lang="ts">
const props = defineProps<{
  wholeAnalysis: anyObj
}>()
// 整体
const wholeConfig: anyObj = {
  0: {
    label: '优秀',
    icon: 'analysisStar_0',
  },
  1: {
    label: '良好',
    icon: 'analysisStar_1',
  },
  2: {
    label: '合格',
    icon: 'analysisStar_2',
  },
  3: {
    label: '薄弱',
    icon: 'analysisStar_3',
  },
}
// -1-不展示 0-退步 1-稳定 2-进步

const statusConfig: anyObj = {
  0: {
    label: '退步',
    bg: '#FFD9D9',
    color: '#F00A0A',
  },
  1: {
    label: '稳定',
    bg: '#E6E7FF',
    color: '#7A7FF5',
  },
  2: {
    label: '进步',
    bg: '#F4FFDA',
    color: '#8FCC00',
  },
}

// // 过滤掉-1
// const analysisComputed = computed(() =>
//     props.wholeAnalysis.map((i: anyObj) => {
//         return {
//             level: i?.level || 0,
//             jobStatisticalDataVoList:
//                 i?.jobStatisticalDataVoList || [],
//         };
//     }),
// );
</script>
<template>
  <div class="whole hidden_scroll">
    <div v-for="i in wholeAnalysis" :key="i.level" class="whole-item">
      <Icon :name="wholeConfig[i.level || 0].icon" size="120"> </Icon>
      <div class="whole-item-right">
        <template v-if="i.jobStatisticalDataVoList?.length">
          <div
            v-for="item in i.jobStatisticalDataVoList"
            :key="item.subjectId"
            class="whole-item-right-item"
          >
            <div class="name">{{ item.subjectName }}</div>
            <div
              v-if="statusConfig[item.status]"
              class="status"
              :style="{
                color: statusConfig[item.status].color,
                background: statusConfig[item.status].bg,
                border: `3px solid ${statusConfig[item.status].color}`,
              }"
            >
              {{ statusConfig[item.status].label }}
            </div>
          </div>
        </template>
        <div v-else class="empty">暂无</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.whole {
  height: calc(100% - 48px);
  margin-top: 4vh;
  line-height: 1.5;
  &-item {
    display: flex;
    margin: 2vh 0;
    .x-icon {
      margin-right: 40px;
    }
    &-right {
      flex: 1;
      border-radius: 1.67vh;
      background: rgba(0, 0, 0, 0.1);
      min-height: 10.67vh;
      font-family: $font-special;
      font-size: 3.33vh;
      padding: 2vh;
      display: grid;
      // grid-template-columns: repeat(2, 1fr);
      grid-template-columns: repeat(auto-fit, minmax(546px, 1fr));
      grid-template-rows: 80px;
      grid-auto-rows: 80px;
      gap: 24px;
      justify-content: center;
      &-item {
        // width: 546px;
        display: flex;
        padding: 0.83vh 32px;
        justify-content: space-between;
        align-items: center;
        border-radius: 1.67vh;
        background: #fff;
        box-shadow: 0 0.33vh 0.17vh 0 rgba(0, 0, 0, 0.15);

        .name {
          flex: 1;
          color: $font-color;
        }
        .status {
          width: 100px;
          height: 3.83vh;
          border-radius: 3.33vh;
          border: 0.25vh solid black;
          font-family: OPPOSans;
          font-size: 2.17vh;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .empty {
        color: #fff;
        text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.45);
        // margin: 10px auto;
        text-align: center;
        line-height: 6.67vh;
      }
    }
  }
}
</style>
