<template>
  <div ref="UniversitiesColleges">
    <el-card :style="{'background-image':backimg}" style="padding:30px;margin:10px 0;background-color:white;background-repeat: no-repeat;background-position: bottom right;">
      <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">UNIVERSITIES AND COLLECGES</p>
      <p style="color:#414141;font-size:24px;font-weight:bold;">院校库</p>
      <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
    </el-card>
    <el-card 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 universityList.locations" :key="item" :label="item" style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row class="radioInput" style="background-color: #ffffff;font-size: 14px;padding:5px;">
        <div>
          <span class="radiaTitle">主 管 部 门 类 别：</span>
        </div>
        <el-radio-group v-model="universityParams.managerTypesRes">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in universityList.managerTypes" :key="item.name" :label="item.name" style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row class="radioInput" style="background-color: #ffffff;font-size: 14px;padding:5px;">
        <div>
          <span class="radiaTitle">校 院 类 型：</span>
        </div>
        <el-radio-group v-model="universityParams.typesRes">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in universityList.types" :key="item" :label="item" style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row class="radioInput" style="background-color: #ffffff;font-size: 14px;padding:5px;">
        <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 universityList.levels" :key="item" :label="item" style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row class="radioInput02" style="background-color: #ffffff;font-size: 14px;padding:5px;">
        <div style="margin-top:-5px">
          <span class="radiaTitle">院 校 特 性：</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="universityParams.checkList">
            <el-checkbox label="1">一流大学建设高校</el-checkbox>
            <el-checkbox label="2">一流学科建设高校</el-checkbox>
            <el-checkbox label="3">研究生院</el-checkbox>
            <el-checkbox label="4">独立学院</el-checkbox>
            <el-checkbox label="5">民办高校</el-checkbox>
          </el-checkbox-group>
        </el-row>
        <el-row style="margin-left: 10px;">
          <el-input style="width:150%" suffix-icon=" " placeholder="搜索" v-model="univerName" @keyup.enter.native="clickSuffix">
            <!-- @click.native="clickSuffix"-->
            <span slot="suffix" @click="clickSuffix" style="cursor: pointer">
              <i class="el-icon-search"></i>
            </span>
          </el-input>
        </el-row>
      </el-row>
      <el-row style="margin-top:10px;">
        <universities-table :universityParams="universityParams"></universities-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import UniversitiesTable from '@/views/career/components/UniversitiesTable';
import { selectUniversity } from '@/api/webApi/career-course'
export default {
  name: "UniversitiesColleges",
  components: { UniversitiesTable },
  data() {
    return {
      backimg: 'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
      universityList: {},
      univerName: '',//查询名称
      universityParams: {  //保存数据项选择结果
        locationsRes: '',
        managerTypesRes: '',
        typesRes: '',
        levelsRes: '',
        checkList: [],
        name: ''
      }
    }
  },
  computed: {
    ...mapState({ theme: state => state.settings.theme }),
  },
  watch: {
    theme: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.$refs.UniversitiesColleges.style.setProperty('--themeColor', val)
        })
      }
    },
    'universityParams.locationsRes': {
      handler(val) {
        this.universityParams.name = ''
        this.univerName = ''
      }
    }
  },
  created() {
    this.getUniversity()
  },
  methods: {
    clickSuffix() {
      this.universityParams.name = this.univerName
    },
    getUniversity() {
      selectUniversity().then(res => {
        this.universityList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: var(--themeColor);
  margin-left: 0;
}
</style>
<style lang="scss">
.radioInput {
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}
.radioInput {
  display: flex;
  .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;
  }
}
.radioInput02 {
  display: flex;
  align-items: center;
  .radiaTitle {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
  }
  .el-input--medium .el-input__inner {
    border-radius: 50px;
  }
}
</style>
