<template>
  <div>
    <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
      <div class="mask" v-if="windowState" @click="close"></div>
    </Transition>
    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
      :leave-active-class="proxy?.animate.rankingWindow.leave">
      <div class="multipleItemRanking" v-if="windowState" @click="close">
        <div class="rankingBox">
          <div class="top">
            <div class="item two">
              <div v-if="twoObj?.faceCheckStu?.student_id">
                <div class="userInfo">
                  <div class="maozi maozi2">
                    <div class="num">2</div>
                  </div>
                  <div class="touxiang">
                    <img :src="twoObj?.faceCheckStu.face_pic || twoObj?.faceCheckStu?.logo_url"
                      v-if="twoObj?.faceCheckStu?.face_pic || twoObj?.faceCheckStu?.logo_url" />
                    <img src="@/assets/images/test/profilePicture2.png" v-else />
                  </div>
                  <div class="name">
                    {{ twoObj?.faceCheckStu?.name || "" }}
                  </div>
                </div>
                <div class="score">{{ twoObj.count || 0 }} <span>{{ unit }}</span></div>
              </div>
            </div>
            <div class="item one">
              <div v-if="oneObj?.faceCheckStu?.student_id">
                <div class="userInfo">
                  <div class="maozi maozi1">
                    <div class="num">1</div>
                  </div>
                  <div class="touxiang">
                    <img :src="oneObj.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url"
                      v-if="oneObj?.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url" />
                    <img src="@/assets/images/test/profilePicture2.png" v-else />
                  </div>
                  <div class="name">
                    {{ oneObj?.faceCheckStu?.name || "" }}
                  </div>
                </div>
                <div class="score">{{ oneObj.count || 0 }} <span>{{ unit }}</span></div>
              </div>
            </div>
            <div class="item three">
              <div v-if="threeObj?.faceCheckStu?.student_id">
                <div class="userInfo">
                  <div class="maozi maozi3">
                    <div class="num">3</div>
                  </div>
                  <div class="touxiang">
                    <img :src="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url"
                      v-if="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url" />
                    <img src="@/assets/images/test/profilePicture2.png" v-else />
                  </div>
                  <div class="name">
                    {{ threeObj?.faceCheckStu?.name || "" }}
                  </div>
                </div>
                <div class="score">{{ threeObj.count || 0 }} <span>{{ unit }}</span></div>
              </div>
            </div>
          </div>
          <div class="bottom"></div>
          <div class="closeBtn" @click="close"></div>
        </div>
      </div>
    </Transition>
  </div>

</template>
<script setup lang="ts">
const route = useRoute();
import dataDictionary from "@/utils/dataDictionary"
const { proxy } = getCurrentInstance() as any;
let project: any = route.query.project;

//父值
const props = defineProps({
  testList: {
    type: Object,
    default: []
  },
});

const data = reactive<any>({
  unit: "",//单位
  windowState: false,//窗口状态
  oneObj: {},
  twoObj: {},
  threeObj: {},
});

const { unit, windowState, oneObj, twoObj, threeObj } = toRefs(data);

//打开
const open = () => {
  let list = JSON.parse(JSON.stringify(props.testList))
  list.sort((a: any, b: any) => Number(b.count) - Number(a.count));
  if (list[0]) {
    oneObj.value = list[0];
  }
  if (list[1]) {
    twoObj.value = list[1];
  }
  if (list[2]) {
    threeObj.value = list[2]
  }
  windowState.value = true;
};

//关闭
const close = () => {
  windowState.value = false;
};

/**
 * 定时关闭
 */
watch(
  () => windowState.value,
  (newData) => {
    if (newData == true) {
      setTimeout(() => {
        if (windowState.value == true) {
          close();
        }
      }, 6000)
    }
  },
  { immediate: true }
);

onMounted(() => {
  let dic: any = dataDictionary;
  unit.value = dic.unit[project];
})

//暴露给父组件用
defineExpose({
  open,
  close
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 998;
}

.multipleItemRanking {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.rankingBox {
  width: 80%;

  .top {
    display: flex;
    justify-content: space-around;

    .item {
      width: calc(100% / 3);
      display: flex;
      justify-content: center;

      .userInfo {
        display: flex;
        align-items: center;
        flex-direction: column;

        .maozi {
          width: 3.5vw;
          height: 2.2vw;
          margin-bottom: 3px;
          color: #ffffff;
          font-family: 'Saira-ExtraBold';
          display: flex;
          align-items: flex-end;
          justify-content: center;

          .num {
            font-size: 1.1vw;
            line-height: 1.1vw;
            padding-top: 0.5vw;
          }
        }

        .maozi1 {
          background: url('@/assets/images/ranking/mao1.png') center center no-repeat;
          background-size: 100% 100%;
        }

        .maozi2 {
          background: url('@/assets/images/ranking/mao2.png') center center no-repeat;
          background-size: 100% 100%;
        }

        .maozi3 {
          background: url('@/assets/images/ranking/mao3.png') center center no-repeat;
          background-size: 100% 100%;
        }

        .touxiang {
          width: 12.5vw;
          height: 12.5vw;
          box-sizing: border-box;
          border-radius: 50%;
          position: relative;
          margin-bottom: 5px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }

          &::before {
            content: "";
            width: 12.5vw;
            height: 12.5vw;
            box-sizing: border-box;
            border: 0.5vw solid rgba(26, 41, 58, 0.6);
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        .name {
          font-size: 1.8vw;
          color: #000000;
          width: 12.5vw;
          height: 2.8vw;
          line-height: 2.8vw;
          border-radius: 1.5vw;
          box-sizing: border-box;
          text-align: center;
          background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
          box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
        }
      }

      .score {
        color: #ffffff;
        font-size: 3vw;
        text-align: center;
        height: 5vw;
        line-height: 5vw;
        font-family: 'Saira-ExtraBold';
        display: flex;
        justify-content: center;

        span {
          font-size: 2vw;
          display: block;
          margin-left: 5px;
        }
      }
    }

    .two {
      position: relative;
      bottom: -3vw;
    }

    .three {
      position: relative;
      bottom: -4.5vw;
    }
  }

  .bottom {
    width: 100%;
    height: 15vw;
    margin-bottom: 2vw;
    background: url('@/assets/images/ranking/jiangtai.png') center center no-repeat;
    background-size: 100% 100%;
  }

  .closeBtn {
    width: 3vw;
    height: 3vw;
    margin: 0 auto;
    cursor: pointer;
    background: url('@/assets/images/ranking/close.png') center center no-repeat;
    background-size: 100% 100%;
  }
}
</style>
