<template>
    <section class='page'>
        <el-table ref="multipleTableRef" stripe :data="tableData" v-loading="tableloading"
            element-loading-text="数据加载中..." style="width: 100%;height: 340px" border>
            <el-table-column type="index" label="序号" width="55"/>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="单位" prop="unit"></el-table-column>
            <el-table-column label="部门" prop="dept"></el-table-column>
            <el-table-column label="培训时间安排" prop="timeEvaluate">
                <template #default="{ row }">
                    <el-rate v-model="row.timeEvaluate" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="培训内容适应岗位需求" prop="adaptEvaluate">
                <template #default="{ row }">
                    <el-rate v-model="row.adaptEvaluate" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="培训方式的评价" prop="modeEvaluate">
                <template #default="{ row }">
                    <el-rate v-model="row.modeEvaluate" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="培训资料等准备工作" prop="prepareEvaluate">
                <template #default="{ row }">
                    <el-rate v-model="row.prepareEvaluate" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="培训教师" prop="teacherEvaluate">
                <template #default="{ row }">
                    <el-rate v-model="row.teacherEvaluate" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="应急设备装备的适用性" prop="emergencyEquipment">
                <template #default="{ row }">
                    <el-rate v-model="row.emergencyEquipment" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="培训总体效果" prop="totalEffects">
                <template #default="{ row }">
                    <el-rate v-model="row.totalEffects" disabled/>
                </template>
            </el-table-column>
            <el-table-column label="建议" prop="contentEvaluate" show-overflow-tooltip></el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total,  prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
    </section>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";
const props = defineProps({
    detailId: {
        type: String,
        default: ''
    }
})
const tableData = ref([])
const tableloading = ref(false)
const total = ref(0)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  trainingId:props.detailId
})
onMounted(() => {
    getTableData()
})
const getAverageScore = (item) => {
  let arr = [
    item.timeEvaluate, // 培训时间安排
    item.adaptEvaluate, // 培训内容适应岗位需求
    item.modeEvaluate, // 培训方式的评价
    item.prepareEvaluate, // 培训资料等准备工作
    item.teacherEvaluate, // 培训教师
    item.emergencyEquipment //应急设备装备的适用性-（后端如此命名）
  ]
  let total = 0
  let sum = 0
  arr.forEach(item2 => {
    sum += Number(item2 || 0)
  })
  total = sum / arr.length
  return Math.round(total)
}
const getTableData = () => {
    getApi(listQuery.value, '/mosty-jcgl/training/getTraningEvaluate').then((res) => {
        let arr = Array.isArray(res.records) ? res.records : [];
        tableData.value = arr.map(item => {
            return {
                ...item,
                totalEffects: getAverageScore(item),
            }
        });
        total.value = res.total
    })
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>
<style scoped lang="scss">
.list{
    display: flex;
    align-items: center;
    >span{
        color: #333;
        width: 200px;
        text-align: right;
        margin-right: 10px;
    }
}
</style>
