<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="学生姓名" prop="userName">
          <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable/>
        </el-form-item>
        <el-form-item label="课程类型" prop="userName">
          <el-select v-model="queryParams.courseType" placeholder="请选择课程类型" clearable>
            <el-option v-for="(item,index) in dict.type.course_type" :key="index"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选课状态" prop="userName">
          <el-select v-model="queryParams.curriculaState" placeholder="请选择选课状态" clearable>
            <el-option v-for="(item,index) in dict.type.curricula_state" :key="index"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" icon="el-icon-upload2" size="mini" @click="exportRecord">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="flexBlock person">
        <div>总人数：{{totalPerson}} 人</div>
        <div>已选课：<span>{{choosePerson}}</span> 人</div>
      </div>
      <el-table v-loading="loading" :data="courseSelectionData" stripe>
        <el-table-column label="序号" type="index" width="55" align="center"/>
        <el-table-column label="学生姓名" align="center" prop="studentName"/>
        <el-table-column label="身份证号" align="center" prop="idCard"/>
        <el-table-column label="学号" align="center" prop="studentNumber"/>
        <el-table-column label="课程类型" align="center" prop="courseType">
          <!-- 1春季选课 2夏季选课 3艺体 -->
          <template slot-scope="{ row }">
            <div>{{ selectDictLabel(dict.type.course_type,row.courseType) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="选课时间" align="center" prop="curriculaTime"/>
        <el-table-column label="选课状态" align="center" prop="curriculaState">
          <template slot-scope="{ row }">
            <div>{{ selectDictLabel(dict.type.curricula_state,row.curriculaState) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="已选专业/课程" align="center" prop="orgname">
        <!--
          1春季：专业--专业类别 specialty
          2夏季：课程--学生选科 section_type
          3艺体：科目+课程 -- 艺体科目 art_subject
        -->
          <template slot-scope="{ row }">
            <div v-if="row.courseType == 1">{{ selectDictLabels(dict.type.specialty,row.selectedMajor) }}</div>
            <div v-else-if="row.courseType == 2">{{ selectDictLabel(dict.type.section_type,row.selectedCourse) }}</div>
            <div v-else-if="row.courseType == 3">
              {{ selectDictLabel(dict.type.art_subject,row.selectedSubject) }}
              {{ selectDictLabel(dict.type.section_type,row.selectedCourse) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination ref="pageBlock" v-show="total > 0" :total="total"
                  :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>
</template>

<script>
import {courseSelectionList} from "../../../../../api/smartSchool/gradeWork/courseSelection/courseSelection";

export default {
  dicts: ['curricula_state','course_type','specialty','section_type','art_subject'],
  data(){
    return {
      queryParams:{
        curriculaId:'',
        studentName:'',
        courseType:'',
        curriculaState:'',
        pageNum: 1,
        pageSize: 10,
      },
      courseSelectionData:[],
      loading:false,
      total:0,
      totalPerson:0, // 总人数
      choosePerson:0 // 已选人数
    }
  },
  mounted() {
    this.totalPerson = this.$route.query.total
    this.choosePerson = this.$route.query.choose
    this.getList()
  },
  methods:{
    //获取数据信息
    getList(){
      this.loading = true
      this.queryParams.curriculaId = this.$route.query.id
      courseSelectionList({...this.queryParams}).then(res=>{
        if(res.code == 200){
          this.courseSelectionData = res.rows
          this.total = res.total
          this.loading = false
        }
      })
    },

    //重置
    resetQuery(){
      this.queryParams = {
        curriculaId:'',
        studentName:'',
        courseType:'',
        curriculaState:'',
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },

    //导出
    exportRecord(){
      let data = {
        curriculaId:this.queryParams.curriculaId,
        studentName:this.queryParams.studentName,
        courseType:this.queryParams.courseType,
        curriculaState:this.queryParams.curriculaState,
      }
      this.download(
        "curricula/student/export",
        {
          ...data,
        },
        `学生选课信息_${new Date().getTime()}.xlsx`
      );
    },
  }

}
</script>

<style lang="scss" scoped>
.person {
  line-height: 35px;
  color: #333333;
  font-size: 14px;
  padding-bottom: 10px;
}
.person div:last-child {
  padding-left: 20px;
}
.person div:last-child span {
  color: #1890ff;
  font-weight: 500;
}
</style>
