<template>
  <div class="selectUniversity" id="selectUniversity" ref="selectUniversity">
    <!--上-->
    <div>
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <h1 class="title">选择院校</h1>
        </el-col>
        <el-col :span="12">
          <div style="text-align: right;margin-bottom: 10px;" class="search">
            <el-input style="width:80%;" suffix-icon=" " placeholder="请输入院校名称" v-model="tableParams.name" @keyup.enter.native="clickSuffix">
           <span slot="suffix" @click="clickSuffix" style="cursor: pointer">
            <i class="el-icon-search" style="margin-right: 10px;"></i>
          </span>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--下-->
    <div>
        <el-row class="radioInput">
          <el-radio-group v-model="tableParams.location" @change="getUniversityList()">
            <el-radio-button label="">所有</el-radio-button>
            <el-radio-button v-for="item in locations" :key="item" :label="item"
                             style="margin-bottom:10px"></el-radio-button>
          </el-radio-group>
        </el-row>
    </div>
    <div style="margin-top: 20px;">
   <div>
     <el-row :gutter="20">
       <el-col  :span="6" v-for="item in tableData" :key="item.id">
         <div @click="changeUniversity(item)" class="universityList">{{item.name}}</div>
       </el-col>
     </el-row>
   </div>
      <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>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {selectUniversityLocations,marjorSelectUniversityList} from '@/api/webApi/shiftLine'
  export default {
    name: "SelectUniversity",
    data(){
      return {
        locations:[],
        examRecordTotal:0,
        tableParams:{
          pageSize:20,
          pageNum:1,
          location:'',
          name:'',
        },
        tableData:[]
      }
    },
    computed: {
      ...mapState({theme: (state) => state.settings.theme}),
    },
    watch: {
      theme: {
        immediate: true,
        handler(val) {
          this.$nextTick(() => {
            this.$refs.selectUniversity.style.setProperty("--themeColor", val);
          });
        },
      }
    },
    created() {
      this.getUniversityLocations()
      this.getUniversityList()
    },
    methods:{
      changeUniversity(data){
        this.$emit('changeUniversity',data)
      },
      getUniversityList(){
        marjorSelectUniversityList(this.tableParams).then(res=>{
          this.tableData=res.rows
          this.examRecordTotal=res.total
        })
      },
      clickSuffix(){
        this.getUniversityList()
      },
      getUniversityLocations() {
        selectUniversityLocations().then(res => {
          this.locations = res.rows
        })
      },
      sizeChange(e){
        this.tableParams.pageSize=e
        this.getUniversityList()
      },
      currentChange(e){
        //页数
        this.tableParams.pageNum=e
        this.getUniversityList()
      },
    }
  }
</script>

<style scoped lang="scss">
  #selectUniversity {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding:0 30px;
    .title{
      font-weight: 400;
      border-left: 6px solid var(--themeColor);
      padding:5px 20px;
      color:var(--themeColor);
    }
    .search{
      .el-input {
        .el-input__inner {
          border-radius: 50px;
        }
      }
    }
    .universityList{
      background-color: var(--themeColor);
      line-height: 60px;
      margin-bottom: 10px;
      text-align: center;
    }
  }

</style>

<style lang="scss">
  .selectUniversity {
    .search{
      .el-input {
        .el-input__inner {
          border-radius: 50px;
        }
      }
    }
    .radioInput {
      .el-radio {
        .el-radio__input {
          display: none;
        }
      }
    }

    .radioInput {
      display: flex;
      margin-top: 5px;
      .el-radio-button .el-radio-button__inner {
        border-radius: 4px !important;
        border: none;
        padding: 5px 10px !important;
        font-weight: 400;
        font-family: PingFangSC-Regular, PingFang SC;
      }

      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        box-shadow: none;
      }
    }
  }
</style>
