<template>
  <div>
    <div class="addchild_group" v-if="step==1">
      <img class="bg" src="@/assets/home/bg2.png" alt="">
      <p class="title">选择学校</p>
      <p class="des">请选择你关注的学校</p>
      <div class="content">
        <!-- <div class="name">选择学校</div> -->
        <div class="item">
          <input type="text" placeholder="请选择学校" readonly v-model="school">
          <button type="info" class="btn" @click="chooseSchool">选择学校</button>
        </div>
        <button class="submit" @click="submit">确定</button>
      </div>
    </div>

    <van-popup v-model="chooseSchoolisShow" round get-container="body" :safe-area-inset-bottom="true">
      <div v-if="chooseSchoolisShow">
        <chooseSchool v-model="chooseSchoolisShow" @schoolData='schoolData'></chooseSchool>
      </div>
    </van-popup>
  </div>
</template>

<script>

import chooseSchool from '@/views/Home/component/chooseSchool'
export default {
  components: { chooseSchool },
  data () {
    return {
      step: 1,
      phone: '',
      codeText: '获取验证码',//获取验证码按钮文字
      code: '',//验证码
      studentName: '',
      userInfo: {},
      appid:'wx1305e88d2bc74073',
      searchSchool: '',
      school: '',
      schoolId: '',

      chooseSchoolisShow: false
    }
  },

  mounted () {
    let userInfo = localStorage.getItem('userInfo')
    this.userInfo = JSON.parse(userInfo);
  },
  methods: {
    submit () {
      if (!this.school) {
        this.$toast('请选择学校');
      } else {
        let postData = {
          userNum: this.userInfo.centerNo,
          contactsName: this.userInfo.nickName,
          contactsMobile: this.userInfo.phone,
          loginMobile: this.userInfo.phone,
          schoolName: this.school,
          contactsType: this.userInfo.userType,
        }
        this.$toast.loading({
          message: '加载中',
          duration: 0,
          forbidClick: true
        })
        console.log(postData)
        this.yxAxios.post(`${this.proxyUrl}/user/info/addContacts`, postData).then((res) => {
          this.$toast.clear()
          if (res.data.code == 200) {
            this.$toast.success('关注成功')
            this.$emit('closeAdd')
            this.getUserInfoXST()
          } else {
            this.$toast.fail(res.message)
          }
        })
      }
    },
    //选择学校
    chooseSchool () {
      // this.$router.push({name: 'chooseSchool'})
      this.chooseSchoolisShow = true
    },
    schoolData (val) {
      this.school = val.text;
      this.schoolId = val.id;
    },
    // 获取用户信息
    getUserInfoXST () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })

      this.yxAxios.get(`${this.baseUrl}/prod/api/wx/${this.appid}/getUserInfo?unionId=${localStorage.getItem('unionId')}`).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          localStorage.setItem('userInfo', JSON.stringify(res.data.data))
          
          if(res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
            localStorage.setItem('schoolNames',JSON.stringify(res.data.data.schoolNames))
            this.$store.commit('changeSchool', res.data.data.schoolNames)
            if(!localStorage.getItem('schoolNamesChoose')) {
              localStorage.setItem('schoolNamesChoose',res.data.data.schoolNames[0])
            }
          }else {
              localStorage.setItem('schoolNames',[])
              this.$store.commit('changeSchool', [])
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.addchild_group {
  width: 638px;
  // height: 836px;
  height: 496px;
  background: #ffffff;
  border-radius: 24px;
  position: relative;
  .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .title {
    position: relative;
    width: 100%;
    padding-top: 70px;
    padding-bottom: 8px;
    text-align: center;
    font-size: 34px;
    font-weight: bold;
    color: #0857ff;
  }
  .des {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15%;
    text-align: center;
    font-size: 24px;
    color: #6596ff;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    top: 236px;
    left: 0;
    .name {
      width: 558px;
      height: 50px;
      font-size: 28px;
      color: #000;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .item {
      width: 558px;
      height: 72px;
      border-radius: 36px;
      background: #f7f7f7;
      box-sizing: border-box;
      font-size: 28px;
      padding: 0 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28px;
      p {
        color: #333333;
        &.nodata {
          color: #999999;
        }
      }
      img {
        width: 40px;
      }
      input {
        width: 100%;
        background: transparent;
        border: 0;
        color: #333333;
        padding: 0;
        &::-webkit-input-placeholder {
          color: #999999;
        }
      }
      .btn {
        width: 240px;
        height: 55px;
        float: right;
        font-size: 28px;
        background: linear-gradient(135deg, #cdf8cf 0%, #8af36f 100%);
        box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5),
          0px 8px 12px 0px rgba(89, 199, 171, 0.5);
        border-radius: 34px;
        border: transparent;
        color: #333333;
      }
    }
    .school_select {
      font-size: 28px;
      padding: 0 32px;
      margin-bottom: 28px;
    }
    .submit {
      width: 294px;
      height: 72px;
      border: 0;
      background: linear-gradient(135deg, #99c2ff 0%, #1f59ff 100%);
      box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5),
        0px 8px 12px 0px rgba(87, 137, 255, 0.5);
      border-radius: 34px;
      font-size: 34px;
      color: #ffffff;
      margin: 55px auto 0;
      display: block;
    }
  }
  .child_content {
    position: relative;
    margin-top: 40px;
    .child_box {
      height: 500px;
      overflow: auto;
      padding-left: 100px;
      .child_item {
        position: relative;
        margin-bottom: 50px;
        p {
          font-size: 28px;
          padding: 8px 0;
          span {
            display: inline-block;
            width: 140px;
            margin-right: 28px;
            color: #999;
          }
        }
        .checkbox {
          position: absolute;
          top: 115px;
          right: 20px;
        }
      }
    }
    .submit {
      width: 438px;
      height: 78px;
      background: #3385ff;
      border-radius: 37px;
      border-radius: 39px;
      border: 0;
      font-size: 34px;
      color: #ffffff;
      margin: 0 auto;
      display: block;
    }
  }
  .phone_content {
    width: 100%;
    position: absolute;
    top: 180px;
    left: 0;
    box-sizing: border-box;
    padding: 40px;
    .item {
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 30px;
    }
    .phone_title {
      font-size: 34px;
      font-weight: bold;
      margin-bottom: 28px;
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    .code {
      border: 0;
      background: transparent;
      font-size: 28px;
      margin-bottom: 32px;
      width: 100%;
    }
    .phone {
      width: 50%;
      margin: 0;
    }
    .getcode {
      color: #5789ff;
      font-size: 28px;
      padding: 10px;
    }
    .submit {
      width: 438px;
      height: 78px;
      background: #3385ff;
      border-radius: 37px;
      border-radius: 39px;
      border: 0;
      font-size: 34px;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 120px;
      display: block;
    }
  }
}
/deep/.van-search {
  background: transparent;
  padding: 0;
  width: 100%;
}
/deep/.van-search__content {
  padding: 0;
}
.schoolBoxF {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}
</style>