<script setup>
// 引入依赖
import api from '@/api/userManage'
import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
import _ from 'lodash'
import {ref,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 变量
const typeList = custom.getExercisesTypeList()
const queryParams = ref({
  page:1,
  pageSize:10,
  user_id:0,
  last_time:'',
  subject:''
})
const subjectParams = ref({
    page:1,
    pageSize:100,
})
const tableData = ref([])
const subjectList = ref([])
const total = ref(0)
// 生命周期
onMounted(() => {
  queryParams.value.id = parseInt(route.params.user_id)
  getTestDetailList()
  getSubject()
})
// 方法
async function getSubject(){ // 获取课程分类
  const res = await capi.getSubjectList(subjectParams.value)
  if(res.code === 0) {
    // subjectList.value = custom.getStdSubject(res.data.records)
    // console.log(subjectList.value)
     subjectList.value = custom.addTreeFormatSubject(res.data.records,'id')
  }
}
async function getTestDetailList() {
  const res = await api.getTestDetailList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
function onSubmit() {
  getTestDetailList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    user_id:0,
    last_time:'',
    subject:''
  }
  queryParams.value.id = parseInt(route.params.user_id)
}
function handleCurrentChange(val) {
  queryParams.value.page = val
  getTestDetailList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getTestDetailList()
}
async function getCourseName(course_id) {
  const res = await capi.getCourse({id:course_id})
  if(res.code === 0) {
    return res.data.step1.name
  }
  return ''
}
</script>
<template>
  <div>
    <!--    搜索框-->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="queryParams">

        <el-form-item label="课程分类">
<!--          <el-select v-model="queryParams.subject" clearable placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in subjectList"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id"-->
<!--            />-->
<!--          </el-select>-->
          <el-tree-select v-model="queryParams.subject" :data="subjectList" :render-after-expand="false" />
        </el-form-item>

        <el-form-item label="测试时间">
           <el-date-picker class="oi-item" style="margin-left:5px"
            v-model="queryParams.last_time"
            type="date"
            placeholder="测试时间"
            format="YYYY-MM-DD"
            value-format="x"
           />
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    表格数据-->
    <div class="gva-table-box">
      <!--      数据列表-->
      <el-table :data="tableData">
        <el-table-column align="left" label="ID"  prop="exam_id" />
        <el-table-column align="left" label="测试时间" min-width="150" >
          <template #default="scope">
            {{formatDate(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="科目" min-width="150" prop="subject"></el-table-column>
        <el-table-column align="left" label="课程" min-width="150" prop="name"></el-table-column>
        <el-table-column align="left" label="测试用时/限时(分钟)" min-width="150">
          <template #default="scope">
            {{scope.row.duration+'/'+scope.row.time_limit}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="测试状态" min-width="150" prop="status">
          <template #default="scope">
            {{scope.row.score && scope.row.rank ? '已公布':scope.row.score && !scope.row.rank?'提交未公布':'未提交'}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="测试名次" min-width="150" prop="rank" />
        <el-table-column align="left" label="测试消费" min-width="150" prop="price" />
        <el-table-column align="left" label="测试收益" min-width="150" prop="reward" />
      </el-table>
      <!--      分页-->
      <div class="gva-pagination">
        <el-pagination
          :current-page="queryParams.page"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>

    </div>
  </div>
</template>
<style scoped lang="scss">
  .option-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
</style>
