<template>
  <a-card :bordered="false" title="人员记录">
    <template slot="extra">
      <a-button size="small" @click="close">返回</a-button>
    </template>

    <div class="table-page-search-wrapper">
      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="() => {queryParam = {}, handleRefresh()}"></SearchCom>
    </div>
    <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.pageNum1) || 1">
      <template slot="action" slot-scope="text, record">
        <a-dropdown v-if="hasPerm('archives:project:user:course:list') || hasPerm('archives:project:user:answer:list')">
          <a class="ant-dropdown-link">操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item v-if="hasPerm('archives:project:user:course:list')">
              <a href="javascript:;" @click="archivesProjectUserDateil(record)">培训详情</a>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('archives:project:user:answer:list')">
              <a href="javascript:;" @click="archivesProjectUserAnswer(record)">答题记录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </s-table>
  </a-card>
</template>

<script>
import { STable, SearchCom } from '@/components'
import { getArchivesProjectUserList } from '@/api/archives/project'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { STable, SearchCom },
  props: {},
  data() {
    // 这里存放数据
    return {
      queryParam: { state: '', userName: '' },
      columns: [
        { title: '姓名', width: '100px', align: 'center', dataIndex: 'name', key: 'name' },
        { title: '单位信息', width: 'auto', align: 'center', dataIndex: 'dwOrgName', key: 'dwOrgName' },
        { title: '部门信息', width: 'auto', align: 'center', dataIndex: 'bmOrgName', key: 'bmOrgName' },
        { title: '应修学时', width: '80px', align: 'center', dataIndex: 'mustClassHour', key: 'mustClassHour' },
        { title: '已修学时', width: '100px', align: 'center', dataIndex: 'alreadyClassHour', key: 'alreadyClassHour' },
        { title: '总练习题量', width: '60px', align: 'center', dataIndex: 'addUpExercises', key: 'addUpExercises' },
        { title: '已练习题量', width: '60px', align: 'center', dataIndex: 'alreadyExercises', key: 'alreadyExercises' },
        { title: '答对题量', width: '60px', align: 'center', dataIndex: 'yesTopic', key: 'yesTopic' },
        { title: '正确率', width: '60px', align: 'center', dataIndex: 'yesRate', key: 'yesRate' },
        { title: '考试成绩', width: '60px', align: 'center', dataIndex: 'testResult', key: 'testResult' },
        { title: '补考成绩', width: '60px', align: 'center', dataIndex: 'mendTestResult', key: 'mendTestResult' },
        { title: '考试耗时', width: '80px', align: 'center', dataIndex: 'testTime', key: 'testTime' },
        {
          title: '考试状态', width: '80px', align: 'center', dataIndex: 'testState', key: 'testState', customRender: (text, record, index) => {
            // 考试状态 1-合格 2-不合格 3-未考试
            if (text == 1) return '合格'; else if (text == 2) return '不合格'; else if (text == 3) return '未考试';
          }
        },
        { title: '操作', width: '70px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      loadData: parameter => {
        this.queryParam.id = this.$route.query.id;
        return getArchivesProjectUserList(Object.assign(parameter, this.queryParam)).then(res => { return res });
      },
    };
  },
  // 计算属性 类似于data概念
  computed: {
    queryOptions: function () {
      let state = [{ id: '1', name: '合格' }, { id: '2', name: '不合格' }, { id: '3', name: '未考试' }]
      return [
        { type: 'select', placeholder: '状态', key: 'state', options: [{ id: '', name: '全部' }, ...state] },
        { type: 'input', placeholder: '姓名', key: 'userName' }
      ]
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 返回 按钮
    close() {
      this.$router.push({
        path: '/archives/project/Index', query: {
          queryParamTrainClass: this.$route.query.queryParamTrainClass,
          queryParamTrainWay: this.$route.query.queryParamTrainWay,
          queryParamProjectName: this.$route.query.queryParamProjectName,
          pageNum: this.$route.query.pageNum
        }
      });
    },
    handleRefresh() {
      this.$refs.table.refresh(true)
    },

    // 培训详情 
    archivesProjectUserDateil(record) {
      this.$router.push({
        path: '/archives/project/ProjectUserCourse', query: {
          projectId: this.$route.query.id,
          userId: record.id,
          queryParamState: this.queryParam.state,
          queryParamUserName: this.queryParam.userName,
          pageNum1: this.$refs.table.localPagination.current,

          queryParamTrainClass: this.$route.query.queryParamTrainClass,
          queryParamTrainWay: this.$route.query.queryParamTrainWay,
          queryParamProjectName: this.$route.query.queryParamProjectName,
          pageNum: this.$route.query.pageNum
        }
      });
    },
    // 答题记录
    archivesProjectUserAnswer(record) {
      this.$router.push({
        path: '/archives/project/ProjectUserAnswer', query: {
          projectId: this.$route.query.id,
          userId: record.id,
          queryParamState: this.queryParam.state,
          queryParamUserName: this.queryParam.userName,
          pageNum1: this.$refs.table.localPagination.current,

          queryParamTrainClass: this.$route.query.queryParamTrainClass,
          queryParamTrainWay: this.$route.query.queryParamTrainWay,
          queryParamProjectName: this.$route.query.queryParamProjectName,
          pageNum: this.$route.query.pageNum
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.query.queryParamState) this.queryParam.state = this.$route.query.queryParamState;
    if (this.$route.query.queryParamUserName) this.queryParam.userName = this.$route.query.queryParamUserName;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
};

</script>
<style scoped>
</style>