<template>
  <div class="sub_title" style="width: 472px;display: flex;justify-content: space-between;padding-top: 0px;position: relative;z-index: 2;margin-bottom: 0px;">
    <div style="padding-top: 3px;">最佳员工</div>
    <div style="display: flex;">
      <div :class="`handoff-button ${handoffButton == 'day'? 'handoff-button-active': ''}`" style="margin-right: 3px;" @click="changeRankingType('day')">日榜</div>
      <div :class="`handoff-button ${handoffButton == 'week'? 'handoff-button-active': ''}`" style="margin-right: 3px;" @click="changeRankingType('week')">周榜</div>
      <div :class="`handoff-button ${handoffButton == 'month'? 'handoff-button-active': ''}`" @click="changeRankingType('month')">月榜</div>
    </div>
  </div>
  <div class="best-employee">
    <div class="podium">
      <div class="first-place" v-if="firstPlace">
        <img :src="`${firstPlace.HeadIcon? `${VITE_GLOB_UPLOAD_URL}/${firstPlace.HeadIcon}`: imageError}`" class="user-image"/>
        <div class="first-mark"></div>
        <div class="user-name">{{firstPlace.Name}}</div>
        <div class="gap">{{`+${firstPlace.count}`}}</div>
      </div>
      <div class="second-place" v-if="secondPlace">
        <img :src="`${secondPlace.HeadIcon? `${VITE_GLOB_UPLOAD_URL}/${secondPlace.HeadIcon}`: imageError}`" class="user-image" />
        <div class="second-mark"></div>
        <span class="user-name">{{secondPlace.Name}}</span>
        <div class="gap">{{`+${secondPlace.count}`}}</div>
      </div>
      <div class="third-place" v-if="thirdPlace">
        <img :src="`${thirdPlace.HeadIcon? `${VITE_GLOB_UPLOAD_URL}/${thirdPlace.HeadIcon}`: imageError}`" class="user-image" />
        <div class="third-mark"></div>
        <span class="user-name">{{thirdPlace.Name}}</span>
        <div class="gap">{{`+${thirdPlace.count}`}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from "vue"
import { GetRankingList } from '@/api/demo/taskhall'
import { User, imageError } from './util'
import { getAppEnvConfig } from '@/utils/env';

const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
const props = defineProps(['getValueType'])

watch(() => props.getValueType, () => {
  getValue()
})

onMounted(() => {
  getValue()
})

const handoffButton = ref('day')
const firstPlace = ref<User | null>(null)
const secondPlace = ref<User | null>(null)
const thirdPlace = ref<User | null>(null)

const getValue = () => {
  GetRankingList({flag: handoffButton.value}).then(res => {
    firstPlace.value = res[0]? res[0]: null
    secondPlace.value = res[1]? res[1]: null
    thirdPlace.value = res[2]? res[2]: null
  })
}
const changeRankingType = (type: string) => {
  handoffButton.value = type
  getValue()
}
</script>

<style lang="scss" scoped>
.handoff-button{
  width: 77px;
  height: 31px;
  background-image: url('/public/taskhall/best_employee_button.png');
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: AlibabaPuHuiTiM;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
}
.handoff-button-active{
  background-image: url('/public/taskhall/best_employee_button_select.png');
}
.best-employee{
  height: 300px;
  padding-top: 155px;
  padding-left: 68px;
  position: relative;
  user-select: none;
  .podium{
    width: 342px;
    height: 127px;
    background-image: url('/public/taskhall/podium.png');
    position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .first-place{
      position: absolute;
      top: calc(50% - 165px);
      left: 50%;
      transform: translate(-50%, -50%);
      width: 148px;
      height: 148px;
      background-image: url('/public/taskhall/light.png');
      display: flex;
      justify-content: center;
      align-items: center;
      .user-image{
        width: 67px;
        height: 67px;
        border-radius: 50%;
        border: 2px solid #F3DF8E;
      }
      .first-mark{
        width: 42px;
        height: 37px;
        background-image: url('/public/taskhall/first_mark.png');
        position: absolute;
        top: 20px;
        left: 31px;
      }
      .user-name{
        position: absolute;
        top: calc(50% + 47px);
        left: 50%;
        transform: translateX(-50%);
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        white-space: nowrap;
      }
      .gap{
        position: absolute;
        top: calc(50% + 66px);
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 17px;
        border-radius: 8px;
        background: #DB420F;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .second-place{
      position: absolute;
      top: calc(50% - 135px);
      left: calc(50% - 112px);
      transform: translate(-50%, -50%);
      width: 148px;
      height: 148px;
      background-image: url('/public/taskhall/light.png');
      display: flex;
      justify-content: center;
      align-items: center;
      .user-image{
        width: 67px;
        height: 67px;
        border-radius: 50%;
        border: 2px solid #929292;
      }
      .second-mark{
        width: 42px;
        height: 37px;
        background-image: url('/public/taskhall/second_mark.png');
        position: absolute;
        top: 21px;
        left: 27px;
      }
      .user-name{
        position: absolute;
        top: calc(50% + 47px);
        left: 50%;
        transform: translateX(-50%);
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        white-space: nowrap;
      }
      .gap{
        position: absolute;
        top: calc(50% + 66px);
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 17px;
        border-radius: 8px;
        background: #0C76D0;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .third-place{
      position: absolute;
      top: calc(50% - 118px);
      left: calc(50% + 108px);
      transform: translate(-50%, -50%);
      width: 148px;
      height: 148px;
      background-image: url('/public/taskhall/light.png');
      display: flex;
      justify-content: center;
      align-items: center;
      .user-image{
        width: 67px;
        height: 67px;
        border-radius: 50%;
        border: 2px solid #815830;
      }
      .third-mark{
        width: 43px;
        height: 39px;
        background-image: url('/public/taskhall/third_mark.png');
        position: absolute;
        top: 19px;
        right: 27px;
      }
      .user-name{
        position: absolute;
        top: calc(50% + 47px);
        left: 50%;
        transform: translateX(-50%);
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        white-space: nowrap;
      }
      .gap{
        position: absolute;
        top: calc(50% + 66px);
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 17px;
        border-radius: 8px;
        background: #AA803C;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
