<template>
  <div class="app-container">
    <!-- 头部 -->
    <el-row class="mb8" style="margin-bottom: 20px" :gutter="20">
      <el-col :span="6">
        <el-card shadow="always">
          <div slot="header">
            <span>人员信息</span>
          </div>
          <el-row style="display: flex">
            <el-col>
              <div class="text-item">
                <span>姓名：</span>
                <span>{{ currentRow.name }}</span>
              </div>
            </el-col>
            <el-col>
              <div class="text-item">
                <span>部门：</span>
                <span>{{ currentRow.deptName }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div slot="header" class="header">
            <span>参与学习任务数：{{ archivesHeaderInfo.practiceNum }}</span>
            <span class="detail" @click="clickTab(1)">详情</span>
          </div>
          <el-row style="display: flex">
            <el-col>
              <div class="text-item">
                <span>已完成：</span>
                <span>{{ archivesHeaderInfo.passPracticeNum }}</span>
              </div>
            </el-col>
            <el-col>
              <div class="text-item">
                <span>未完成：</span>
                <span>{{ archivesHeaderInfo.failPracticeNum }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div slot="header" class="header">
            <span>参与培训数：{{ archivesHeaderInfo.trainNum }}</span>
            <span class="detail" @click="clickTab(2)">详情</span>
          </div>
          <el-row style="display: flex">
            <el-col>
              <div class="text-item">
                <span>已到：</span>
                <span>{{ archivesHeaderInfo.passTrainNum }}</span>
              </div>
            </el-col>
            <el-col>
              <div class="text-item">
                <span>未到：</span>
                <span>{{ archivesHeaderInfo.failTrainNum }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div slot="header" class="header">
            <span>参与考试数：{{ archivesHeaderInfo.examNum }}</span>
            <span class="detail" @click="clickTab(3)">详情</span>
          </div>
          <el-row style="display: flex">
            <el-col>
              <div class="text-item">
                <span>及格：</span>
                <span>{{ archivesHeaderInfo.passExamNum }}</span>
              </div>
            </el-col>
            <el-col>
              <div class="text-item">
                <span>不及格：</span>
                <span>{{ archivesHeaderInfo.failExamNum }}</span>
              </div>
            </el-col>
            <el-col>
              <div class="text-item">
                <span>未参加：</span>
                <span>{{ archivesHeaderInfo.noAttendNum }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表单 -->
    <el-form :model="queryParams" ref="queryForm" size="mini" label-width="68px" inline v-show="showSearch">
      <el-form-item label="关键字" label-width="60px" prop="keyWord" style="width: 17%">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- 查询/重置 -->
      <el-form-item class="align-right" style="width: 30%">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
        <!-- 导出 -->
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- tab -->
    <el-table v-if="active == 1" :data="tabData" fit highlight-current-row style="width: 100%">
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="column in tableColumns"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <template v-slot="scope" v-if="column.prop == 'isStudyFinish'">
          <span>{{ scope.row.isStudyFinish == '1' ? '已完成' : '未完成' }}</span>
        </template>
        <template v-slot="scope" v-else-if="column.prop == 'score'">
          <span>{{ scope.row.score }}分</span>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="active == 2" :data="tabData2" fit highlight-current-row style="width: 100%">
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="column in tableColumns2"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <template v-slot="scope" v-if="column.prop == 'score'">
          <span>{{ scope.row.score }}分</span>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="active == 3" :data="tabData3" fit highlight-current-row style="width: 100%">
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="column in tableColumns3"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <template v-slot="scope" v-if="column.prop == 'score'">
          <span>{{ scope.row.score }}分</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { studentProfileHeader, studentProfileList } from '@/api/educationalTraining/studentManagement'

export default {
  name: 'studentProfile',
  data() {
    return {
      showSearch: true, // 是否显示搜索
      total: 0, // 总条数
      queryParams: {
        keyWord: '', // 关键字
        pageNum: 1,
        pageSize: 10,
        type: '1',
        userId: '',
        userUuid: '',
      },
      name: '王彬', // 姓名
      dept: '运检部专员', // 部门
      archivesHeaderInfo: {},
      active: 1, // 当前激活的tab
      // tab列表-表头
      tableColumns: [
        { label: '学习任务名称', prop: 'name' },
        { label: '总时长', prop: 'totalDuration' },
        { label: '学习时长', prop: 'learningDuration' },
        { label: '学习进度', prop: 'learningProgress' },
        { label: '是否完成', prop: 'isStudyFinish' },
        { label: '考试是否及格', prop: 'isPass' },
        { label: '考试成绩', prop: 'score' },
      ],
      // tab列表-数据
      tabData: [],
      // tab列表-表头2
      tableColumns2: [
        { label: '培训主题名称', prop: 'name' },
        { label: '培训时长', prop: 'duration' },
        { label: '是否签到', prop: 'isSign' },
        { label: '签到时间', prop: 'signTime' },
        { label: '是否考试', prop: 'isExam' },
        { label: '是否及格', prop: 'isPass' },
        { label: '考试成绩', prop: 'score' },
      ],
      // tab列表-数据2
      tabData2: [],
      // tab列表-表头3
      tableColumns3: [
        { label: '考试名称', prop: 'name' },
        { label: '考试时间', prop: 'examTime' },
        { label: '是否考试', prop: 'isExam' },
        { label: '是否及格', prop: 'isPass' },
        { label: '考试成绩', prop: 'score' },
      ],
      // tab列表-数据3
      tabData3: [],
      currentRow: {}, // 当前行数据
    }
  },
  created() {
    console.log('学员档案', this.$route.query)
    this.currentRow = this.$route.query
    this.getList()
    this.getArchivesHeader()
  },
  methods: {
    // 查询
    handleQuery() {
      this.getList()
      console.log('🚀 ~ handleQuery ~ handleQuery:', this.queryParams)
    },
    // 重置
    handleReset() {
      this.queryParams.keyWord = ''
      this.getList()
    },
    // 获取列表
    getList() {
      console.log('🚀 ~ getList ~ getList:')
      this.queryParams.type = this.active
      this.queryParams.userId = this.currentRow.userId
      this.queryParams.userUuid = this.currentRow.userUuid
      studentProfileList(this.queryParams).then(res => {
        console.log('🚀 ~ getList ~ getList:', res)
        this.total = res.total
        if (this.active == 1) this.tabData = res.rows
        if (this.active == 2) this.tabData2 = res.rows
        if (this.active == 3) this.tabData3 = res.rows
      })
    },
    // 导出数据
    handleExport() {
      try {
        this.queryParams.type = this.active
        this.queryParams.userId = this.currentRow.userId
        this.queryParams.userUuid = this.currentRow.userUuid
        const fileName = `学员档案_${new Date().getTime()}.xLsx`
        let url = '/exam/studentManagement/studentExport'
        const params = { ...this.queryParams }
        console.log('🚀 ~ 导出 ~ params:', params)
        this.derive(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
    getArchivesHeader() {
      console.log('🚀 ~ getArchivesHeader ~ getArchivesHeader:')
      const params = {
        userId: this.currentRow.userId,
        userUuid: this.currentRow.userUuid,
        proId: this.currentRow.proId,
        consId: this.currentRow.consId,
      }
      studentProfileHeader(params).then(res => {
        console.log('🚀 ~ getArchivesHeader ~ getArchivesHeader:', res)
        this.archivesHeaderInfo = res
      })
    },
    //
    clickTab(index) {
      this.active = index
      this.getList()
      console.log('🚀 ~ clickTab ~ this.active:', this.active)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  color: #409eff;
  cursor: pointer;
}

.header {
  display: flex;
  justify-content: space-between;
}
</style>
