/*选择学校*/
<template>
  <div id="schoolBox">
    <div class="search">
      <form action="/">
        <van-search v-model="searchSchool" show-action placeholder="请输入搜索关键词" @input="onSearch" @cancel="onCancel" />
      </form>
    </div>
    <div class="listCardBox">
      <div v-for="(val,i) in schoolList" :key="i" class="listCard">
        <div @click="schoolClick(val)">{{val.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchSchool: '',
      schoolList: []
    }
  },
  methods: {
    onSearch (val) {
      console.log(val)
      this.GetHighSchoolList()
    },
    onCancel () {
      // this.$toast('取消');
      this.searchSchool = ''
      this.schoolList = []
      this.$emit('input', false)
    },
    // 通过学校姓名获取学校
    GetHighSchoolList () {
      this.mgop({
        api: 'mgop.sz.hswsy.GetAllSchoolList', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "schoolName": this.searchSchool
        },
        onSuccess: res => {
          console.log('学校：', res)
          if (res.data.data) {
            let data = res.data.data;
            let arr = [];
            if (data) {
              data.forEach((n, i) => {
                let obj = {};
                obj.text = n.schoolName;
                obj.id = n.id;
                arr.push(obj);
              });
              this.schoolList = arr;
              console.log(this.schoolList)
            }
          } else {
            this.$toast.fail(res.data.message)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    //点击学校
    schoolClick (val) {
      console.log(val)
      this.$emit('schoolData', val)
      this.onCancel()
    }
  },
  mounted () {
    // this.GetHighSchoolList()
  }
}
</script>

<style lang="scss" scoped>
#schoolBox {
  width: 100vw;
  height: 100vh;
  // top: 0;
  // left: 0;
  background-color: #fff;

  .search {
    padding: 40px 30px;
    box-sizing: border-box;
  }
  .listCardBox {
    height: 1050px;
    overflow: auto;

    .listCard {
      width: 700px;
      height: 70px;
      color: black;
      font-size: 29px;
      margin-left: 30px;
    }
  }
}
</style>