<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header v-if="parentObj.TYPE === 'add'" content="学员列表" @back="goPrevious"/>
      <div class="detail-container">
        <div class="app-search mt-10">
          <el-form ref="searchForm" :model="searchForm" label-width="100px" >
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名" prop="NAME">
                  <el-input v-model="searchForm.NAME" placeholder="请输入姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="部门" prop="DEPARTMENT_ID">
                  <el-select v-model="searchForm.DEPARTMENT_ID" style="width: 100%;" @change="getPost">
                    <el-option v-for="item in departmentList" :key="item.DEPARTMENT_ID" :value="item.DEPARTMENT_ID" :label="item.NAME"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="工种" prop="POST_ID">
                  <el-select v-model="searchForm.POST_ID" style="width: 100%;" @change="getPost">
                    <el-option v-for="item in postList" :key="item.POST_ID" :value="item.POST_ID" :label="item.NAME"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-show="!searchFormCollapse" :span="6">
                <el-form-item label="学习状态" prop="STUDYSTATE">
                  <el-select v-model="searchForm.STUDYSTATE" style="width: 100%;">
                    <el-option value="0" label="未学习"/>
                    <el-option value="1" label="学习中"/>
                    <el-option value="2" label="已学完"/>
                    <el-option value="3" label="已完成"/>
                    <el-option value="4" label="未完成"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-show="!searchFormCollapse" :span="6">
                <el-form-item label="考试状态" prop="STAGEEXAMSTATE">
                  <el-select v-model="searchForm.STAGEEXAMSTATE" style="width: 100%;">
                    <el-option value="0" label="不考试"/>
                    <el-option value="1" label="待考试"/>
                    <el-option value="2" label="考试未通过"/>
                    <el-option value="3" label="考试通过"/>
                    <el-option value="4" label="未参加"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-show="!searchFormCollapse" :span="6">
                <el-form-item label="入班时间" prop="TIME">
                  <el-date-picker
                    v-model="searchForm.TIME"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"/>
                </el-form-item>
              </el-col>
              <el-col :span="searchFormCollapse ? 6 : 18">
                <el-form-item style="text-align: right">
                  <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getClassStudentList">
                    搜索
                  </el-button>
                  <el-button icon="el-icon-refresh" @click="goKeyReset">
                    重置
                  </el-button>
                  <el-button type="text" @click="searchFormCollapse = !searchFormCollapse">
                    {{ searchFormCollapse ? '展开' : '合并' }}
                    <i :class="searchFormCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"/>
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="app-container">
          <el-table
            v-loading="listLoading"
            ref="dc"
            :data="varList"
            :header-cell-style="{
              background:'#f5f7fa',
              'font-weight': 'bold',
              'color': '#000'
            }"
            height="500"
            tooltip-effect="dark"
            border
            fit
            highlight-current-row>
            <el-table-column :reserve-selection="true" type="selection" width="55" align="center" fixed="left"/>
            <el-table-column type="index" label="序号" width="50" align="center" fixed="left"/>
            <el-table-column fixed width="100" prop="NAME" label="姓名"/>
            <el-table-column width="200" prop="DEPARTMENT_NAME" label="部门"/>
            <el-table-column width="200" prop="POST_NAME" label="工种"/>
            <el-table-column width="200" prop="USER_ID_CARD" label="身份证号"/>
            <el-table-column width="200" prop="FILE_NUMBER" label="档案编号"/>
            <el-table-column width="100" show-overflow-tooltip prop="AUTHENTICATION" label="人脸认证">
              <template slot-scope="{row}">
                {{ row.AUTHENTICATION == '0' ? '未认证' : '已认证' }}
              </template>
            </el-table-column>
            <el-table-column width="100" prop="ALL_CLASSHOUR" label="要求学时"/>
            <el-table-column width="100" prop="COMPLETE_CLASSHOUR" label="已完成学时">
              <template slot-scope="{row}">
                <template v-if="row.COMPLETE_CLASSHOUR">{{ row.COMPLETE_CLASSHOUR == 0.0 ? 0:parseFloat(row.COMPLETE_CLASSHOUR).toFixed(1) }}</template>
              </template>
            </el-table-column>
            <el-table-column width="100" prop="STAGEEXAMSTATE" label="考试状态" align="center" >
              <template slot-scope="{row}">
                <template v-if="row.STAGEEXAMSTATE=='0'">不考试</template>
                <template v-else-if="row.STAGEEXAMSTATE=='1'">待考试</template>
                <template v-else-if="row.STAGEEXAMSTATE=='2'">考试未通过</template>
                <template v-else-if="row.STAGEEXAMSTATE=='3'">考试通过</template>
                <template v-else-if="row.STAGEEXAMSTATE=='4'">未参加</template>
              </template>
            </el-table-column>
            <el-table-column width="100" prop="STUDYSTATE" label="学习状态">
              <template slot-scope="{row}">
                <span v-if="row.STUDYSTATE == '0'">未学习</span>
                <span v-if="row.STUDYSTATE == '1'">学习中</span>
                <span v-if="row.STUDYSTATE == '2'">已学完</span>
                <span v-if="row.STUDYSTATE == '3'">已完成</span>
                <span v-if="row.STUDYSTATE == '4'">未完成</span>
              </template>
            </el-table-column>
            <el-table-column prop="OPERATORNAME" label="操作人"/>
            <!--            <el-table-column width="100" prop="HASUSERSIGN" label="有无证件照片">
              <template slot-scope="{row}">
                {{ row.HASUSERSIGN == 1 ? '有' : '无' }}
              </template>
            </el-table-column>-->
            <el-table-column width="150" prop="CREATTIME" label="入班时间"/>
            <el-table-column label="操作" align="center" width="210" fixed="right">
              <template slot-scope="{row}">
                <el-button type="text" @click="studentsDialogShow(row.STUDENT_ID)">查看</el-button>
                <span v-show="del" class="app-divider"/>
                <el-button v-show="del" type="text" @click="handleDelete(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="getClassStudentList"/>
          </div>
        </div>
      </div>
    </div>
    <!--    新增学员-->
    <el-dialog :visible.sync="studentsDialog.visible" :title="studentsDialog.type === 'add'?'新增学员':'学员信息'" width="70%">
      <el-form ref="studentsDialogForm" :model="studentsDialog.form" :rules="studentsDialog.rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="USER_ID_CARD">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.USER_ID_CARD"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="NAME">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.NAME"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="PHONE">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.PHONE"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="DEPARTMENT_ID">

              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.DEPARTMENT_NAME"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工种" prop="POST_ID">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.POST_NAME"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员类型" prop="PERSONNEL_TYPE">
              <el-select :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.PERSONNEL_TYPE" style="width: 100%;">
                <el-option v-for="item in personnelTypeList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="DEGREE_OF_EDUCATION">
              <el-select :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.DEGREE_OF_EDUCATION" style="width: 100%;">
                <el-option v-for="item in educationList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业" prop="MAJOR">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.MAJOR"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作单位" prop="ENTERPRISE_ID">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.CORP_NAME"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务/职称" prop="DUTIES">
              <el-input :disabled = "!studentsDialog.changeFlag" v-model="studentsDialog.form.DUTIES"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="closeStudentInfo">取 消</el-button>
        <el-button v-if="studentsDialog.type === 'add'" type="primary" @click="studentsDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!--    批量新增学员-->
    <el-dialog :visible.sync="batchStudentsDialog.visible" title="批量新增学员" width="70%">
      <el-form :model="batchStudentsDialog.form" label-width="70px">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="学员名称">
              <el-input v-model="batchStudentsDialog.form.KEYWORDS" placeholder="请输入试卷名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作单位">
              <el-input v-model="batchStudentsDialog.form.ENTERPRISE" placeholder="请输入试卷名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="5px">
              <el-button v-waves type="primary" icon="el-icon-search" @click="batchStudentsDialogShow">
                搜索
              </el-button>
              <el-button v-waves icon="el-icon-refresh" class="ml-10" @click="batchStudentsDialogListGoKeyReset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="app-container">
        <el-table
          v-loading="batchStudentsDialog.listLoading"
          ref="multipleTable"
          :data="batchStudentsDialog.varList"
          :row-key="getRowKey"
          :header-cell-style="{
            background:'#f5f7fa',
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column show-overflow-tooltip prop="NAME" label="学员姓名"/>
          <el-table-column show-overflow-tooltip prop="PHONE" label="联系电话"/>
          <el-table-column show-overflow-tooltip prop="USER_ID_CARD" label="证件号码"/>
          <el-table-column show-overflow-tooltip prop="SEX_NAME" label="性别"/>
          <el-table-column show-overflow-tooltip prop="ENTERPRISE" label="工作单位"/>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination
            :total="batchStudentsDialog.total"
            :page.sync="batchStudentsDialog.listQuery.page"
            :limit.sync="batchStudentsDialog.listQuery.limit"
            @pagination="batchStudentsDialogShow"/>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="batchStudentsDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="batchStudentsDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!--    excel导入新增学员-->
    <el-dialog :visible.sync="excelStudentsDialog.visible" title="Excel导入学员" width="70%">
      <div class="flexdcc">
        <div class="export-box">
          <h1>1 <span>下载并填写导入模板</span></h1>
          <div>
            <span style="margin-top: 20px; margin-right: 20px; color: rgb(64, 158, 255); cursor: pointer;" @click="downloadExcel">导入模板</span>
          </div>
        </div>
        <div class="export-box">
          <h1>2 <span>导入编写好的Excel文档</span></h1>
          <div>
            <div style="margin: 20px 0 10px;">
              <el-upload
                ref="uploadExcel"
                :on-exceed="handleExcelExceed"
                :on-change="handleChangeExcel"
                :limit="1"
                :auto-upload="false"
                action="#"
                accept=".xls,.xlsx"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传 xls、xlsx 格式的 Excel 文件</div>
              </el-upload>
            </div>
            <div>
              <el-button @click="submitExcelDebounce">开始导入</el-button>
            </div>
          </div>
        </div>
        <div class="export-box">
          <h1> <span>导入结果</span></h1>
          <div class="studentNum" v-html="excelStudentsDialog.message"/>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="excelStudentsDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--    改变工种-->
    <el-dialog :visible.sync="postDialogFormVisible.visible" title="改变工种">
      <el-form ref="changePost" :model="postDialogFormVisible.changePost" :rules="postDialogFormVisible.changePostRoles">
        <el-form-item :label-width="formLabelWidth" label="学员姓名">
          <el-input v-model="postDialogFormVisible.changePost.NAME" disabled/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="学员身份证号码">
          <el-input v-model="postDialogFormVisible.changePost.USER_ID_CARD" disabled/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="档案编号">
          <el-input v-model="postDialogFormVisible.changePost.FILE_NUMBER" disabled/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="原部门">
          <el-input v-model="postDialogFormVisible.changePost.DEPARTMENT_NAME_OLD" disabled/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="新部门" prop="DEPARTMENT_ID">
          <el-select v-model="postDialogFormVisible.changePost.DEPARTMENT_ID" @change="handleChoiceDepartmentId">
            <el-option v-for="item in departmentList" :key="item.DEPARTMENT_ID" :value="item.DEPARTMENT_ID" :label="item.NAME"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="原工种">
          <el-input v-model="postDialogFormVisible.changePost.POST_NAME_OLD" disabled/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="新工种" prop="POST_ID">
          <el-select v-model="postDialogFormVisible.changePost.POST_ID" @change="handleChoessPostId">
            <el-option v-for="item in postDialogFormVisible.changePostList" :key="item.POST_ID" :value="item.POST_ID" :label="item.NAME" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="postDialogFormVisible.visible = false">取 消</el-button>
        <el-button type="primary" @click="changeStudentPostSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import { debounce } from 'throttle-debounce'

export default {
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      searchFormCollapse: true,
      add: false,
      del: false,
      edit: false,
      postDialogFormVisible: {
        visible: false,
        changePost: {
          USER_ID_CARD: '',
          NAME: '',
          FILE_NUMBER: '',
          CLASS_ID: '',
          STUDENT_ID: '',
          USER_ID: '',
          POST_NAME: '',
          POST_NAME_OLD: '',
          POST_ID_LAST: '',
          DEPARTMENT_NAME_OLD: '',
          DEPARTMENT_NAME: '',
          DEPARTMENT_ID: '',
          POST_ID: ''
        },
        changePostList: [],
        changePostRoles: {
          POST_ID: [
            { required: true, message: '请选择工种', trigger: 'change' }
          ],
          DEPARTMENT_ID: [
            { required: true, message: '请选择部门', trigger: 'change' }
          ]
        }
      },
      formLabelWidth: '120px',
      searchForm: {
        NAME: '',
        USER_ID_CARD: '',
        USERNAME: '',
        AUTHENTICATION: '',
        STUDYSTATE: '',
        STAGEEXAMSTATE: '',
        TIME: [],
        HAS_USER_SIGN: ''
      },
      listLoading: false,
      varList: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      enterpriseList: [],
      educationList: [],
      majorList: [],
      dutiesList: [],
      personnelTypeList: [],
      departmentList: [],
      postList: [],
      user: '',
      studentsDialog: {
        type: '',
        visible: false,
        form: {
          USER_ID_CARD: '',
          NAME: '',
          PHONE: '',
          DEGREE_OF_EDUCATION: '',
          MAJOR: '',
          ENTERPRISE_ID: '',
          DUTIES: '',
          DEPARTMENT_ID: '',
          POST_ID: '',
          PERSONNEL_TYPE: '',
          FILE_NUMBER: ''
        },
        rules: {
          USER_ID_CARD: [
            { required: true, message: '请输入身份证号', trigger: 'change' },
            {
              pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0\d|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
              message: '请输入正确的身份证号',
              trigger: 'blur'
            }
          ],
          NAME: [
            { required: true, message: '请输入姓名', trigger: 'change' }
          ],
          // PHONE: [
          //   { required: true, message: '请输入手机号', trigger: 'change' },
          //   {
          //     pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/,
          //     message: '请输入正确的手机号',
          //     trigger: 'blur'
          //   }
          // ],
          DEGREE_OF_EDUCATION: [
            { required: false, message: '请选择学历', trigger: 'change' }
          ],
          MAJOR: [
            { required: false, message: '请输入专业', trigger: 'change' }
          ],
          ENTERPRISE_ID: [
            { required: false, message: '请选择工作单位', trigger: 'change' }
          ],
          DUTIES: [
            { required: false, message: '请输入职务/职称', trigger: 'change' }
          ],
          DEPARTMENT_ID: [
            { required: true, message: '请选择部门', trigger: 'change' }
          ],
          POST_ID: [
            { required: true, message: '请选择工种', trigger: 'change' }
          ],
          PERSONNEL_TYPE: [
            { required: false, message: '请选择人员类型', trigger: 'change' }
          ]
          // ,
          // FILE_NUMBER: [
          //   { required: true, message: '请输入档案编号', trigger: 'blur' }
          // ]
        },
        changeFlag: true
      },
      batchStudentsDialog: {
        visible: false,
        listLoading: false,
        varList: [],
        total: 0,
        form: {
          KEYWORDS: '',
          ENTERPRISE: ''
        },
        listQuery: {
          page: 1,
          limit: 10
        }
      },
      excelStudentsDialog: {
        visible: false,
        message: ''
      }
    }
  },
  inject: ['setActiveName', 'parentObj', 'setSTUDENT_ID'],
  created() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.getClassStudentList()
    // this.getEnterprise()
    this.getDict('d7d80f08d73a4accbccf4fd3d8d1d867', 'educationList')
    this.getDict('0b62f92b0b624aab8e89a77304a64d5e', 'personnelTypeList')
    this.getDepartment()
    this.hasButton()
  },
  methods: {
    getDepartment() {
      requestFN('/department/listByEntAndClass', {
        ENTERPRISE_ID: this.parentObj.ENTERPRISE_ID,
        CLASS_ID: this.parentObj.CLASS_ID
      }).then((data) => {
        this.departmentList = data.varList
      })
    },
    getPost(e) {
      requestFN('/department/listByDepAndClass', {
        DEPARTMENT_ID: e,
        CLASS_ID: this.parentObj.CLASS_ID
      }).then((data) => {
        this.postList = data.postList
      })
    },
    getDict(DICTIONARIES_ID, list) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[list] = data.list
      })
    },
    getEnterprise() {
      requestFN(
        'corpEnterpriseContact/listByCorp',
        {}
      ).then((data) => {
        this.enterpriseList = data.varList
      }).catch((e) => {
      })
    },
    getClassStudentList() {
      this.listLoading = true
      requestFN('/class/classStudentList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page, {
        CLASS_ID: this.parentObj.CLASS_ID,
        ...this.searchForm,
        START_TIME: this.searchForm.TIME[0],
        END_TIME: this.searchForm.TIME[1]
      }).then(res => {
        this.listLoading = false
        this.varList = res.varList
        this.total = res.page.totalResult
      })
    },
    goKeyReset() {
      this.searchForm = {
        NAME: '',
        DEPARTMENT_ID: '',
        POST_ID: '',
        STUDYSTATE: '',
        TIME: []
      }
      this.postList = []
      this.$refs.searchForm.resetFields()
      this.getClassStudentList()
    },
    studentsDialogShow(STUDENT_ID) {
      this.studentsDialog.changeFlag = false
      requestFN('/class/goStuEdit', {
        STUDENT_ID
      }).then((data) => {
        this.studentsDialog.form = data.pd
        // this.getPost(data.pd.DEPARTMENT_ID)
        this.studentsDialog.visible = true
        this.studentsDialog.type = 'edit'
      })
    },
    batchStudentsDialogShow() {
      this.batchStudentsDialog.visible = true
      this.batchStudentsDialog.listLoading = true
      return requestFN(`/studentcorpinfo/list?showCount=${this.batchStudentsDialog.listQuery.limit}&currentPage=${this.batchStudentsDialog.listQuery.page}`, {
        ...this.batchStudentsDialog.form
      }).then((data) => {
        this.$refs.multipleTable && this.$refs.multipleTable.clearSelection()
        this.batchStudentsDialog.varList = data.varList
        this.batchStudentsDialog.total = data.page.totalResult
        this.batchStudentsDialog.listLoading = false
      })
    },
    // 改变工种dialog
    handleChangePost(row) {
      this.postDialogFormVisible.changePost.USER_ID_CARD = row.USER_ID_CARD
      this.postDialogFormVisible.changePost.NAME = row.NAME
      this.postDialogFormVisible.changePost.FILE_NUMBER = row.FILE_NUMBER
      this.postDialogFormVisible.changePost.POST_NAME_OLD = row.POST_NAME
      this.postDialogFormVisible.changePost.POST_ID_LAST = row.POST_ID
      this.postDialogFormVisible.changePost.STUDENT_ID = row.STUDENT_ID
      this.postDialogFormVisible.changePost.CLASS_ID = row.CLASS_ID
      this.postDialogFormVisible.changePost.USER_ID = row.USER_ID
      this.postDialogFormVisible.changePost.DEPARTMENT_NAME_OLD = row.DEPARTMENT_NAME
      this.postDialogFormVisible.changePost.POST_ID = ''
      this.postDialogFormVisible.changePost.POST_NAME = ''
      this.postDialogFormVisible.changePostList = []
      this.postDialogFormVisible.changePost.DEPARTMENT_ID = row.DEPARTMENT_ID

      // requestFN('/post/listByDepAndClass', {
      //   DEPARTMENT_ID: row.DEPARTMENT_ID,
      //   CLASS_ID: this.parentObj.CLASS_ID
      // }).then((data) => {
      //   this.postDialogFormVisible.changePostList = data.postList
      // })
      this.postDialogFormVisible.visible = true
      this.handleChoiceDepartmentId(row.DEPARTMENT_ID, this.postDialogFormVisible.changePost.POST_ID_LAST)
    },
    handleChoiceDepartmentId(val) {
      const departInfo = this.departmentList.find(x => x.DEPARTMENT_ID == val)
      this.postDialogFormVisible.changePost.DEPARTMENT_NAME = departInfo.NAME
      this.postDialogFormVisible.changePost.POST_ID = ''
      this.postDialogFormVisible.changePost.DEPARTMENT_ID = val
      this.getChangePostList(val, this.postDialogFormVisible.changePost.POST_ID_LAST)
    },
    handleChoessPostId(val) {
      const postItem = this.postDialogFormVisible.changePostList.filter(x => x.POST_ID == val)
      this.postDialogFormVisible.changePost.POST_NAME = postItem[0].NAME
    },

    getChangePostList(DEPARTMENT_ID, POST_ID_LAST) {
      requestFN('/post/listByDepAndClass', {
        DEPARTMENT_ID: DEPARTMENT_ID,
        CLASS_ID: this.parentObj.CLASS_ID
      }).then((data) => {
        const co = data.postList
        this.postDialogFormVisible.changePostList = co.filter(x => x.POST_ID != POST_ID_LAST)
      })
    },
    // 改变工种dialog
    changeStudentPostSubmit() {
      if (this.postDialogFormVisible.changePost.POST_ID === '') {
        this.$message({
          message: '请选择工种',
          type: 'error'
        })
        return
      }
      this.$confirm('确定要改变工种？改变工种后，会删除该学员在本班级内之前所有的考试记录及学习记录。', '改变工种', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN('/coursestudyvideorecord/changePostDelTestAndStudyLog',
          {
            CLASS_ID: this.postDialogFormVisible.changePost.CLASS_ID,
            STUDENT_ID: this.postDialogFormVisible.changePost.STUDENT_ID,
            USER_ID: this.postDialogFormVisible.changePost.USER_ID,
            POST_NAME: this.postDialogFormVisible.changePost.POST_NAME,
            DEPARTMENT_ID: this.postDialogFormVisible.changePost.DEPARTMENT_ID,
            DEPARTMENT_NAME: this.postDialogFormVisible.changePost.DEPARTMENT_NAME,
            POST_ID: this.postDialogFormVisible.changePost.POST_ID
          }).then((data) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.postDialogFormVisible.visible = false
          this.getClassStudentList()
        })
      }).catch(() => {})
    },
    handleDelete(STUDENT_ID) {
      this.$confirm('确定要从本班移除该学员吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN('/class/deleteStudent', { STUDENT_ID }).then((data) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getClassStudentList()
        })
      }).catch(() => {})
    },
    goToLearningrecords(STUDENT_ID) {
      this.setActiveName('Learningrecords')
      this.setSTUDENT_ID(STUDENT_ID)
    },
    studentsDialogSubmit() {
      this.$refs.studentsDialogForm.validate((valid) => {
        if (valid) {
          let DEPARTMENT_NAME
          let POST_NAME
          for (let i = 0; i < this.departmentList; i++) {
            if (this.departmentList[i].DEPARTMENT_ID === this.studentsDialog.form.DEPARTMENT_ID) {
              DEPARTMENT_NAME = this.departmentList[i].NAME
              break
            }
          }
          for (let i = 0; i < this.postList; i++) {
            if (this.postList[i].POST_ID === this.studentsDialog.form.POST_ID) {
              POST_NAME = this.postList[i].NAME
              break
            }
          }
          requestFN(!this.studentsDialog.form.STUDENT_ID ? '/student/add' : '/classStudent/edit', {
            ...this.studentsDialog.form,
            CLASS_ID: this.parentObj.CLASS_ID,
            DEPARTMENT_NAME,
            POST_NAME
          }).then((res) => {
            if (res.msg) {
              this.$message({
                message: res.msg,
                type: 'warning'
              })
            } else {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.studentsDialog.visible = false
              this.getClassStudentList()
            }
            this.studentsDialog.changeFlag = true
          })
        } else {
          this.$message.error('请检查输入项')
        }
      })
    },
    batchStudentsDialogListGoKeyReset() {
      this.batchStudentsDialog.form.KEYWORDS = ''
      this.batchStudentsDialog.form.ENTERPRISE = ''
      this.batchStudentsDialog.form.BATCH = ''
      this.batchStudentsDialogShow()
    },
    getRowKey(row) {
      return row.STUDENTCORPINFO_ID
    },
    batchStudentsDialogSubmit() {
      const selection = this.$refs.multipleTable.selection
      if (selection.length === 0) {
        this.$message.error('请选择学员')
        return
      }
      const STUDENTIDS = []
      for (let i = 0; i < selection.length; i++) {
        STUDENTIDS.push(selection[i].STUDENTCORPINFO_ID)
      }
      requestFN(`/classStudent/batchAdd`, {
        CLASS_ID: this.parentObj.CLASS_ID,
        STUDENTIDS: STUDENTIDS.join(',')
      }).then((data) => {
        this.$message({
          message: data.message,
          type: 'success'
        })
        this.batchStudentsDialog.visible = false
        this.getClassStudentList()
      })
    },
    // 导出
    derivedRecord() {
      this.$confirm('确定要导出查询出来所有的学习记录？', '导出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 现在导出来查出来的所有的数据
        requestFN('/student/exportStudentList', {
          CLASS_ID: this.parentObj.CLASS_ID,
          ...this.searchForm,
          START_TIME: this.searchForm.TIME[0],
          END_TIME: this.searchForm.TIME[1]
        }).then(res => {
          if (res.varList.length > 0) {
            this.exportList(res.varList)
          } else {
            this.$message.warning(
              '无数据'
            )
          }
        })
      }
      )
    },
    exportList(list) {
      // 导出表头
      const tableData = [
        ['序号', '身份证', '姓名', '性别', '手机号', '部门', '工种', '要求总学时', '已完成学时', '是否考试通过', '考试分数', '学习状态']
      ] // 表格表头
      // 设置边框宽度
      list.forEach((item, index) => {
        if (item.STUDYSTATE == '1') { item.STUDYSTATE = '学习中' }
        if (item.STUDYSTATE == '2') { item.STUDYSTATE = '已学完' }
        if (item.STUDYSTATE == '3') { item.STUDYSTATE = '已完成' }
        if (item.STUDYSTATE == '4') { item.STUDYSTATE = '未完成' }
        if (item.STUDYSTATE == '0') { item.STUDYSTATE = '未学习' }
        if (item.COMPLETE_CLASSHOUR == '0.0') { item.COMPLETE_CLASSHOUR = '0' }
        if (item.ALL_CLASSHOUR == '0.0') { item.ALL_CLASSHOUR = '0' }
        if (item.STAGEEXAMSTATE == '0') { item.PASSED = '不考试' }
        let rowData = []
        const COMPLETE_CLASSHOUR = item.COMPLETE_CLASSHOUR == 0.0 ? 0 : parseFloat(item.COMPLETE_CLASSHOUR).toFixed(1)
        // 导出内容的字段
        rowData = [
          index + 1,
          item.USER_ID_CARD,
          item.NAME,
          item.SEX,
          item.PHONE,
          item.DEPARTMENT_NAME,
          item.POST_NAME,
          item.ALL_CLASSHOUR,
          COMPLETE_CLASSHOUR,
          item.PASSED,
          item.EXAMSCORE,
          item.STUDYSTATE
        ]
        tableData.push(rowData)
      })
      const ws = this.XLSX.utils.aoa_to_sheet(tableData)
      const wb = this.XLSX.utils.book_new()
      this.XLSX.utils.book_append_sheet(wb, ws, '学员统计') // 工作簿名称
      this.XLSX.writeFile(wb, '学员统计表.xlsx') // 保存的文件名
      this.$message.success('导出成功')
    },
    excelStudentsDialogShow() {
      this.excelStudentsDialog.message = ''
      this.$refs.uploadExcel && this.$refs.uploadExcel.clearFiles()
      this.excelStudentsDialog.visible = true
    },
    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
    },
    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()
      }
    },
    // 防抖
    submitExcelDebounce: debounce(1000, function() {
      this.submitExcel()
    }),
    submitExcel() {
      if (this.$refs.uploadExcel.uploadFiles.length === 0) {
        this.$message.error('请选择上传文件!')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('FFILE', this.$refs.uploadExcel.uploadFiles[0].raw)
      formData.append('CLASS_ID', this.parentObj.CLASS_ID)
      formData.append('ENTERPRISE_ID', this.parentObj.ENTERPRISE_ID)
      upload('/student/readExcel', formData).then(data => {
        if (data.msg) {
          this.$message({
            message: data.msg,
            type: 'warning'
          })
        } else {
          this.excelStudentsDialog.message = data.resultStr
          this.getClassStudentList()
          this.getDepartment()
          loading.close()
        }
      })
      loading.close()
    },
    goBack() {
      this.setActiveName('List')
    },
    goPrevious() {
      this.setActiveName('AddClass')
    },
    goNext() {
      this.setActiveName('CourseList')
    },
    closeStudentInfo() {
      this.studentsDialog.visible = false
      this.studentsDialog.changeFlag = true
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'class:add,class:del,class:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.classfhadminadd		// 新增权限
        this.del = data.classfhadmindel		// 删除权限
        this.edit = data.classfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
