<template>
  <div>
    <div style="background-color: #ffffff;font-size: 14px;padding:5px;">
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">地 域：</span>
        </div>
        <el-radio-group v-model="universityParams.locationsRes">
          <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>
      <!--层次-->
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">层 次：</span>
        </div>
        <el-radio-group v-model="universityParams.levelsRes">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in levels" :key="item" :label="item"
                           style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <!-- 科类 -->
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">科 类：</span>
        </div>
        <el-radio-group v-model="universityParams.typeRes">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in types" :key="item" :label="item"
                           style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <!-- 录取年份 -->
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">录 取 年 份：</span>
        </div>
        <el-radio-group v-model="universityParams.yearRes">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in years" :key="item" :label="item"
                           style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
    <!-- 表格数据 -->
      <universities-line-table :universityParams="universityParams"></universities-line-table>
    </div>
  </div>
</template>

<script>
  import {
    selectUniversityLocations,
    selectUniversityLevels,
    selectUniversityTypes,
    selectUniversityYears
  } from '@/api/webApi/shiftLine'
  import UniversitiesLineTable from '@/views/career/components/UniversitiesLineTable'
  export default {
    name: "UniversitiesLine",
    components: {UniversitiesLineTable},
    data() {
      return {
        locations: [],//所在地
        levels: [],
        types: [],
        years: [],
        universityParams: {
          locationsRes: '',
          levelsRes: '',
          typeRes: '',
          yearRes: ''
        }
      }
    },
    watch: {
      // 'universityParams.locationsRes': {
      //   handler(val) {
      //     this.getUniversityLevels()
      //     this.getUniversityTypes()
      //     this.getUniversityYears()
      //   }
      // },
      // 'universityParams.levelsRes': {
      //   handler(val) {
      //     this.getUniversityYears()
      //   }
      // },
      // 'universityParams.typeRes': {
      //   handler(val) {
      //     this.getUniversityYears()
      //   }
      // }
    },
    created() {
      this.getUniversityLocations()
      this.getUniversityLevels()
      this.getUniversityTypes()
      this.getUniversityYears()
    },
    methods: {
      handleQuery() {

      },
      handleInvalidQuery() {

      },
      getUniversityLocations() {
        selectUniversityLocations().then(res => {
          this.locations = res.rows
        })
      },
      getUniversityLevels() {
        const params = {
          location: this.universityParams.locationsRes
        }
        selectUniversityLevels(params).then(res => {
          this.levels = res.rows
        })
      },
      getUniversityTypes() {
        const params = {
          location: this.universityParams.locationsRes
        }
        selectUniversityTypes(params).then(res => {
          this.types = res.rows
        })
      },
      getUniversityYears() {
        const params = {
          level: this.universityParams.levelsRes,
          location: this.universityParams.locationsRes,
          type: this.universityParams.typeRes
        }
        selectUniversityYears(params).then(res => {
          console.log(res)
          this.years = res.rows
        })
      }
    }
  }
</script>

<style lang="scss">
  .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;
    }

    .radiaTitle {
      display: inline-block;
      width: 130px;
      font-size: 14px;
      text-align: right;
      margin-top: 2px;
    }
  }
</style>
