<template>
  <ChartsContainer title="抽问抽答统计" name="班组任务完成情况">
    <template #other>
      <CustomStyleSelect v-model="activeClass" :options="tableData"/>
    </template>
    <div ref="content" style="height: 100%;">
      <el-table v-auto-scroll :data="activeClassDataList" border style="width: 100%" height="100%">
        <el-table-column prop="userName" 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, ref, computed } from 'vue';
import ChartsContainer from '../ChartsContainer.vue';
import CustomStyleSelect from './CustomStyleSelect.vue'
import { getDailyAllUsersRanking } from '@/api/item/items'
import { useTimeOut } from './useTimeOut'
const tableData = ref([])
const activeClass = ref('')

const activeClassDataList = computed(() => {
  return (tableData.value.find(item => item.value === activeClass.value) || { dataList: [] }).dataList
})

useTimeOut(() => {
  getDailyAllUsersRanking({ pageNum: 1, pageSize: 100 }).then(res => {
    tableData.value = (res.data.rows || []).reduce((cur, acc) => {
      const item = cur.find(item => item.value === acc.deptName)
      if (item) {
        item.dataList.push(acc)
      } else {
        cur.push({
          value: acc.deptName,
          label: acc.deptName,
          dataList: [acc]
        })
      }
      return cur
    }, [])
    activeClass.value = tableData.value[0] ? tableData.value[0].value : ''
  })
})

</script>

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