<template>
  <div>
    <el-form inline label-width="100px">
      <el-form-item label="年限：">
        <el-select v-model="formParams.year">
          <el-option v-for="item in year" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报考科类：">
        <el-select v-model="formParams.typeRes">
          <el-option v-for="item in types" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报考批次：">
        <el-select v-model="formParams.marjorBatchsRes">
          <el-option v-for="item in marjorBatchs" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form label-width="100px" id="universityText">
      <el-form-item label="院校名称：">
        <div @click="dialongParams.visible=true">
          <el-badge type="info" value="X" class="item" style="cursor: pointer">
            <el-button>{{formParams.universityRes.name || '添加院校'}}</el-button>
          </el-badge>
        </div>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" class="btn">
      <el-button type="primary" size="medium" @click="getMarjorList">查询</el-button>
    </div>
    <!--数据列表-->
    <div style="margin-top: 20px;">
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column prop="code" label="院校" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" @click="goDetails(scope.row.universityId)">【{{scope.row.universityName}}】</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="location" width="80" label="所在地" align="center"></el-table-column>
        <el-table-column prop="marjorName" label="专业名称" align="center">
            <template  slot-scope="scope">
              <div>{{scope.row.marjorName}}</div>
              <div style="color:#9DA0B4;font-size:12px">{{scope.row.marjorDirection}}</div>
            </template>  
        </el-table-column>
        <el-table-column prop="scoreRealTop" width="90" label="专业最高分" align="center"></el-table-column>
        <el-table-column prop="seatRealTop" label="专业最高分位次" align="center"></el-table-column>
        <el-table-column prop="scoreRealAverage" width="90" label="专业平均分" align="center"></el-table-column>
        <el-table-column prop="seatRealAverage" label="专业平均分位次" align="center"></el-table-column>
        <el-table-column prop="score" label="专业最低分" align="center"></el-table-column>
        <el-table-column prop="seat" label="专业最低分位次" align="center"></el-table-column>
        <el-table-column width="80" prop="numReal" label="录取人数" align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:10px;"
        :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
        :page-size=tableParams.pageSize
        layout="prev,pager,next,jumper,total,sizes"
        :total="examRecordTotal"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialongParams.visible" width="80%">
      <select-university @changeUniversity="changeUniversity"></select-university>
    </el-dialog>
  </div>
</template>

<script>
  import {selectMarjorYears, selectMarjorTypes, selectMarjorBatchs,selectMarjorList} from '@/api/webApi/shiftLine'
  import SelectUniversity from '@/views/career/components/SelectUniversity'
  export default {
    name: "CollegesLine",
    components:{SelectUniversity},
    data() {
      return {
        loading:false,
        examRecordTotal:0,
        year: [],
        types: [],
        marjorBatchs: [
          {
            label:'不限',
            value:''
          }
        ],
        formParams: {
          year: '2018',
          marjorBatchsRes: '',
          typeRes: '文科',
          universityRes:{}
        },
        tableParams:{
          pageSize:20,
          pageNum:1
        },
        dialongParams:{visible:false},
        tableData:[]
      }
    },
    created() {
      this.getMarjorYears()
      this.getMarjorTypes()
      this.getMarjorBatchs()
    },
    methods: {
      sizeChange(e){
        this.tableParams.pageSize=e
        this.getMarjorList()
      },
      currentChange(e){
        //页数
        this.tableParams.pageNum=e
        this.getMarjorList()
      },
      goDetails(id){
        this.$router.push({ name: 'UniversityDetail', params: { id: id } })
      },
      getMarjorList(){
        this.loading=true
        const params={
          batch:this.formParams.marjorBatchsRes,
          pageNum:this.tableParams.pageNum,
          pageSize:this.tableParams.pageSize,
          type:this.formParams.typeRes,
          universityId:this.formParams.universityRes.id,
          year:this.formParams.year
        }
        if(!params.universityId){
          this.msgInfo('院校不能为空')
          return
        }
        selectMarjorList(params).then(res=>{
          this.tableData=res.rows
          this.examRecordTotal=res.total
          this.loading=false
        }).catch(()=>{
          this.loading=false
        })
      },
      changeUniversity(data){
        console.log(data)
        this.dialongParams.visible=false
        this.formParams.universityRes=data
      },
      getMarjorYears() {
        selectMarjorYears().then(res => {
          this.year = res.rows
        })
      },
      getMarjorTypes() {
        selectMarjorTypes().then(res => {
          this.types = res.rows
        })
      },
      getMarjorBatchs() {
        selectMarjorBatchs().then(res => {
          // this.marjorBatchs = res.rows
          this.marjorBatchs =this.marjorBatchs.concat(res.rows)
        })
      }
    }
  }
</script>

<style lang="scss">
  .btn {
    .el-button--medium {
      padding: 15px 50px;
    }
  }
  #universityText{
    .el-badge{
      .el-button{
        padding:15px 90px;
      }
    }
  }

</style>
