<template>
  <div>
    <div class="app-container">
      <div class="mb-20">
        <table class="table-ui">
          <tr>
            <td class="tbg">学习任务名称</td>
            <td colspan="3">{{ pd.STUDY_NAME }}</td>
          </tr>
          <tr>
            <td class="tbg">培训行业类型</td>
            <td colspan="3">{{ pd.post_type_name }}</td>
          </tr>
          <tr>
            <td class="tbg">岗位培训类型</td>
            <td colspan="3">{{ pd.train_type_name }}</td>
          </tr>
          <tr>
            <td class="tbg">培训时间</td>
            <td colspan="3">
              <div v-show="pd.PEIXUE_END_TIME">
                {{ pd.PEIXUE_START_TIME }}  - {{ pd.PEIXUE_END_TIME }}
              </div>
              <div v-show="!pd.PEIXUE_END_TIME">
                {{ pd.PEIXUE_START_TIME }}  -
                <el-date-picker v-model="pd.PEIXUE_END_TIME" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" @change="judgtDate()"/>
              </div>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="pd.PEIXUE_END_TIME = ''">编辑</el-button>
            </td>
          </tr>
          <tr>
            <td class="tbg">是否签到</td>
            <td colspan="3">{{ pd.KJ_STATE=='1'?'是':'否' }}
              <div style="font-size: 12px">开启签到后，学员培训前需要进行电子手签。并会记录到《学员名册及考勤》档案中</div>
            </td>
          </tr>
          <tr>
            <td class="tbg">是否开启防挂机验证</td>
            <td colspan="3">{{ pd.KJ_STATE=='1'?'是':'否' }}
              <div style="font-size: 12px">开启放挂机验证员工学习过程会进行人脸识别，确保是员工本人在培训</div>
            </td>
          </tr>
          <tr>
            <td class="tbg">已选择课程</td>
            <td colspan="3">
              <table style="padding:0;width:auto" class="table-vi">
                <tr>
                  <th class="title">课程名称</th>
                  <th class="title">课件数</th>
                </tr>
                <tr v-for="(item,index) in scurAllList" :key="index">
                  <td class="title">{{ item.CURRICULUMNAME }}</td>
                  <td class="title">{{ item.COURSEWARECOUNT }}</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="tbg">已选择人员</td>
            <td colspan="3">
              <table style="padding:0;width:auto" class="table-vi">
                <tr>
                  <th class="title">用户名</th>
                  <th class="title">姓名</th>
                  <th class="title">部门</th>
                </tr>
                <tr v-for="(item,index) in userAlllist" :key="index">
                  <td class="title">{{ item.USERNAME }}</td>
                  <td class="title">{{ item.NAME }}</td>
                  <td class="title">{{ item.DEPARTMENT_NAME }}</td>
                </tr>
              </table>
              <div>
                <el-button type="primary" icon="el-icon-upload" style="margin-left:10px; " plain @click="addUser">添加人员</el-button>
              </div>
            </td>
          </tr>
          <tr v-if ="userMap.xzList.length >0">
            <td class="tbg">已添加人员</td>
            <td colspan="3">
              <table style="padding:0;width:auto" class="table-vi">
                <tr>
                  <th class="title">用户名</th>
                  <th class="title">姓名</th>
                  <th class="title">部门</th>
                </tr>
                <tr v-for="(item,index) in userMap.xzList" :key="index">
                  <td class="title">{{ item.USERNAME }}</td>
                  <td class="title">{{ item.NAME }}</td>
                  <td class="title">{{ item.DEPARTMENT_NAME }}</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="tbg">已设置考试</td>
            <td colspan="3">
              <table style="padding:0;width:auto" class="table-vi">
                <tr>
                  <th class="title">考试名称</th>
                  <th class="title">考试时长</th>
                  <th class="title">试卷名称</th>
                </tr>
                <tr v-for="(item,index) in stageAlllist" :key="index">
                  <td class="title">{{ item.EXAMNAME }}</td>
                  <td class="title">{{ item.ANSWERSHEETTIME }}</td>
                  <td class="title">{{ item.shijuanName }}</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="ui-height" />
    <div class="ui-foot">
      <el-button type="primary" @click="confirm">确 认</el-button>
      <el-button type="info" @click="goBack">返 回</el-button>
    </div>
    <el-dialog :visible.sync="dialogAddUser" title="选择人员" width="800px">
      <div class="filter-container">
        <div class="filter-group">
          <div class="filter-lable">课程名称：</div>
          <el-input v-model="userMap.KEYWORDS" placeholder="搜索" class="filter-item" style="width: 150px;" />
        </div>
        <div class="filter-group">
          <div class="filter-lable">部门：</div>
          <SelectTree ref="deptTree_Select" :clearable="false" :options="userMap.treeData" :props="defaultProps" v-model="userMap.DEPARTMENT_ID" style="width: 150px;" placeholder="请选择部门" />
        </div>
        <el-button v-waves class="ml-10" type="primary" icon="el-icon-search" @click="getUserList"> 搜索 </el-button>
        <el-button v-waves type="success" icon="el-icon-refresh" @click="getUserReset"> 重置 </el-button>
      </div>
      <el-table v-loading="listLoading" ref="multipleUserTable" :data="userMap.valueList" :row-key="getRowKeyByUrtTable" :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 prop="USERNAME" label="用户名" />
        <el-table-column prop="NAME" label="姓名" />
        <el-table-column prop="DEPARTMENT_NAME" label="部门" />
        <el-table-column prop="POST_NAME" label="岗位" width="150" show-overflow-tooltip />
        <el-table-column prop="ROLE_NAME" label="角色" />
      </el-table>
      <div class="mt-10">
        <pagination :total="userMap.total" :page.sync="userMap.page" :limit.sync="userMap.limit" @pagination="getUserList" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmByUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves' // waves directive
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      rules: {},
      pxList: [],
      gwList: [],
      pd: { },
      dialogAddUser: false,
      scurAllList: [],
      userAlllist: [],
      stageAlllist: [],
      userMap: {
        valueList: [],
        total: 0,
        page: 1,
        limit: 10,
        KEYWORDS: '',
        treeData: [],
        DEPARTMENT_ID: '',
        xzList: []
      }
    }
  },
  async created() {
    await this.getTreeDicByParId('pxList', '052369aa22d242118236cde52d0c67ea')
    await this.getTreeDicByParId('gwList', 'f6a7c4f5602f46e291d06b1390a3f820')
    await this.getInfo()
    await this.getuserList()
    await this.getStageexampaperList()
  },
  methods: {
    getInfo() {
      requestFN(
        '/studytask/goEdit',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.pd = data.pd
        this.scurAllList = data.scurAllList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getuserList() {
      requestFN(
        '/stagestudentrelation/listAllByStudyTaskId',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID
        }
      ).then((data) => {
        this.userAlllist = data.varList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getStageexampaperList() {
      requestFN(
        '/stageexampaper/getPageDataByStudyTaskId',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID
        }
      ).then((data) => {
        this.stageAlllist = data.varList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goBack() {
      this.$parent.activeName = 'Course'
    },
    getTreeDicByParId(listName, parentId) {
      requestFN(
        '/dictionaries/listAllDictToParId',
        {
          parentId: parentId
        }
      ).then((data) => {
        this[listName] = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    judgtDate() { // 判断培训开始和结束时间
      var date1 = new Date(this.pd.PEIXUE_START_TIME) // 开始时间
      var date2 = new Date(this.pd.PEIXUE_END_TIME) // 结束时间
      if (date1 > date2) {
        this.$message.warning('培训结束时间必须大于开始时间')
        this.pd.PEIXUE_END_TIME = ''
        return false
      }
      var date3 = new Date() // 今天时间
      if (date3 > date2) {
        this.$message.warning('培训结束时间必须大于今天时间')
        this.pd.PEIXUE_END_TIME = ''
        return false
      }
    },
    // 回显和选中
    addUser() {
      this.dialogAddUser = true
      this.getUserList()
      this.getTreeList()
    },
    getUserList() { // 人员列表
      this.listLoading = true
      requestFN(
        '/user/list?showCount=' + this.userMap.limit + '&currentPage=' + this.userMap.page,
        {
          KEYWORDS: this.userMap.KEYWORDS,
          DEPARTMENT_ID: this.userMap.DEPARTMENT_ID,
          IS_STUDEANT: 1
        }
      ).then((data) => {
        this.listLoading = false
        this.userMap.valueList = data.userList
        this.userMap.total = data.page.totalResult
        this.userMap.xzList.forEach(row => { //  回显，再次选择添加人员的时候，选中已经添加的人员
          this.$refs.multipleUserTable.toggleRowSelection(row) //  选中状态
        })
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getTreeList() { // 查询部门
      this.listLoading = true
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.listLoading = false
        this.userMap.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getUserReset() { // 清除事件 --人员选择弹出
      this.userMap.KEYWORDS = ''
      this.userMap.DEPARTMENT_ID = ''
      this.userMap.total = 1
      this.userMap.page = 0
      this.userMap.limit = 10
      this.$refs.deptTree_Select.clearHandle()
      this.getUserList()
    },
    getRowKeyByUrtTable(row) { // 人员列表多选
      return row.USER_ID
    },
    confirmByUser() { // 选择人员确定事件
      this.userMap.xzList = []
      var xzList = this.$refs.multipleUserTable.selection// 选择的人员信息
      xzList.forEach(xzRow => { // tab选中的人员
        var state = '1'
        this.userAlllist.forEach(yxRow => { // 已经选中的人员，只能添加。
          if (xzRow.USER_ID == yxRow.USER_ID) { // 去重
            state = '0'
            return
          }
        })
        if (state == '1') {
          this.userMap.xzList.push(xzRow)
        }
      })
      // this.userMap.xzList = this.$refs.multipleUserTable.selection// 选择的资料课件内容
      this.$refs.multipleUserTable.clearSelection()
      this.dialogAddUser = false
    },
    confirm() {
      this.listLoading = true
      var form = []
      var userIds = ''
      this.userMap.xzList.forEach(usermap => {
        userIds += usermap.USER_ID + ','
      })
      if (this.pd.PEIXUE_END_TIME == '') {
        this.$message.warning('请培训时间结束时间')
        return false
      }
      form.userIds = userIds
      form.PEIXUE_END_TIME = this.pd.PEIXUE_END_TIME
      form.STUDYTASK_ID = this.pd.STUDYTASK_ID
      form.STAGEEXAMPAPER_ID = this.pd.STAGEEXAMPAPER_ID
      requestFN(
        '/studytask/updateEndTimeAndUser',
        form
      ).then((data) => {
        this.listLoading = false
        this.$parent.activeName = 'Course'
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}

</script>
