<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="STUDENTNAME" label-width="80px">
                <el-input v-model="searchFrom.STUDENTNAME" placeholder="请输入学员名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年份" prop="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
            v-if="checkList.includes('姓名')"
            :show-overflow-tooltip="true"
            prop="STUDENTNAME"
            label="姓名"/>
          <el-table-column
            v-if="checkList.includes('身份证号')"
            :show-overflow-tooltip="true"
            prop="USERIDCARD"
            label="身份证号"/>
          <el-table-column
            v-if="checkList.includes('手机号')"
            :show-overflow-tooltip="true"
            prop="PHONE"
            label="手机号"/>
          <el-table-column
            v-if="checkList.includes('效果评估状态')"
            :show-overflow-tooltip="true"
            prop="STRENGTHENEXAMSTATE"
            label="效果评估状态">
            <template slot-scope="{row}">
              <span>
                {{ row.STRENGTHENEXAMSTATE === '3' ? '通过' : '未通过' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkList.includes('效果评估最高分')"
            :show-overflow-tooltip="true"
            prop="STRENGTHENEXAMSCORE"
            label="效果评估最高分">
            <template slot-scope="{row}">
              <span>
                {{ row.STRENGTHENEXAMSCORE == null ? '未进行评估考试' : row.STRENGTHENEXAMSCORE }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="{row}">
              <el-button type="text" @click="openEvaluationDialog(row.STUDENT_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="1030px" 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.NAME }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          身份证号: {{ evaluationDialogForm.USER_ID_CARD }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          评估日期: {{ formatDate(evaluationDialogForm.OPERATTIME) }}
        </p>
        <h3>一、评估概述</h3>
        <p class="p1">本报告旨在评估您在最近接受的安全培训中的个人效果，并提供课程考试结果以及指出可能存在的知识盲点。安全培训的目标是提高您在工作环境中的安全意识和行为，以减少事故和伤害的发生。本报告将对您的培训参与度、知识掌握程度、课程考试成绩以及可能存在的知识盲点进行评估。</p>
        <h3>二、学员基本情况</h3>
        <table align="center" border="1" cellspacing="0" width="100%" class="table">
          <tr>
            <td style="width: 70px">姓名</td>
            <td style="width: 60px">{{ evaluationDialogForm.NAME }}</td>
            <td style="width: 55px">性别</td>
            <td style="width: 90px">{{ evaluationDialogForm.SEX }}</td>
            <td style="width: 70px">身份证号</td>
            <td style="width: 150px">{{ evaluationDialogForm.USER_ID_CARD }}</td>
            <td style="width: 60px">学历</td>
            <td style="width: 200px">{{ evaluationDialogForm.DEGREE_OF_EDUCATION }}</td>
            <td style="width: 60px">专业</td>
            <td>{{ evaluationDialogForm.MAJOR }}</td>
          </tr>
          <tr>
            <td>职务/职称</td>
            <td>{{ evaluationDialogForm.DUTIES }}</td>
            <td>部门</td>
            <td>{{ evaluationDialogForm.DEPARTMENT_NAME }}</td>
            <td>工种</td>
            <td>{{ evaluationDialogForm.POST_NAME }}</td>
            <td>行业类别</td>
            <td>{{ evaluationDialogForm.INDUSTRY_ALL_NAME }}</td>
            <td>联系电话</td>
            <td>{{ evaluationDialogForm.PHONE }}</td>
          </tr>
          <tr>
            <td>人员类型</td>
            <td colspan="9">{{ evaluationDialogForm.PERSONNEL_TYPE }}</td>
          </tr>
        </table>
        <h3>三、评估内容</h3>
        <p class="p1">您在 {{ formatDate(evaluationDialogForm.START_TIME) }} - {{ formatDate(evaluationDialogForm.END_TIME) }} 进行了 {{ evaluationDialogForm.CLASS_NAME }}， 培训内容如下： {{ evaluationDialogForm.coursewareName }}</p>
        <p class="p1">您参加了培训后的课程考试，并取得了以下成绩：{{ evaluationDialogForm.STAGEEXAMSCORE }}分</p>
        <h3>四、评估结果</h3>
        <p class="p1">根据我们的评估，您的个人培训效果如下：</p>
        <p class="p1"><b>（一）您在培训期间表现出积极的参与度，完成了所有的培训课程和活动；</b></p>
        <p class="p1"><b>（二）<span v-if="evaluationDialogForm.correct != ''">您对 {{ evaluationDialogForm.correct }} 知识掌握得很好。</span>在评估过程中，我们发现您可能存在以下知识盲点：{{ evaluationDialogForm.error }}</b></p>
        <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>

        <div v-if="evaluationDialogForm.STRENGTHEN_EXAMNAME != '0'" class="page-break">
          <div class="levelup no-print">
            <h1>考卷详情</h1>
          </div>
          <div class="paper-details chapter_box">
            <div class="chapter_right_img"/>
            <h1 style="text-align: center">
              {{ evaluationDialogForm.STRENGTHEN_EXAMNAME }}
            </h1>
            <div class="subflex" style="padding: 0px 30px 0px 30px">
              <el-row>
                <el-col :span="6">
                  <span style="line-height: 50px">姓名:{{ evaluationDialogForm.NAME }}</span>
                </el-col>
                <el-col :span="6">
                  <span style="line-height: 50px">试卷满分:{{ evaluationDialogForm.STRENGTHEN_EXAMSCORE }}分</span>
                </el-col>
                <el-col :span="6">
                  <span style="line-height: 50px">学员分数:{{ evaluationDialogForm.STRENGTHENEXAMSCORE }}分</span>
                </el-col>
                <el-col :span="6">
                  <span style="line-height: 50px">考试时间:{{ formatDate(evaluationDialogForm.STRENGTHEN_OPERATTIME) }}</span>
                </el-col>
              </el-row>
            </div>
            <div class="study-papg">
              <dl v-for="(row,key) in evaluationDialogForm.strengthenexamrecord" :key="key">
                <dt>
                  <span v-if="row.QUESTIONTYPE === '1'" class="mark mark-green">(单选题) </span>
                  <span v-if="row.QUESTIONTYPE === '2'" class="mark mark-blue">(多选题)</span>
                  <span v-if="row.QUESTIONTYPE === '3'" class="mark mark-orange">(判断题)</span>
                  <span v-if="row.QUESTIONTYPE === '4'" class="mark mark-purple">(填空题)</span>
                  {{ key + 1 }}.{{ row.QUESTIONDRY }}
                  <span class="ml-10">(题目分值：{{ row.SCORE }})</span>
                </dt>
                <el-radio-group v-if="row.QUESTIONTYPE === '1'" :disabled="true" v-model="row.ANSWER">
                  <dd>
                    <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
                  </dd>
                  <dd>
                    <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
                  </dd>
                  <dd>
                    <el-radio label="C">C.{{ row.OPTIONC }}</el-radio>
                  </dd>
                  <dd>
                    <el-radio label="D">D.{{ row.OPTIOND }}</el-radio>
                  </dd>
                </el-radio-group>
                <el-checkbox-group v-if="row.QUESTIONTYPE === '2'" :disabled="true" v-model="row.checkList" >
                  <dd>
                    <el-checkbox label="A">A.{{ row.OPTIONA }}</el-checkbox>
                  </dd>
                  <dd>
                    <el-checkbox label="B">B.{{ row.OPTIONB }}</el-checkbox>
                  </dd>
                  <dd>
                    <el-checkbox label="C">C.{{ row.OPTIONC }}</el-checkbox>
                  </dd>
                  <dd>
                    <el-checkbox label="D">D.{{ row.OPTIOND }}</el-checkbox>
                  </dd>
                </el-checkbox-group>
                <el-radio-group v-if="row.QUESTIONTYPE === '3'" :disabled="true" v-model="row.ANSWER">
                  <dd>
                    <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
                  </dd>
                  <dd>
                    <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
                  </dd>
                </el-radio-group>
                <div class="flex-layout space-between">
                  <div>
                    <div v-if="row.QUESTIONTYPE === '4'" class="mb-10">
                      学员答案：{{ row.ANSWER }}
                    </div>
                    <div class="mb-10">
                      参考答案：{{ row.ANSWERRIGHT }}
                    </div>
                    <div>
                      答案解析：{{ row.DESCR }}
                    </div>
                  </div>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </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: [],
      CLASS_ID: '',
      searchFrom: {
        STUDENTNAME: '',
        YEAR: ''
      },
      NAME: '',
      searchFromCollapse: true,
      checkList: ['姓名', '身份证号', '手机号', '效果评估状态', '效果评估最高分'],
      checkboxList: ['姓名', '身份证号', '手机号', '效果评估状态', '效果评估最高分'],
      trainTypeList: [],
      trainingFormList: [],
      assessmentMethodsList: [],
      evaluationDialog: false,
      evaluationDialogForm: {},
      evaluationDialogStudent: ''
    }
  },
  inject: ['setActiveName', 'parentObj'],
  created() {
    this.searchFrom.YEAR = ''
    this.listLoading = false
    this.getList()
    this.getTrainTypeList()
    this.getDict('a2dd354f453645f0b22e3726f0dd4b1f', 'trainingFormList')
    this.getDict('73c3ce2ce63242fbb9ae76969dc9ab6d', 'assessmentMethodsList')
  },
  methods: {
    formatDate(date, column) {
      if (date) {
        return dateformat(date, 'YYYY年MM月DD日')
      } else {
        return ''
      }
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.searchFrom.STUDENTNAME = ''
      this.searchFrom.YEAR = ''
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      requestFN(
        '/effect/strengthenstudentlist?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchFrom,
          CLASS_ID: this.parentObj.CLASS_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
      })
    },
    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) => {
      })
    },
    openEvaluationDialog(STUDENT_ID) {
      this.evaluationDialogStudent = STUDENT_ID
      requestFN('/student/getEvaluation', {
        STUDENT_ID: STUDENT_ID
      }).then((data) => {
        if (data.pageData) {
          if (data.pageData.strengthenexamrecord && data.pageData.strengthenexamrecord.length > 0) {
            for (var i = 0; i < data.pageData.strengthenexamrecord.length; i++) {
              if (data.pageData.strengthenexamrecord[i].QUESTIONTYPE === '2' && data.pageData.strengthenexamrecord[i].ANSWER) {
                data.pageData.strengthenexamrecord[i].checkList = this.strToArray(data.pageData.strengthenexamrecord[i].ANSWER)
              }
            }
          }
        }
        this.evaluationDialogForm = data.pageData
        this.evaluationDialog = true
      })
    },
    strToArray(str) {
      return str.split('')
    },
    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('ClassStrengthenDetailsList')
    },
    downloadWord() {
      this.$confirm('确定要导出吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(config.httpurl + '/student/hs?STUDENT_ID=' + this.evaluationDialogStudent)
      }).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.8em;
}
.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>
