<template>
  <div>
    <div class="addchild_group" v-if="step == 2">
      <img class="bg" src="@/assets/home/bg2.png" alt="" />
      <p class="title">学校激活认证</p>
      <p class="des">认证通过后，学生研学记录可同步到学校！</p>
      <div class="phone_content">
        <template v-if="cardAuth">
          <div class="item">
            <p class="phone_title">姓名</p>
            <input class="code" type="text" v-model="cardName" placeholder="请输入证件姓名" />
          </div>
          <div class="item">
            <p class="phone_title">身份证号码</p>
            <input class="code" type="text" v-model="cardId" placeholder="请输入身份证号码" />
          </div>
          <button class="submit" @click="checkCard">完成</button>
          <p class="change-btn" @click="cardAuth = false">使用手机号码认证</p>
        </template>
        <template v-else>
          <div class="item">
            <p class="phone_title">手机号</p>
            <div class="flex">
              <input class="code phone" type="tel" maxlength="11" v-model="phone" placeholder="请输入家校联系预留手机号" />
              <span class="getcode" @click="getCode">{{ codeText }}</span>
            </div>
          </div>
          <div class="item">
            <p class="phone_title">验证码</p>
            <input class="code" type="text" v-model="code" placeholder="请输入验证码" />
          </div>
          <button class="submit" @click="checkPhoneAndCode">完成</button>
          <p class="change-btn" @click="cardAuth = true">使用身份证件认证</p>
        </template>
      </div>
    </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" style="width:48%;display:inline-flex;margin-right:4%;">
          <input type="text" placeholder="请输入学生姓名" v-model="studentName" />
        </div>
        <div class="item" @click="handleYear" style="width:48%;display:inline-flex;">
          <p :class="!year || yearDisable ? 'nodata' : ''">{{ year ? year : '入学年份' }}</p>
          <img src="@/assets/more.png" alt="" />
        </div>
        <div class="item" @click="showUserTypeSelect = true" style="width:48%;display:inline-flex;margin-right:4%;">
          <p :class="!userType ? 'nodata' : ''">{{ userType ? userType : '当前阶段' }}</p>
          <img src="@/assets/more.png" alt="" />
        </div>
        <div class="item" @click="showUserClassSelect = true" style="width:48%;display:inline-flex;">
          <p :class="!classType ? 'nodata' : ''">{{ classType ? classType : '班级' }}</p>
          <img src="@/assets/more.png" alt="" />
        </div>

        <div class="item" @click="handleSelectArea">
          <p :class="!area ? 'nodata' : ''">{{ area ? area : '请选择地区' }}</p>
          <img src="@/assets/more.png" alt="" />
        </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="showUserTypeSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
      <van-picker
        title="当前阶段"
        show-toolbar
        :columns="userTypeArr"
        value-key="label"
        @cancel="showUserTypeSelect = false"
        @confirm="selectUserTypeOver"
      />
    </van-popup>
    <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-cascader
        v-model="area"
        title="请选择所在地区"
        :options="areaList"
        :field-names="fieldNames"
        @close="showAreaSelect = false"
        @finish="selectAreaOver"
      />
    </van-popup>
    <van-popup v-model="showUserClassSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
      <van-picker
        title="班级"
        show-toolbar
        :columns="classTypeArr"
        value-key="label"
        @cancel="showUserClassSelect = false"
        @confirm="selectClassTypeOver"
      />
    </van-popup>

    <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/Service/component/chooseSchool'
import areaList from '@/common/area.json'
var codeInterval
export default {
  components: { chooseSchool },
  props: ['step', 'travelerNum'],
  data() {
    return {
      phone: '',
      codeText: '获取验证码', //获取验证码按钮文字
      code: '', //验证码
      studentName: '',
      showDialog: true,

      year: '', //入学年份
      yearDisable: false,
      showYearSelect: false,
      yearArr: [],

      userType: '',
      userTypeVal: '', //所处阶段1-小学 2-初中 3-高中
      showUserTypeSelect: false,
      userTypeArr: [
        {
          label: '幼儿园',
          value: 0,
        },
        {
          label: '小学',
          value: 1,
        },
        {
          label: '初中',
          value: 2,
        },
        {
          label: '高中',
          value: 3,
        },
      ],

      classType: '',
      classTypeVal: '', //班级
      showUserClassSelect: false,
      classTypeArr: [
        {
          label: '1班',
          value: '1班',
        },
        {
          label: '2班',
          value: '2班',
        },
        {
          label: '3班',
          value: '3班',
        },
        {
          label: '4班',
          value: '4班',
        },
        {
          label: '5班',
          value: '5班',
        },
        {
          label: '6班',
          value: '6班',
        },
        {
          label: '7班',
          value: '7班',
        },
        {
          label: '8班',
          value: '8班',
        },
        {
          label: '9班',
          value: '9班',
        },
        {
          label: '10班',
          value: '10班',
        },
        {
          label: '11班',
          value: '11班',
        },
        {
          label: '12班',
          value: '12班',
        },
        {
          label: '13班',
          value: '13班',
        },
        {
          label: '14班',
          value: '14班',
        },
        {
          label: '15班',
          value: '15班',
        },
        {
          label: '16班',
          value: '16班',
        },
        {
          label: '17班',
          value: '17班',
        },
        {
          label: '18班',
          value: '18班',
        },
        {
          label: '19班',
          value: '19班',
        },
        {
          label: '20班',
          value: '20班',
        },
        {
          label: '21班',
          value: '21班',
        },
        {
          label: '22班',
          value: '22班',
        },
        {
          label: '23班',
          value: '23班',
        },
        {
          label: '24班',
          value: '24班',
        },
        {
          label: '25班',
          value: '25班',
        },
        {
          label: '26班',
          value: '26班',
        },
        {
          label: '27班',
          value: '27班',
        },
        {
          label: '28班',
          value: '28班',
        },
        {
          label: '29班',
          value: '29班',
        },
        {
          label: '30班',
          value: '30班',
        },
        {
          label: '31班',
          value: '31班',
        },
        {
          label: '32班',
          value: '32班',
        },
        {
          label: '33班',
          value: '33班',
        },
        {
          label: '34班',
          value: '34班',
        },
        {
          label: '35班',
          value: '35班',
        },
        {
          label: '36班',
          value: '36班',
        },
        {
          label: '37班',
          value: '37班',
        },
        {
          label: '38班',
          value: '38班',
        },
        {
          label: '39班',
          value: '39班',
        },
        {
          label: '40班',
          value: '40班',
        },
        {
          label: '41班',
          value: '41班',
        },
        {
          label: '42班',
          value: '42班',
        },
        {
          label: '43班',
          value: '43班',
        },
        {
          label: '44班',
          value: '44班',
        },
        {
          label: '45班',
          value: '45班',
        },
        {
          label: '46班',
          value: '46班',
        },
        {
          label: '47班',
          value: '47班',
        },
        {
          label: '48班',
          value: '48班',
        },
        {
          label: '49班',
          value: '49班',
        },
        {
          label: '50班',
          value: '50班',
        },
      ],

      area: '',
      areaCode: '',
      showAreaSelect: false,
      areaList: areaList,
      fieldNames: {
        text: 'area_name',
        value: 'area_name',
        children: 'areaList',
      },

      searchSchool: '',
      school: '',
      schoolId: '',

      chooseSchoolisShow: false,
      cardAuth: false, //是否身份证认证
      cardName: '',
      cardId: '',
    }
  },

  mounted() {
    let userInfo = localStorage.getItem('userInfo')
    this.userInfo = JSON.parse(userInfo)
    this.initYearArr()
  },
  methods: {
    // 获取验证码
    getCode() {
      if (this.codeText != '获取验证码') return
      if (!this.phone) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true,
      })
      this.mgop({
        api: 'mgop.sz.hswsy.getMsg', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          phone: this.phone,
        },
        onSuccess: (res) => {
          this.$toast.clear()
          if (res.data.code == 200 || res.data.success) {
            let i = 60
            codeInterval = setInterval(() => {
              if (i == 0) {
                this.codeText = `获取验证码`
                clearInterval(codeInterval)
                return
              }
              this.codeText = `重试（${i}）`
              i--
            }, 1000)
          } else {
            this.$toast.fail(res.data?.message)
          }
        },
        onFail: (err) => {
          console.log('err', err)
        },
      })
    },
    // 获取手机号白名单信息,激活认证
    checkPhoneAndCode() {
      if (!this.phone) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return
      }
      if (!this.code) {
        this.$toast('请输入验证码')
        return
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true,
      })
      this.mgop({
        api: 'mgop.sz.hswsy.checkPhone', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          code: this.code,
          phone: this.phone,
          travelerNum: this.travelerNum,
        },
        onSuccess: (res) => {
          this.$toast.clear()
          if (res.data.code == 200) {
            this.$toast.success('认证成功')
            this.$emit('complete')
          } else {
            this.$toast.fail(res.data?.message)
          }
        },
        onFail: (err) => {
          console.log('err', err)
        },
      })
    },
    // 获取身份证认证
    checkCard() {
      if (!this.cardName) {
        this.$toast('请输入证件姓名')
        return
      }
      if (!this.cardId) {
        this.$toast('请输入身份证号')
        return
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true,
      })
      this.mgop({
        api: 'mgop.sz.hswsy.checkIdCard', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          idCard: this.cardId,
          travelerNum: this.travelerNum,
        },
        onSuccess: (res) => {
          this.$toast.clear()
          if (res.data.code == 200) {
            this.$toast.success('认证成功')
            this.$emit('complete')
          } else {
            this.$toast.fail(res.data?.message)
          }
        },
        onFail: (err) => {
          console.log('err', err)
        },
      })
    },
    // 初始化入学年份选项
    initYearArr() {
      // 页面创建时执行
      let year = new Date().getFullYear(),
        Month = new Date().getMonth() + 1,
        yearArr = []
      if (Month > 8) {
        // 如果月份大于8,那么当年的学年的高考年份要+1,如果月份小于7,那么当前的年份就是今年高考的年份
        year = year
      }
      for (let index = year; index > year - 6; index--) {
        yearArr.push({ value: index, label: index })
      }
      this.yearArr = yearArr
    },
    selectYearOver(value) {
      this.year = value.label
      this.showYearSelect = false
    },
    handleYear() {
      if (!this.yearDisable) {
        this.showYearSelect = true
      }
    },
    selectUserTypeOver(value) {
      this.userType = value.label
      this.userTypeVal = value.value
      this.showUserTypeSelect = false
    },
    //班级选择
    selectClassTypeOver(value) {
      this.classType = value.label
      this.classTypeVal = value.value
      this.showUserClassSelect = false
    },
    selectAreaOver(value) {
      this.area = '浙江省,' + value.selectedOptions[0].area_name + ',' + value.selectedOptions[1].area_name
      this.showAreaSelect = false
    },

    submit() {
      if (!this.studentName) {
        this.$toast('请输入姓名')
      } else if (!this.userType) {
        this.$toast('请选择阶段')
      } else if (!this.classType) {
        this.$toast('请选择班级')
      } else if (!this.year) {
        this.$toast('请选择入学年份')
      } else if (!this.area) {
        this.$toast('请选择地区')
      } else if (!this.school) {
        this.$toast('请选择学校')
      } else {
        let postData = {
          contactsName: this.studentName,
          contactsMobile: this.userInfo?.phone,
          contactsType: 1,
          province: this.area.split(',')[0], //省份
          city: this.area.split(',')[1], //城市
          area: this.area.split(',')[2], //地区
          schoolName: this.school, //学校名称
          enrollYear: this.year, //入学年份
          travelerType: this.userTypeVal, //0 幼儿园 1-小学 2-初中 3-高中
          loginMobile: this.userInfo?.phone,
          className: this.classType, //班级
        }
        this.$toast.loading({
          message: '加载中',
          duration: 0,
          forbidClick: true,
        })
        this.mgop({
          api: 'mgop.sz.hswsy.addStudent', // 必须
          host: 'https://mapi.zjzwfw.gov.cn/',
          dataType: 'JSON',
          type: 'GET',
          appKey: 'fuxgnukl+2001895516+edccpx', // 必须
          headers: {
            //   'isTestUrl': '1'
          },
          data: postData,
          onSuccess: (res) => {
            console.log('添加学生：', res)
            this.$toast.clear()
            if (res.data.code == 200) {
              this.$toast.success('添加学生成功')
              this.$emit('complete')
            } else {
              this.$toast.fail(res.data?.message)
            }
          },
          onFail: (err) => {
            console.log('err', err)
          },
        })
      }
    },
    //选择学校
    chooseSchool() {
      // this.$router.push({name: 'chooseSchool'})
      this.chooseSchoolisShow = true
    },
    schoolData(val) {
      this.school = val.text
      this.schoolId = val.id
    },
    checkPhone(phone) {
      if (/^1[3456789]\d{9}$/.test(phone)) {
        return true
      } else {
        return false
      }
    },
  },
  destroyed() {
    clearInterval(codeInterval)
  },
}
</script>
<style lang="scss" scoped>
.addchild_group {
  width: 638px;
  height: 836px;
  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;
    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: 0 auto;
      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 {
      margin: 0;
    }
    .getcode {
      flex-shrink: 0;
      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: 80px;
      display: block;
    }
  }
  .change-btn {
    color: #5789ff;
    font-size: 28px;
    text-align: center;
    text-decoration: underline;
    margin-top: 40px;
  }
}
::v-deep .van-search {
  background: transparent;
  padding: 0;
  width: 100%;
}
::v-deep .van-search__content {
  padding: 0;
}
.schoolBoxF {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}
</style>