<template>
  <ChartsContainer :title="title">
    <div ref="content" style="height: 100%;">
      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
        <el-table-column v-if="type === 'team'" prop="name" label="姓名" min-width="80" />
        <el-table-column v-if="type === 'department'" prop="name" label="班组" min-width="80" />
        <el-table-column v-if="type === 'station'" label="大队" prop="name"  min-width="80" />
        <el-table-column prop="qualificationLevel" label="资质等级" v-if="type === 'team'">
          <template #default="scope">
            {{ getLabel(scope.row.qualificationLevel) }}
          </template>
        </el-table-column>
        <el-table-column prop="qualificationLevel" label="资质等级高级" v-else />
        <el-table-column prop="avgWorkingDays" label="人均出勤天数" min-width="120"/>
        <el-table-column prop="avgWorkingHours" label="人均上岗时长" min-width="120" />
        <el-table-column prop="avgSeizureCount" label="人均查获数量" min-width="120" />
        <el-table-column prop="checkCount" label="人均巡检问题数" min-width="120" />
        <el-table-column prop="testScore" label="测试平均分" min-width="100"/>
      </el-table>
    </div>
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue';
import { inject, ref, computed } from 'vue';
import { getDetailProfile } from '@/api/item/items'
import { useTimeOut } from '../pageItems/useTimeOut'
const props = defineProps({
  type: {
    type: String,
    default: 'station' // team, department, station
  }
})

const title = computed(() => {
  if (props.type === 'team') {
    return '人员明细'
  } else if (props.type === 'department') {
    return '班组明细'
  } else {
    return '大队明细'
  }
})

const qualificationLevel = [
  { value: ['LEVEL_ONE', 0, '0', '一'], label: '一级' },
  { value: ['LEVEL_TWO', 1, '1', '二'], label: '二级' },
  { value: ['LEVEL_THREE', 2, '2', '三'], label: '三级' },
  { value: ['LEVEL_FOUR', 3, '3', '四'], label: '四级' },
  { value: ['LEVEL_FIVE', 4, '4', '五'], label: '五级' },
]
const getLabel = (value) => {
  const item = qualificationLevel.find(item => item.value.includes(value)) || {}
  return item.label
}
const tableData = ref([])
const params = inject('provideParams')
useTimeOut(() => {
  params.value.deptId  && getDetailProfile({ deptId: params.value.deptId }).then(res => {
    tableData.value = res.data
  })
}, [params])

</script>

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