<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 头部内容 -->
      <div class="top-content">
        <div class="title">任务主题名称：{{ headerInfo.data.studyTaskName }}</div>
        <div class="lf-line"></div>
        <div class="title">学习对象：{{ headerInfo.data.taskFor == 1 ? '内部单位' : '外部单位' }}</div>
        <div class="lf-line"></div>
        <div class="title">培训级别：{{ headerInfo.data.trainLevel }}</div>
        <div class="lf-line"></div>
        <div class="title">教育类型：{{ headerInfo.data.eduType }}</div>
        <div class="lf-line"></div>
        <div class="title">学习人数：{{ headerInfo.data.trainNum }}人</div>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card class="box-card">
          <div class="top-content">
            <div class="title">完成人数统计：</div>
            <div class="title">已完成：{{ headerInfo.num }}人</div>
            <div class="lf-line"></div>
            <div class="title">未完成：{{ headerInfo.num2 }}人</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card class="box-card">
          <div class="top-content">
            <div class="title">考试统计：</div>
            <div class="title">已完成：{{ headerInfo.num3 }}人</div>
            <div class="lf-line"></div>
            <div class="title">未完成：{{ headerInfo.num4 }}人</div>
            <div class="lf-line"></div>
            <div class="title">及格：{{ headerInfo.num5 }}人</div>
            <div class="lf-line"></div>
            <div class="title">不及格：{{ headerInfo.num6 }}人</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 任务列表 -->
    <el-table :data="tableData" 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="item in taskTableHeader"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip
        align="center"
      >
        <template v-slot="scope" v-if="item.prop === 'sex'">
          <span>{{ scope.row.sex == 0 ? '男' : '女' }}</span>
        </template>
        <template v-slot="scope" v-else-if="item.prop === 'studyTime'">
          <span>{{ (scope.row.studyTime / 60).toFixed(2) }}分钟</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 { getStudyTaskDataDetail, getStudyTaskDataList } from '@/api/educationalTraining/resourceAdministration'
export default {
  data() {
    return {
      showSearch: true,
      currentRow: {}, // 当前行数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总条数
      // 列表-表格头
      taskTableHeader: [
        { prop: 'name', label: '姓名' },
        { prop: 'sex', label: '性别' },
        { prop: 'idCard', label: '身份证号码' },
        { prop: 'phone', label: '联系方式' },
        { prop: 'proName', label: '工程名称' },
        { prop: 'subName', label: '承包商名称' },
        { prop: 'post', label: '岗位' },
        { prop: 'typeOfWork', label: '工种' },
        { prop: 'studyTime', label: '学习时长' },
        { prop: 'isTest', label: '考试' },
        { prop: 'studyProgress', label: '学习进度' },
      ],
      // 列表-数据
      tableData: [],
      headerInfo: {
        data: {
          studyTaskName: '',
          taskFor: '',
          trainLevel: '',
          eduType: '',
          trainNum: '',
        },
        num: 0,
        num2: 0,
        num3: 0,
        num4: 0,
        num5: 0,
        num6: 0,
      },
      studyTaskId: '',
      taskFor: '', // 学习对象
    }
  },
  created() {
    // 获取路由query 传递过来 JSON.parse(this.$route.query.data)
    console.log('学习任务数据', this.$route.query)
    this.studyTaskId = this.$route.query.studyTaskId || ''
    this.taskFor = this.$route.query.taskFor || ''
    if (this.taskFor == '1') {
      this.taskTableHeader.splice(4, 4) // 内部单位: 删除工程名称、承包商名称、岗位、工种
    }
    getStudyTaskDataDetail({
      studyTaskId: this.studyTaskId,
    }).then(res => {
      this.headerInfo = res.data
      // console.log('getStudyTaskById-------------------', JSON.stringify(res))
    })
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      console.log('获取列表')
      try {
        const params = {
          studyTaskId: this.studyTaskId,
          taskType: 1,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }
        getStudyTaskDataList(params).then(res => {
          this.tableData = res.rows
          this.total = res.total
        })
      } catch (error) {
        console.log('获取列表失败', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.top-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .lf-line {
    width: 2px;
    height: 20px;
    background-color: #ccc;
    margin: 0 20px;
  }
}
</style>
