<template>
  <div>
    <div id="prefect_box">
      <img class="bg" src="../assets/msg.png" alt="">
      <div class="content">
        <div class="item">
          <input type="text" placeholder="请输入您的姓名" v-model="studentName">
        </div>
        <div class="item" @click="handleYear">
          <p :class="!year||yearDisable?'nodata':''">{{year?year:'请选择当前所处高中年级'}}</p>
          <img src="../assets/more.png" alt="">
        </div>
        <div class="item" @click="showAreaSelect = true">
          <p :class="!area?'nodata':''">{{area?area:'请选择地区'}}</p>
          <img src="../assets/more.png" alt="">
        </div>
        <div class="item" @click="handleSchool">
          <p :class="!school?'nodata':''">{{school?school:'请选择学校'}}</p>
          <img src="../assets/more.png" alt="">
        </div>
        <div class="tip">
          <img src="../assets/tip2.png" alt="">
          <p>所处高中年级与会员有效期相关，请认真填写</p>
        </div>
        <button class="submit" @click="submit">完成</button>
      </div>
    </div>
    <van-popup v-model="showYearSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
      <van-picker title="当前所处高中年级" show-toolbar :columns="yearArr" value-key="label" @cancel="showYearSelect = false" @confirm="selectYearOver" />
    </van-popup>
    <van-popup v-model="showAreaSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
      <van-area title="地区" :area-list="areaList" @cancel="showAreaSelect = false" @confirm="selectAreaOver" />
    </van-popup>
    <van-popup v-model="showSchoolSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
      <van-picker title="学校" show-toolbar :columns="schoolList" @cancel="showSchoolSelect = false" @confirm="selectSchoolOver" />
    </van-popup>
  </div>
</template>

<script>

export default {
  data () {
    return {
      studentName: '',
      year: '',
      yearDisable: false,
      showYearSelect: false,
      yearArr: [],
      area: '',
      areaCode: '',
      showAreaSelect: false,
      areaList: [],
      school: '',
      schoolId: '',
      showSchoolSelect: false,
      schoolList: [],
    }
  },

  mounted () {
    let userInfo = sessionStorage.getItem('userInfo')
    this.userInfo = userInfo ? JSON.parse(userInfo) : userInfo;
    this.studentName = this.userInfo?.studentName;
    this.initYearArr()
    this.GetSysAreaList()
  },
  methods: {
    // 初始化入学年份选项
    initYearArr () {
      // 页面创建时执行
      let year = new Date().getFullYear(),
        Month = new Date().getMonth() + 1,
        yearArr = [];
      // if (Month > 8) {
      //   // 如果月份大于8,那么当年的学年的高考年份要+1,如果月份小于7,那么当前的年份就是今年高考的年份
      //   year = year + 1
      // }
      for (let index = year - 2; index < year + 1; index++) {
        yearArr.push({ value: index, label: '' })
      }
      yearArr[0].label = `高三(${yearArr[0].value})级`;
      yearArr[1].label = `高二(${yearArr[1].value})级`;
      yearArr[2].label = `高一(${yearArr[2].value})级`;
      this.yearArr = yearArr
      if (this.userInfo?.year) {
        for (let i in yearArr) {
          if (yearArr[i].value == this.userInfo.year) {
            this.year = yearArr[i].label
            this.yearDisable = true
          }
        }
      }
    },
    selectYearOver (value) {
      this.year = value.label;
      this.showYearSelect = false;
    },
    handleYear () {
      if (!this.yearDisable) {
        this.showYearSelect = true;
      }
    },
    // 获取地区列表
    GetSysAreaList () {
      this.http.GetSysAreaList({
        areaCode: 33
      }).then((res) => {
        if (res.success) {
          let data = res.data;
          let obj = {
            province_list: {
              330000: '浙江省'
            },
            city_list: {},
            county_list: {}
          };
          if (data) {
            data.forEach((n, i) => {
              obj.city_list[n.area_code + '00'] = n.area_name;
              if (n.areaList.length > 0) {
                n.areaList.forEach((k, j) => {
                  obj.county_list[k.area_code] = k.area_name;
                })
              }
            });
            this.areaList = obj;
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    selectAreaOver (value) {
      let data = value;
      var city = data[1].code;
      city = city.substring(0, city.length - 2);
      // console.log(city)
      this.area = data[0].name + ',' + data[1].name + ',' + data[2].name;
      this.areaCode = [data[0].code, city, data[2].code];
      this.quCode = data[2].code;
      this.school = '',
        this.schoolId = '',
        this.showAreaSelect = false
      this.GetHighSchoolList(data[2].code);// 通过地区获取学校
    },
    // 点击选择学校
    handleSchool () {
      if (!this.area) {
        this.$toast('请先选择地区');
        return;
      }
      this.showSchoolSelect = true
    },
    // 通过地区获取学校
    GetHighSchoolList (areaCode) {
      this.http.GetHighSchoolList({
        areaCode: areaCode
      }).then((res) => {
        if (res.success) {
          let data = res.data;
          let arr = [];
          if (data) {
            data.forEach((n, i) => {
              let obj = {};
              obj.text = n.schoolName;
              obj.value = n.id;
              arr.push(obj);
            });
            this.schoolList = arr;
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    selectSchoolOver (value) {
      this.school = value.text;
      this.schoolId = value.value
      this.showSchoolSelect = false
    },

    submit () {
      if (!this.year) {
        this.$toast('请选择入学年份');
        return;
      }
      let postData = {
        studentName: this.studentName,
        province: this.area.split(',')[0],
        city: this.area.split(',')[1],
        areaCode: this.areaCode[2],
        areaName: this.area.split(',')[2],
        school: this.school,
        schoolAddress: this.areaCode[2] ? JSON.stringify(this.areaCode) : '',
        year: this.year=='高一'?this.yearArr[2].value:this.year=='高二'?this.yearArr[1].value:this.yearArr[0].value
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.http.updateUserInfo(postData).then((res) => {
        this.$toast.clear()
        if (res.success) {
          this.$toast.success(res.message)
          this.$emit('complete')
          this.$emit('hidePrefectBox')
        } else {
          this.$toast.fail(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#prefect_box {
  width: 638px;
  height: 836px;
  background: #ffffff;
  border-radius: 24px;
  position: relative;
  .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    top: 236px;
    left: 0;
    .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;
        }
      }
    }
    .tip {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
      img {
        width: 32px;
      }
      p {
        font-size: 24px;
        color: #f7b500;
        margin-left: 8px;
      }
    }
    .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: 0 auto;
      display: block;
    }
  }
}
</style>