<template>
  <div class="sub_title" style="margin-bottom: 14px;">在办任务</div>
  <div class="working-task-div">
    <div class="working-task-item" v-for="(item,index) in workingTask" :key="index">
      <div class="mark"></div>
      <img class="user-image" :src="`${item.HeadIcon? `${VITE_GLOB_UPLOAD_URL}/${item.HeadIcon}`: imageError}`"/>
      <div class="user-name">{{item.Name}}</div>
      <div class="user-working-number">{{item.count}}</div>
    </div>
  </div>
</template>

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

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

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

onMounted(() => {
  getValue()
})
const getValue = () => {
  GetTaskingList().then(res => {
    workingTask.value = res
  })
}
const workingTask = ref<{HeadIcon:string;Name:string;count:number}[]>([])
</script>

<style lang="scss" scoped>
.working-task-div{
  height: 181px;
  overflow: auto;
  scrollbar-width: none; 
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .working-task-item{
    position: relative;
    display: flex;
    align-items: center;
    width: 472px;
    height: 38px;
    background-image: url('/public/taskhall/working_task_background.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 17px;
    margin-bottom: 7px;
    user-select: none;
    .mark{
      width: 5px;
      height: 5px;
      background-image: url('/public/taskhall/working_task_mark.png');
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .user-image{
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #036CFF;
      margin-right: 14px;
    }
    .user-name{
      font-family: AlibabaPuHuiTiM;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      width: 242px;
    }
    .user-working-number{
      font-family: DINPro;
      font-weight: 500;
      font-size: 20px;
      color: #FFFFFF;
    }
  }
}
</style>
