<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-group">
        <div class="filter-lable">员工姓名：</div>
        <el-input v-model="userkey" placeholder="请输入学员名称" class="filter-item" style="width: 200px;"/>
      </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="filter-item" type="primary" icon="el-icon-search" @click="getuserList">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
        重置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="userAlllist"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      :row-key="getRowKey"
      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="USER_NAME" label="姓名" />
      <el-table-column prop="PHONE" label="电话" />
      <el-table-column prop="DEPARTMENT_NAME" label="部门" />
      <el-table-column prop="POSTNAME" label="岗位" />
      <el-table-column prop="train_type_name" label="任务学时">
        <template slot-scope="{row}">
          <div>{{ pd.SUM_CLASSHOUR }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="COMPLETE_CLASSHOUR" label="已学习学时" />
      <el-table-column prop="COMPLETE_CLASSHOUR" label="学习状态" >
        <template slot-scope="{row}">
          <template v-if="row.COMPLETE_CLASSHOUR >= pd.SUM_CLASSHOUR">
            <div>学习完</div>
          </template>
          <template v-else>
            <div>学习中</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="STAGEEXAMSTATE" label="考试结果" >
        <template slot-scope="{row}">
          <template v-if="row.STAGEEXAMSCORE=='-1'">
            <div>未开始</div>
          </template>
          <template v-else-if="row.STAGEEXAMSCORE >= stageMap.PASSSCORE">
            <div>已通过</div>
          </template>
          <template v-else>
            <div>未通过</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="CURRICULUMNAME" label="操作" width="140" >
        <template slot-scope="{row}">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">学习详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button type="primary" @click="goBack">返 回</el-button>
    </div>
  </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'
      },
      STUDYTASK_ID: this.$parent.STUDYTASK_ID,
      rules: {},
      pxList: [],
      gwList: [],
      userkey: '',
      userPhone: '',
      pd: {
        SUM_CLASSHOUR: 0
      },
      userAlllist: [],
      stageMap: {
        PASSSCORE: '0'
      },
      userMap: {
        treeData: [],
        DEPARTMENT_ID: ''
      }
    }
  },
  async created() {
    this.getuserList()
    this.getInfo()
    this.getStageexampaperList()
    this.getTreeList()
  },
  methods: {
    getRowKey(row) {
      return row.STAGESTUDENTRELATION_ID
    },
    getInfo() {
      requestFN(
        '/studytask/goEdit',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getuserList() {
      requestFN(
        '/stagestudentrelation/listAllByStudyTaskId',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID,
          userkey: this.userkey,
          DEPARTMENT_ID: this.userMap.DEPARTMENT_ID
        }
      ).then((data) => {
        this.userAlllist = data.varList
        this.listLoading = false
      }).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
      })
    },
    getStageexampaperList() {
      requestFN(
        '/stageexampaper/getPageDataByStudyTaskId',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID
        }
      ).then((data) => {
        this.stageMap = data.varList[0]
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getQuery() {

    },
    goKeyReset() {
      this.userkey = ''
      this.userMap.DEPARTMENT_ID = ''
      this.$refs.deptTree_Select.clearHandle()
      this.getuserList()
    },
    handleEdit(row) {
      this.$parent.STUDYTASK_USERID = row.USER_ID
      this.$parent.activeName = 'CourseUserStagestInfo'
    },
    getTreeList() {
      this.listLoading = true
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.listLoading = false
        this.userMap.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}

</script>
