<template>
    <div class="page-header">
        <div class="headerTitle">
          个人工作量
          <div class="dataCut">
            <span @click="workloadHandle(1)" :class="[ workloadType === 1 ? active1Class : default1Class]">日</span>/
            <span @click="workloadHandle(2)" :class="[ workloadType === 2 ? active1Class : default1Class]">周</span>/
            <span @click="workloadHandle(3)" :class="[ workloadType === 3 ? active1Class : default1Class]">月</span>
          </div>
        </div>

        <div class="workloadContetn" v-if="workloadData.length>0">
          <div class="itemWork" v-for="item in workloadData" :key="item">
            <div class="progressName">{{item.name}}</div>
            <div class="itemProgress">
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="toPercent(item.number,workloadTotal)"
                status="exception"
              >
                <span>{{item.number}}</span>
              </el-progress>
            </div>
            <div class="progressNum">{{toPercent(item.number,workloadTotal)}}%</div>
          </div>
          
        </div>
        <el-empty v-else :image-size="50" />
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { getPageListData } from '@/api/main/system/system';

    const workloadType = ref(1)
    const active1Class = ref('active1')
    const workloadTotal = ref()
    const default1Class = ref('')
    const workloadData = ref([
      {number: 33, name: "1001"},
      {number: 11, name: "1002"},
      {number: 22, name: "1003"},
    ])
    onMounted(() => { 
      getSelectWorkload() // 个人工作量 
    })
    // 个人工作量
    function workloadHandle(val) {
      workloadType.value = val
      getSelectWorkload()
    }
    function getSelectWorkload() {
        // type 1 2 3 日周月
        const params = {type:workloadType.value}
        getPageListData("/SfPlanReport/selectWorkload",params).then((res)=>{
            if (res.data) {
              workloadData.value = res.data
              let dataTotal = 0
              workloadData.value.forEach(element => {
                dataTotal += element.number
              });
              workloadTotal.value = dataTotal
            }
        })
    }
    function toPercent(num, total) {
      if (total) {
        return (Math.round(num / total * 10000) / 100);// 小数点后两位百分比
      } else {
        return 0
      }
    }
  </script>
  
  <style scoped lang="scss">
    .active1{
      color: #409EFF;
    }
    .page-header{
      width: 100%;
      .headerTitle{
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 15px;
        display: flex;
        .dataCut{
          font-size: 16px;
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .workloadContetn::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .workloadContetn{
          height: 140px;
          overflow-y: auto;
        .itemWork{
          
          margin-bottom: 15px;
          position: relative;
          display: flex;
          .itemProgress{
            width: 73%;
          }
          .progressNum{
            position: absolute;
            right: 5px;
            top: 3px;
          }
          .progressName{
            margin:0px 15px;
          }
        }
      }
    }
  </style>