<template>
  <ChartsContainer  name="个人任务完成排行(Top10)">
    <div ref="content" style="height: 100%;">
      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="date" label="排行" width="55" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="90"/>
        <el-table-column prop="deptName" label="部门" width="90" />
        <el-table-column prop="completedTasks" label="完成任务数" width="90" />
        <el-table-column prop="avgScore" label="平均得分" width="90" />
        <el-table-column prop="completionRate" label="完成率">
          <template #default="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.completionRate"
              style="--el-border-color-lighter: #fff"
              color="#58A55C"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </ChartsContainer>
</template>

<script setup>
import { onMounted } from 'vue';
import ChartsContainer from '../ChartsContainer.vue';
import { userRanking } from '@/api/item/items'
import { useTimeOut } from './useTimeOut'
const tableData = ref([])
useTimeOut(() => {
  userRanking().then(res => {
    tableData.value = res.data
  })
})

</script>

<style lang="scss" scoped></style>