<template>
  <!--  班级列表-->
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学员姓名" prop="NAME">
                <el-input v-model="searchFrom.NAME" placeholder="请输入学员姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="添加机构" prop="CORP_NAME">
                <el-input v-model="searchFrom.CORP_NAME" placeholder="请输入添加机构"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作单位" prop="ENTERPRISE">
                <el-input v-model="searchFrom.ENTERPRISE" placeholder="请输入工作单位"/>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="性别" prop="SEX">
                <el-select v-model="searchFrom.SEX" style="width: 100%;">
                  <el-option value="998f8531a6254c2eab5c825fa2d9896f" label="男"/>
                  <el-option value="fdd532d9def447cdb68af3a938f6f05c" label="女"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="是否认证" prop="AUTHENTICATION">
                <el-select v-model="searchFrom.AUTHENTICATION" style="width: 100%;">
                  <el-option value="1" label="已认证"/>
                  <el-option value="0" label="未认证"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="文化水平" prop="DEGREE_OF_EDUCATION">
                <el-select v-model="searchFrom.DEGREE_OF_EDUCATION" style="width: 100%;">
                  <el-option v-for="item in degreeOfEducationList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="人员类型" prop="PERSONNEL_TYPE">
                <el-select v-model="searchFrom.PERSONNEL_TYPE" multiple 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="6">
              <el-form-item style="text-align: right">
                <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-button type="text" @click="searchFromCollapse = !searchFromCollapse">
                  {{ searchFromCollapse ? '展开' : '合并' }}
                  <i :class="searchFromCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"/>
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-tools">
        <div class="app-function">
          <el-button type="primary" icon="el-icon-plus" @click="goToAddStudents('')">新增</el-button>
        </div>
        <div class="app-minbtn">
          <span class="screening">
            <el-dropdown trigger="click">
              <el-button type="text" icon="el-icon-finished"/>
              <el-dropdown-menu slot="dropdown" style="margin-top:3px;">
                <div class="app-checkbox-group">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in checkboxList" :key="item" :label="item" style="display: block"/>
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <el-button type="text" icon="el-icon-refresh-left"/>
          <el-button type="text" icon="el-icon-full-screen"/>
        </div>
      </div>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{
            '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
            v-if="checkList.includes('证照类型')"
            :show-overflow-tooltip="true"
            prop="CERTIFICATETYPE_NAME"
            label="证照类型"/>
          <el-table-column
            v-if="checkList.includes('证件号码')"
            :show-overflow-tooltip="true"
            prop="USER_ID_CARD"
            label="证件号码"/>
          <el-table-column
            v-if="checkList.includes('手机号')"
            :show-overflow-tooltip="true"
            prop="USERNAME"
            label="手机号"/>
          <el-table-column
            v-if="checkList.includes('涉及培训机构（企业）数')"
            :show-overflow-tooltip="true"
            label="涉及培训机构（企业）数">
            <template slot-scope="{row}">
              <el-button type="text" @click="trainingDialogShow(row.USER_ID)">{{ row.STU_CORP_COUNT }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkList.includes('信息变更数')"
            :show-overflow-tooltip="true"
            label="信息变更数">
            <template slot-scope="{row}">
              <el-button type="text" @click="informationChangeDialogShow(row.USER_ID)">{{ row.LOG_COUNT }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkList.includes('文化水平')"
            :show-overflow-tooltip="true"
            prop="DEGREE_OF_EDUCATION_NAME"
            label="文化水平"/>
          <el-table-column
            v-if="checkList.includes('人员类型')"
            :show-overflow-tooltip="true"
            prop="PERSONNEL_TYPE_NAME"
            label="人员类型"/>
          <el-table-column
            v-if="checkList.includes('实名认证')"
            :show-overflow-tooltip="true"
            prop=""
            label="实名认证">
            <template slot-scope="{row}">
              {{ row.AUTHENTICATION === '0' ? '未认证' : '已认证' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="{row}">
              <el-button type="text" @click="goToAddStudents(row.USER_ID)">编辑</el-button>
              <!--              <span class="app-divider"/>-->
              <!--              <el-button type="text" @click="goToInformationChange(row.USER_ID,'list')">确认</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="trainingDialog.visible" title="涉及培训机构（企业）详情" width="50%">
      <el-table
        :data="trainingDialog.varList"
        :header-cell-style="{
          '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="CORP_NAME" label="机构（企业）名称"/>
        <el-table-column show-overflow-tooltip prop="CLASS_NUM" label="参与班级数"/>
        <el-table-column show-overflow-tooltip prop="COMPLETE_CLASSHOUR" label="学时总数"/>
      </el-table>
      <span slot="footer">
        <el-button @click="trainingDialog.visible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="informationChangeDialog.visible" title="信息变更记录" width="50%">
      <el-table
        :data="informationChangeDialog.varList"
        :header-cell-style="{
          '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="CREATTIME" label="信息变更时间"/>
        <el-table-column show-overflow-tooltip prop="DESCR" label="变更内容"/>
        <el-table-column label="变更后内容">
          <template slot-scope="{row}">
            <el-button type="text" @click="goToInformationChange(row.STUDENTLOG_ID,'dialog')">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="informationChangeDialog.visible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      varList: [],
      degreeOfEducationList: [],
      personnelTypeList: [],
      searchFrom: {
        NAME: '',
        CORP_NAME: '',
        ENTERPRISE: '',
        SEX: '',
        AUTHENTICATION: '',
        DEGREE_OF_EDUCATION: '',
        PERSONNEL_TYPE: []
      },
      searchFromCollapse: true,
      checkList: ['证照类型', '证件号码', '手机号', '涉及培训机构（企业）数', '信息变更数', '文化水平', '人员类型', '实名认证'],
      checkboxList: ['证照类型', '证件号码', '手机号', '涉及培训机构（企业）数', '信息变更数', '文化水平', '人员类型', '实名认证'],
      trainingDialog: {
        visible: false,
        varList: []
      },
      informationChangeDialog: {
        visible: false,
        varList: []
      }
    }
  },
  inject: ['setActiveName', 'setUSER_ID', 'setInformationChangeLocation'],
  created() {
    this.listLoading = false
    this.getList()
    this.getDict('d7d80f08d73a4accbccf4fd3d8d1d867', 'degreeOfEducationList')
    this.getDict('0b62f92b0b624aab8e89a77304a64d5e', 'personnelTypeList')
  },
  methods: {
    getDict(DICTIONARIES_ID, degreeOfEducationList) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[degreeOfEducationList] = data.list
      })
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.$refs.searchFrom.resetFields()
      this.getList()
    },
    getRowKey(row) {
      return row.USER_ID
    },
    getList() {
      requestFN(`/student/list?showCount=${this.listQuery.limit}&currentPage=${this.listQuery.page}`, {
        ...this.searchFrom,
        PERSONNEL_TYPE: this.searchFrom.PERSONNEL_TYPE.join(',')
      }).then(data => {
        this.varList = data.userList
        this.total = data.page.totalResult
        this.listLoading = false
      })
    },
    goToAddStudents(USER_ID) {
      this.setUSER_ID(USER_ID)
      this.setActiveName('addStudents')
    },
    goToInformationChange(USER_ID, InformationChangeLocation) {
      this.setUSER_ID(USER_ID)
      this.setActiveName('InformationChange')
      this.setInformationChangeLocation(InformationChangeLocation)
    },
    trainingDialogShow(USER_ID) {
      requestFN('/studentcorpinfo/corplistAll', { USER_ID }).then(data => {
        this.trainingDialog.varList = data.varList
        this.trainingDialog.visible = true
      })
    },
    informationChangeDialogShow(USER_ID) {
      requestFN('/studentlog/listByUserId', { USER_ID }).then(data => {
        this.informationChangeDialog.varList = data.varList
        this.informationChangeDialog.visible = true
      })
    }
  }
}

</script>
<style>
</style>
