<template>
  <!--  班级列表-->
  <div class="app-warp">
    <div class="app-structure">
      <el-page-header content="班级详情" @back="goBack"/>
      <div class="app-search" style="margin-top: 20px">
        <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="班级名称" prop="CLASSNAME" label-width="80px">
                <el-input v-model="searchFrom.CLASSNAME" placeholder="请输入班级名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年份" prop="searchFrom.YEAR" label-width="80px">
                <el-date-picker v-model="searchFrom.YEAR" value-format="yyyy" type="year" style="width: 100%;"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="10px">
                <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getQuery">
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :header-cell-style="{
            background:'#f5f7fa',
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"/>
          <el-table-column
            show-overflow-tooltip
            prop="NAME"
            label="班级名称"/>
          <el-table-column
            v-if="checkList.includes('班级编码')"
            :show-overflow-tooltip="true"
            prop="CODE"
            label="班级编码"/>
          <el-table-column
            v-if="checkList.includes('培训类型')"
            :show-overflow-tooltip="true"
            prop="TRAINTYPENAME"
            label="培训类型"/>
          <el-table-column
            v-if="checkList.includes('行业类型')"
            :show-overflow-tooltip="true"
            prop="INDUSTRY_ALL_NAME"
            label="行业类型"/>
          <el-table-column
            v-if="checkList.includes('岗位类型')"
            :show-overflow-tooltip="true"
            prop="POSTTYPENAME"
            label="岗位类型"/>
          <el-table-column
            v-if="checkList.includes('效果评估通过人数')"
            :show-overflow-tooltip="true"
            prop="PASSSTUDENTCOUNT"
            label="效果评估通过人数"/>
          <el-table-column
            v-if="checkList.includes('效果评估总人数')"
            :show-overflow-tooltip="true"
            prop="ALLSTUDENTCOUNT"
            label="效果评估总人数"/>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="{row}">
              <el-button type="text" @click="goToStudentStrengthenDetailsList(row.CLASS_ID)">学员详情</el-button>
              <el-button type="text" @click="openEvaluationDialog(row.CLASS_ID)">班级效果评估表</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="evaluationDialog" title="效果评估表" top="55px" width="1000px" style="margin-bottom: 50px">

      <div class="box">
        <el-button type="primary" icon="el-icon-download" style="float: right" @click="downloadWord">导出</el-button>
        <h1 style="text-align: center; margin-left: 60px">安全生产教育培训动态评估报告</h1>
        <p class="p1" style="width: 100%; text-align: center">
          企业名称: {{ evaluationDialogForm.ENTERPRISE_NAME }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          评估日期: {{ formatDate(evaluationDialogForm.END_TIME) }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </p>
        <h3>一、评估概述</h3>
        <p class="p1">本报告旨在对{{ evaluationDialogForm.ENTERPRISE_NAME }} 的安全生产培训进行动态评估，安全生产培训的目标是提高员工的安全意识和技能，促进工作场所的安全管理和事故预防。本报告将对培训的实施情况、培训效果、参与度、员工考试通过率、知识盲点以及可能的改进措施进行评估和分析。</p>
        <h3>二、评估内容</h3>
        <p class="p1">贵公司于{{ formatDate(evaluationDialogForm.START_TIME) }} - {{ formatDate(evaluationDialogForm.END_TIME) }}进行了{{ evaluationDialogForm.CLASS_NAME }}培训，培训内容如下：{{ evaluationDialogForm.coursewareName }}</p>
        <h3>三、考试结果</h3>
        <p class="p1"><b>（一）本次考试共{{ evaluationDialogForm.EXMA_COUNT }}人参加，合格人数{{ evaluationDialogForm.PASS_COUNT }}人，未合格人数{{ evaluationDialogForm.NO_PASS_COUNT }}人，通过率{{ evaluationDialogForm.passRate }}%。具体情况如下：</b></p>
        <div id="chart" ref="chart" style="width:900px ;height:320px;"/>
        <p class="p1"><b>（二）评估结果和分析</b></p>
        <p class="p1">基于评估结果和培训过程中的观察，我们对员工的知识盲点进行分析，指出可能存在的理解不足或需要加强的知识领域，主要知识盲点体现为：</p>
        <p class="p1">{{ evaluationDialogForm.error }}</p>
        <table align="center" border="1" cellspacing="0" width="80%" class="table">
          <tr>
            <td>标签名称</td>
            <td>错误率</td>
          </tr>
          <tr v-for="(value, key) in evaluationDialogForm.ratioMap" :key="key">
            <td>{{ key }}</td>
            <td>{{ value }}%</td>
          </tr>
        </table>
        <p class="p1">知识盲点对应课件为：</p>
        <p class="p1">{{ evaluationDialogForm.errorVideoName }}</p>
        <p class="p1"><b>（三）评估建议</b></p>
        <p class="p1">存在的知识盲点需要进一步加强和补充。我们建议您将重点放在弥补这些盲点上，通过进一步学习、参与讨论或与安全专家交流弥补知识盲区。</p>
        <h3>四、强化培训记录</h3>
        <p class="p1"><b>（一）强化培训考试记录</b></p>
        <table align="center" border="1" cellspacing="0" width="80%" class="table">
          <tr>
            <td colspan="3">班级名称</td>
            <td colspan="3">培训时间</td>
          </tr>
          <tr>
            <td colspan="3">{{ evaluationDialogForm.CLASS_NAME }}</td>
            <td colspan="3">{{ formatDate(evaluationDialogForm.START_TIME) }} - {{ formatDate(evaluationDialogForm.END_TIME) }}</td>
          </tr>
          <tr>
            <td colspan="3">培训人数</td>
            <td colspan="3">合格人数</td>
          </tr>
          <tr>
            <td colspan="3">{{ evaluationDialogForm.STR_EXMA_COUNT }}</td>
            <td colspan="3">{{ evaluationDialogForm.STR_PASS_COUNT }}</td>
          </tr>
          <tr>
            <td colspan="6">合格学员名单</td>
          </tr>
          <tr>
            <td style="width: 10%">序号</td>
            <td style="width: 15%">姓名</td>
            <td style="width: 25%">身份证号</td>
            <td style="width: 20%">手机号</td>
            <td style="width: 10%">性别</td>
            <td style="width: 25%">效果评估成绩</td>
          </tr>
          <tr v-for="(value, key) in evaluationDialogForm.PASS_List" :key="key">
            <td style="width: 10%">{{ key+1 }}</td>
            <td style="width: 15%">{{ value.NAME }}</td>
            <td style="width: 25%">{{ value.USER_ID_CARD }}</td>
            <td style="width: 20%">{{ value.PHONE }}</td>
            <td style="width: 10%">{{ value.SEX }}</td>
            <td style="width: 25%">{{ value.STRENGTHENEXAMSCORE }}</td>
          </tr>
          <tr>
            <td colspan="6">未合格学员名单</td>
          </tr>
          <tr>
            <td style="width: 10%">序号</td>
            <td style="width: 15%">姓名</td>
            <td style="width: 25%">身份证号</td>
            <td style="width: 20%">手机号</td>
            <td style="width: 10%">性别</td>
            <td style="width: 25%">效果评估成绩</td>
          </tr>
          <tr v-for="(value, key) in evaluationDialogForm.NO_PASS_List" :key="key">
            <td style="width: 10%">{{ key+1 }}</td>
            <td style="width: 15%">{{ value.NAME }}</td>
            <td style="width: 25%">{{ value.USER_ID_CARD }}</td>
            <td style="width: 20%">{{ value.PHONE }}</td>
            <td style="width: 10%">{{ value.SEX }}</td>
            <td style="width: 25%">{{ value.STRENGTHENEXAMSCORE }}</td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="evaluationDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import waves from '@/directive/waves' // waves directive
import dateformat from '@/utils/dateformat'

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      varList: [],
      degreeOfEducationList: [],
      personnelTypeList: [],
      enterpriseList: [],
      ENTERPRISE_ID: '',
      searchFrom: {
        CLASSNAME: '',
        YEAR: ''
      },
      NAME: '',
      searchFromCollapse: true,
      checkList: ['企业名称', '班级编码', '培训类型', '行业类型', '岗位类型', '效果评估通过人数', '效果评估总人数'],
      checkboxList: ['企业名称', '班级编码', '培训类型', '行业类型', '岗位类型', '效果评估通过人数', '效果评估总人数'],
      trainTypeList: [],
      trainingFormList: [],
      assessmentMethodsList: [],
      evaluationDialog: false,
      evaluationDialogForm: {},
      evaluationDialogCLASS_ID: '',
      count1: '',
      count2: '',
      count3: ''
    }
  },
  inject: ['setActiveName', 'parentObj', 'setCLASS_ID'],
  created() {
    this.searchFrom.YEAR = ''
    this.listLoading = false
    this.getList()
    this.getEnterprise()
    this.getTrainTypeList()
    this.getDict('a2dd354f453645f0b22e3726f0dd4b1f', 'trainingFormList')
    this.getDict('73c3ce2ce63242fbb9ae76969dc9ab6d', 'assessmentMethodsList')
  },
  methods: {
    formatDate(date, column) {
      if (date) {
        return dateformat(date, 'YYYY年MM月DD日')
      } else {
        return ''
      }
    },
    goToStudentStrengthenDetailsList(CLASS_ID) {
      this.setActiveName('StudentStrengthenDetailsList')
      this.setCLASS_ID(CLASS_ID)
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.searchFrom.CLASSNAME = ''
      this.searchFrom.YEAR = ''
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      requestFN(
        '/effect/strengthenlist?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchFrom,
          ENTERPRISE_ID: this.parentObj.ENTERPRISE_ID,
          CORPINFO_ID: this.parentObj.CORPINFO_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.stuNum = data.stuNum
        this.clsNum = data.clsNum
        this.enterStuNum = data.enterStuNum
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    openEvaluationDialog(CLASS_ID) {
      this.evaluationDialogCLASS_ID = CLASS_ID
      requestFN('/class/getEvaluation', {
        CLASS_ID: CLASS_ID
      }).then((data) => {
        this.evaluationDialogForm = data.pageData
        this.count1 = data.pageData.count1
        this.count2 = data.pageData.count2
        this.count3 = data.pageData.count3
        this.$nextTick(function() {
          this.getPie()
        })
        this.evaluationDialog = true
      })
    },
    goEdit(TRAINING_PLAN_ID) {
      requestFN('/trainingplan/goEdit', {
        TRAINING_PLAN_ID: TRAINING_PLAN_ID
      }).then(data => {
        this.planEditDialog.form = data.pd
        const dateArray = [
          data.pd.START_TIME, data.pd.END_TIME
        ]
        this.$set(this.planEditDialog.form, 'DATES', dateArray)
      })
    },
    getTrainTypeList() {
      requestFN(
        'trainingtype/listAll',
        {}
      ).then((data) => {
        this.trainTypeList = data.varList
      }).catch((e) => {
      })
    },
    resetForm() {
      this.planEditDialog.form = {
        TRAINING_PLAN_ID: '',
        ORGANIZING_DEPARTMENT: '',
        TRAINING_CONTENT: '',
        ATTEND_DEPARTMENT: '',
        PARTICIPANT: '',
        TRAINING_PERIOD: '',
        TRAINING_FORM: '',
        DATES: [],
        START_TIME: '',
        END_TIME: '',
        EVALUATION_METHODS: '',
        DESCR: '',
        ENTERPRISE_ID: ''
      }
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.planEditDialog.form.DATES && this.planEditDialog.form.DATES.length === 2) {
            this.planEditDialog.form.START_TIME = this.planEditDialog.form.DATES[0]
            this.planEditDialog.form.END_TIME = this.planEditDialog.form.DATES[1]
          }
          requestFN(
            '/trainingplan/' + this.planEditDialog.type,
            this.planEditDialog.form
          ).then(data => {
            this.getList()
            this.planEditDialog.visible = false
            loading.close()
          }).catch((e) => {
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    getDict(DICTIONARIES_ID, list) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[list] = data.list
      })
    },
    goToAdd() {
      this.resetForm()
      this.planEditDialog.type = 'add'
      this.planEditDialog.visible = true
    },
    showResult() {
      requestFN('/trainingplan/effectAppraisal', {
        YEAR: this.searchFrom.YEAR
      }).then((data) => {
        this.resultDialog.form = data.pd
      })
      this.resultDialog.infoVisible = true
    },
    goToEdit(TRAINING_PLAN_ID) {
      this.resetForm()
      this.goEdit(TRAINING_PLAN_ID)
      this.planEditDialog.type = 'edit'
      this.planEditDialog.visible = true
    },
    showDetails(TRAINING_PLAN_ID) {
      this.resetForm()
      this.goEdit(TRAINING_PLAN_ID)
      this.planEditDialog.infoVisible = true
    },
    goToDelete(TRAINING_PLAN_ID) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/trainingplan/delete',
          {
            TRAINING_PLAN_ID: TRAINING_PLAN_ID
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    excelStudentsDialogShow() {
      this.$refs.uploadExcel && this.$refs.uploadExcel.clearFiles()
      this.excelStudentsDialog.visible = true
    },
    handleExcelExceed() {
      this.$message.error('只能上传一个文件，如需上传其它文件，可以删除掉当前文件在尝试!')
    },
    handleChangeExcel(file, fileList) {
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const types = ['xls', 'xlsx']
      const isImage = types.includes(suffix)
      if (!isImage) {
        this.$message.error('上传文件只能是 xls、xlsx 格式!')
        fileList.pop()
      }
    },
    downloadExcel() {
      this.$confirm('确定要下载excel模板吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + '/student/downExcel'
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    submitExcel() {
      if (this.$refs.uploadExcel.uploadFiles.length === 0) {
        this.$message.error('请选择上传文件!')
        return
      }
      const formData = new FormData()
      formData.append('FFILE', this.$refs.uploadExcel.uploadFiles[0].raw)
      upload('/studentcorpinfo/readExcel', formData).then(data => {
        this.excelStudentsDialog.message = data.resultStr
        // this.excelStudentsDialog.visible = false
        this.getList()
      })
    },
    goBack() {
      this.setActiveName('list')
    },
    getPie() {
      var bar_dv = this.$refs.chart
      const count1 = this.count1
      const count2 = this.count2
      const count3 = this.count3
      if (bar_dv) {
        const myChart = this.$echarts.init(bar_dv)
        const data = []
        if (count1 != 0) {
          data.push({ value: count1, name: '正确率100%' })
        }
        if (count2 != 0) {
          data.push({ value: count2, name: '正确率80%-100%' })
        }
        if (count3 != 0) {
          data.push({ value: count3, name: '正确率80%以下' })
        }
        myChart.setOption({
          title: {
            text: '人数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '人数',
              type: 'pie',
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              radius: '80%',
              silent: 'ture',
              data: data,
              label: {
                normal: {
                  show: true,
                  position: 'inner',
                  formatter: '{b}\n{c}%',
                  textStyle: {
                    fontWeight: 500,
                    fontSize: '12'
                  }
                }
              }
            }
          ]
        })
      }
    },
    downloadWord() {
      this.$confirm('确定要导出吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(config.httpurl + '/class/hs?CLASS_ID=' + this.evaluationDialogCLASS_ID)
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    }
  }
}

</script>
<style lang="scss" scoped>
.table {
  margin-right: auto;
  margin-left: auto;
}
.table td {
  text-align: center;
  line-height: 30px;
  font-size: 0.9em;
}
.box {
  padding: 0px 30px 30px 30px;
}
.p1 {
  font-size: 1.1em;
  line-height: 26px;
  text-indent: 2em;
}
.flexdcc {
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .export-box {
    width: 100%;
    margin-bottom: 20px;

    h1 {
      padding: 0 5px 10px;
      display: flex;
      align-items: flex-end;
      font-size: 40px;
      border-bottom: 1px dashed rgb(204, 204, 204);

      span {
        margin-left: 20px;
        font-size: 14px;
      }
    }

    & > div {
      padding-left: 30px;
    }

    .studentNum {
      margin: 20px 0 10px;
    }
  }
}
</style>
