<template>
  <a-card :bordered="false" title="项目档案">
    <template slot="extra">
      <a-button size="small" @click="close">返回</a-button>
    </template>
    <a-tabs :animated="false" :default-active-key="this.$route.query.defaultActiveKey || '1'" @change="callback" :headStyle="{paddingTop: '0px'}">
      <a-tab-pane key="1" tab="自主培训">
        <div class="table-page-search-wrapper">
          <SearchCom :form="tabs1.queryParam" :list="tabs1QueryOptions" @search="tabs1HandleRefresh" @reset="() => {queryParam = {}, tabs1HandleRefresh()}"></SearchCom>
        </div>
        <s-table ref="table1" size="small" rowKey="id" :columns="tabs1.columns" :data="tabs1.loadData" :pageNum="Number(this.$route.query.archivesUserProjectTable1PageNum) || 1">
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="trainDetail(record)" v-if="hasPerm('archives:user:autotrain:detail:list')">培训详情</a>
            <br v-if="hasPerm('archives:user:autotrain:detail:list') && hasPerm('archives:user:autotrain:answer:list')" />
            <a href="javascript:;" @click="trainAnswer(record)" v-if="hasPerm('archives:user:autotrain:answer:list')">答题记录</a>
          </template>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="终端培训" force-render>
        <div class="table-page-search-wrapper">
          <SearchCom :form="tabs2.queryParam" :list="tabs2QueryOptions" @search="tabs2HandleRefresh" @reset="() => {queryParam = {}, tabs2HandleRefresh()}"></SearchCom>
        </div>
        <s-table ref="table2" size="small" rowKey="id" :columns="tabs2.columns" :data="tabs2.loadData" :pageNum="Number(this.$route.query.archivesUserProjectTable2PageNum) || 1">
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="terminalTrainDetail(record)" v-if="hasPerm('archives:user:terminaltrain:detail')">查看详情</a>
          </template>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import { STable, SearchCom } from '@/components'
import { getArchivesUserAutoTrainList, getArchivesUserTerminalTrainList } from '@/api/archives/user'

export default {
  components: { STable, SearchCom },
  data() {
    return {
      userid: this.$route.query.id,
      tabs1: {
        queryParam: {
          projectName: this.$route.query.archivesUserProjectTable1ProjectName || '',
          finishState: this.$route.query.archivesUserProjectTable1FinishState || ''
        },
        columns: [
          { title: '项目名称', width: 'auto', align: 'center', dataIndex: 'projectName', key: 'projectName' },
          { title: '项目时间', width: 'auto', align: 'center', dataIndex: 'projectData', key: 'projectData' },
          { title: '受训角色', width: 'auto', align: 'center', dataIndex: 'roleName', key: 'roleName' },
          { title: '应修学时', width: 'auto', align: 'center', dataIndex: 'mustClassHour', key: 'mustClassHour' },
          { title: '已修学时', width: 'auto', align: 'center', dataIndex: 'alreadyClassHour', key: 'alreadyClassHour' },
          {
            title: '完成状态', width: 'auto', align: 'center', dataIndex: 'finishState', key: 'finishState', customRender: (text, record, index) => {
              // 完成状态 0-未完成 1-已完成
              if (text == 0) return '未完成'; else if (text == 1) return '已完成';
            }
          },
          { title: '总练习题量', width: 'auto', align: 'center', dataIndex: 'addUpExercises', key: 'addUpExercises' },
          { title: '已练习题量', width: 'auto', align: 'center', dataIndex: 'alreadyExercises', key: 'alreadyExercises' },
          { title: '答对题量', width: 'auto', align: 'center', dataIndex: 'yesTopic', key: 'yesTopic' },
          { title: '正确率', width: 'auto', align: 'center', dataIndex: 'yesRate', key: 'yesRate' },
          { title: '考试成绩', width: 'auto', align: 'center', dataIndex: 'testResult', key: 'testResult' },
          { title: '补考成绩', width: 'auto', align: 'center', dataIndex: 'mendTestResult', key: 'mendTestResult' },
          { title: '考试耗时', width: 'auto', align: 'center', dataIndex: 'testTime', key: 'testTime' },
          {
            title: '考试状态', width: 'auto', align: 'center', dataIndex: 'testState', key: 'testState', customRender: (text, record, index) => {
              // 考试状态 0-不合格 1-合格
              if (text == 0) return '不合格'; else if (text == 1) return '合格';
            }
          },
          { title: '操作', width: '90px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } }
        ],
        loadData: parameter => { return getArchivesUserAutoTrainList(Object.assign(parameter, this.tabs1.queryParam)).then(res => { return res }) }
      },
      tabs2: {
        queryParam: { projectName: this.$route.query.archivesUserProjectTable2projectName || '' },
        columns: [
          { title: '项目名称', width: 'auto', align: 'center', dataIndex: 'projectName', key: 'projectName' },
          { title: '项目时间', width: 'auto', align: 'center', dataIndex: 'projectData', key: 'projectData' },
          { title: '受训角色', width: 'auto', align: 'center', dataIndex: 'roleName', key: 'roleName' },
          { title: '培训地址', width: 'auto', align: 'center', dataIndex: 'trainAddr', key: 'trainAddr' },
          { title: '签到时间', width: 'auto', align: 'center', dataIndex: 'signInTime', key: 'signInTime' },
          {
            title: '完成状态', width: 'auto', align: 'center', dataIndex: 'finishState', key: 'finishState', customRender: (text, record, index) => {
              // 完成状态 0-未完成 1-已完成
              if (text == 0) return '未完成'; else if (text == 1) return '已完成';
            }
          },
          { title: '操作', width: '90px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } }
        ],
        loadData: parameter => { return getArchivesUserTerminalTrainList(Object.assign(parameter, this.tabs2.queryParam)).then(res => { return res }) }
      }
    }
  },
  computed: {
    tabs1QueryOptions: function () {
      return [
        { type: 'input', placeholder: '项目名称', key: 'projectName' },
        {
          type: 'select', placeholder: '完成状态', key: 'finishState', options: [
            { id: '', name: '全部' },
            { id: '1', name: '已完成' },
            { id: '0', name: '未完成' }
          ]
        }
      ]
    },
    tabs2QueryOptions: function () {
      return [
        { type: 'input', placeholder: '项目名称', key: 'projectName' }
      ]
    },
  },
  methods: {
    callback(key) {
      if (key === '1') {
        this.tabs1.queryParam = {};
        this.tabs1HandleRefresh();
      } else {
        this.tabs2.queryParam = {};
        this.tabs2HandleRefresh();
      }
    },
    tabs1HandleRefresh() {
      this.$refs.table1.refresh(true)
    },
    tabs2HandleRefresh() {
      this.$refs.table2.refresh(true)
    },
    // 培训详情 按钮
    trainDetail(record) {
      this.$router.push({
        path: '/archives/user/ProjectDetail', query: {
          userId: this.userid,
          projectId: record.id,
          archivesUserName: this.$route.query.archivesUserName,
          archivesUserOrgId: this.$route.query.archivesUserOrgId,
          archivesUserPageNum: this.$route.query.archivesUserPageNum,
          archivesUserProjectTable1ProjectName: this.tabs1.queryParam.projectName,
          archivesUserProjectTable1FinishState: this.tabs1.queryParam.finishState,
          archivesUserProjectTable1PageNum: this.$refs.table1.localPagination.current,
          defaultActiveKey: '1'
        }
      });
    },
    // 答题记录 按钮
    trainAnswer(record) {
      this.$router.push({
        path: '/archives/user/ProjectAnswer', query: {
          userId: this.userid,
          projectId: record.id,
          archivesUserName: this.$route.query.archivesUserName,
          archivesUserOrgId: this.$route.query.archivesUserOrgId,
          archivesUserPageNum: this.$route.query.archivesUserPageNum,
          archivesUserProjectTable1ProjectName: this.tabs1.queryParam.projectName,
          archivesUserProjectTable1FinishState: this.tabs1.queryParam.finishState,
          archivesUserProjectTable1PageNum: this.$refs.table1.localPagination.current,
          defaultActiveKey: '1'
        }
      });
    },
    // 终端培训详情 按钮
    terminalTrainDetail(record) {
      this.$router.push({
        path: '/archives/user/TerminalTrainDetail', query: {
          userId: this.userid,
          projectId: record.id,
          archivesUserName: this.$route.query.archivesUserName,
          archivesUserOrgId: this.$route.query.archivesUserOrgId,
          archivesUserPageNum: this.$route.query.archivesUserPageNum,
          archivesUserProjectTable2projectName: this.tabs2.queryParam.projectName,
          archivesUserProjectTable2PageNum: this.$refs.table2.localPagination.current,
          defaultActiveKey: '2'
        }
      });
    },
    // 返回 按钮
    close() {
      this.$router.push({
        path: '/archives/user/Index', query: {
          archivesUserName: this.$route.query.archivesUserName,
          archivesUserOrgId: this.$route.query.archivesUserOrgId,
          archivesUserPageNum: this.$route.query.archivesUserPageNum
        }
      });
    }
  }
}
</script>