<template>
  <div>
    <headerlogin></headerlogin>
    <div class="loginBox">
      <h2 class="forgotTil">激活账号</h2>
      <div class="bzTab">
        <div class="siglist" style="width:85px">
          <div class="yuan" :class="(forgotPage==1 || forgotPage==2 || forgotPage==3 || forgotPage==4)?'current':''">1</div>
          <div>绑定手机号</div>
        </div>
        <div class="siglist les">
          <div class="line" :class="(forgotPage==2 || forgotPage==3 || forgotPage==4)?'current':''"></div>
        </div>
        <div class="siglist">
          <div class="yuan" :class="(forgotPage==2 || forgotPage==3 || forgotPage==4)?'current':''">2</div>
          <div>重设密码</div>
        </div>
        <div class="siglist les">
          <div class="line" :class="(forgotPage==3 || forgotPage==4)?'current':''"></div>
        </div>
        <div class="siglist" style="width:110px;">
          <div class="yuan" :class="(forgotPage==3 || forgotPage==4)?'current':''">3</div>
          <div>验证学校信息</div>
        </div>        
        <div class="siglist les">
          <div class="line" :class="forgotPage==4?'current':''"></div>
        </div>
        <div class="siglist">
          <div class="yuan" :class="forgotPage==4?'current':''">4</div>
          <div>激活结果</div>
        </div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 1">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm demoRuleForm">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" maxlength="11" type="number"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="token" style="position:relative">
            <div class="yzmBox" @click="yzmClick" v-if="yzmShow == true">点击获取验证码</div>
            <div class="yzmBox" v-else>{{timers}}秒</div>
            <el-input v-model="ruleForm.token" placeholder="请输入验证码"></el-input>
          </el-form-item>
        </el-form>
        <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" @click="nextClick('ruleForm')">下一步</el-button></div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 2">
        <el-form :model="ruleFormTwe" status-icon :rules="rulesTwe" ref="ruleFormTwe" class="demo-ruleForm demoRuleForm">
          <el-form-item label="设置新密码" prop="password">
            <el-tooltip class="item" effect="dark" content="密码必须包含字母(区分大小写)、数字、特殊字符！禁止使用0, o, O, i, I, l, L！" placement="right-start">
              <el-input v-model="ruleFormTwe.password" maxlength="12" placeholder="请输入6-12位密码"></el-input>
            </el-tooltip>            
          </el-form-item>
          <el-form-item label="再次输入" prop="newpassword">
            <el-input v-model="ruleFormTwe.newpassword" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" @click="nextTweClick('ruleFormTwe')">下一步</el-button></div>
      </div>      
      <div class="gjhqIpt" v-if="forgotPage == 3">
        <el-form :model="ruleFormThr" status-icon :rules="rulesThr" ref="ruleFormThr" class="demo-ruleForm demoRuleForm">
          <el-form-item label="学校编码" prop="schoolCode">
            <el-input v-model="ruleFormThr.schoolCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="学校名称" prop="schoolName">
            <div class="schoolTil" v-if="schoolNameShow == true">{{ ruleFormThr.schoolName }}<span @click="mediClick">修改</span></div>
            <el-input v-else v-model="ruleFormThr.schoolName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="学校类型" prop="schoolvalue">
            <el-select v-model="ruleFormThr.schoolvalue" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in schooloptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>       
          <el-form-item label="学校地区" prop="schoolAdress">
            <div class="schoolTil" v-if="schoolAdressShow == true">{{ ruleFormThr.schoolAdress }}<span @click="mediAdressClick">修改</span></div>
            <el-cascader v-else
              size="large" style="width:100%"
              :options="pcaTextArr"
              v-model="ruleFormThr.schoolAdress">
            </el-cascader>
          </el-form-item>
          <el-form-item label="学校地址" prop="schoolAdressXq">
            <div class="schoolTil" v-if="schoolAdressXqShow == true">{{ ruleFormThr.schoolAdressXq }}<span @click="mediAdressXqClick">修改</span></div>
            <el-input v-else v-model="ruleFormThr.schoolAdressXq" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="超级管理员姓名" prop="name">
            <el-input v-model="ruleFormThr.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" @click="nextThrClick('ruleFormThr')">下一步</el-button></div>
        <div style="height:50px;"></div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 4">
        <div class="chenggong" v-if="jhAcitveShow == true">
          <div class="jihuochenggong"><i class="jhcgIcon000"></i>已成功连接地方公安，请注意自己的上报时间。及时上报。</div>
          <div class="clear"></div>
          <div class="chenggongIcon"></div>
          <div class="cgTile">激活成功</div>
          <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" style="padding:0 50px;" @click="goLoginClick">去登录</el-button></div>
        </div>
        <div class="chenggong" v-else>
          <div class="jihuochenggong1"><i class="jhcgIcon001"></i>连接失败，请检查网络连接状态</div>
          <div class="clear"></div>
          <div class="shibaiIcon"></div>
          <div class="cgTiles">激活失败</div>
          <p>网络无连接，请检查网络连接是否通畅。</p>
          <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" style="padding:0 50px;" @click="resetClick">重 试</el-button></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { activatePost, activatesendphonecode, schooltypelist } from '../../axios/api'
import headerlogin from './headerlogin.vue'
import { pcaTextArr } from 'element-china-area-data'
export default {
  name: 'forgotpage',
  components: { headerlogin },
  data () {
    return {
      newtime: '',
      ruleForm: {
        phone: '',
        token: ''
      },
      ruleFormTwe: {
        password: '',
        newpassword: ''
      },
      schoolNameShow: false,
      schoolAdressShow: false,
      schoolAdressXqShow: false,
      ruleFormThr: {
        schoolCode: '',
        schoolName: '',
        schoolAdress: [],
        schoolAdressXq: '',
        schoolvalue: '',
        name: ''
      },
      schooloptions: '',
      rules: {
        phone: [
          { required: true, message: '请输入手机号!', trigger: 'blur' }
        ],
        token: [
          { required: true, message: '请输入验证码!', trigger: 'blur' }
        ]
      },
      rulesTwe: {
        password: [
          { required: true, message: '请输入密码!', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请再次输入密码!', trigger: 'blur' }
        ]
      },
      rulesThr: {
        schoolCode: [
          { required: true, message: '请输入学校编码!', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入超级管理员姓名!', trigger: 'blur' }
        ],
        schoolName: [
          { required: true, message: '请输入学校名称!', trigger: 'blur' }
        ],
        schoolvalue: [
          { required: true, message: '请选择学校类型!', trigger: 'blur' }
        ],
        schoolAdress: [
          { required: true, message: '请输入省市区!', trigger: 'blur' }
        ],
        schoolAdressXq: [
          { required: true, message: '请输入学校地址!', trigger: 'blur' }
        ]
      },
      forgotPage: 1,
      timers: 60,
      yzmShow: true,
      jhAcitveShow: true,
      pcaTextArr,
      selectedOptions: []
    }
  },
  created () {
    let that = this
    schooltypelist().then(res => {
      if (res.code == 10000) {
        localStorage.setItem('UserToken', 'sss')
        that.schooloptions = res.data
      } else {
        localStorage.setItem('UserToken', 'sss')
        that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      localStorage.setItem('UserToken', 'sss')
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
  },
  methods: {
    logotabCLick (indx) {
      this.$router.push({name: 'register'})
    },
    nextClick (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let regNumber = /^\d{11}$/
          let obj = that.ruleForm
          if (regNumber.test(obj.phone) == false) {
            that.$messageOne({message: '账户必须是手机号！', type: 'error', duration: 3000})
            return false
          }
          that.forgotPage = 2
        }
      })
    },
    nextTweClick  (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = that.ruleFormTwe
          if (obj.password != obj.newpassword) {
            that.$messageOne({message: '两个密码必须一直！', type: 'error', duration: 3000})
            return false
          }
          let lent = obj.password.length
          if (lent < 6) {
            that.$messageOne({message: '密码必须大于6位小于12位！', type: 'error', duration: 3000})
            return false
          }
          const regex = /^(?=.*[a-hj-km-np-z])(?=.*[A-HJ-KM-NP-Z])(?=.*[1-9])(?=.*[@~$!%*?&#^])[A-HJ-KM-NP-Za-hj-km-np-z1-9@~$!%*?&#^]{6,12}$/
          if (regex.test(obj.password)) {
          } else {
            that.$messageOne({message: '密码必须包含字母(区分大小写)、数字、特殊字符！禁止使用0, o, O, i, I, l, L', type: 'error', duration: 3000})
            return false
          }
          that.forgotPage = 3
        }
      })
    },
    nextThrClick  (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {          
          that.forgotPage = 4
          let obj = {}
          obj.name = that.ruleFormThr.schoolName
          obj.code = that.ruleFormThr.schoolCode
          obj.address = that.ruleFormThr.schoolAdressXq
          obj.account = that.ruleForm.phone
          obj.password = that.ruleFormTwe.password
          obj.username = that.ruleFormThr.name
          obj.token = that.ruleForm.token
          obj.province = that.ruleFormThr.schoolAdress[0]
          obj.city = that.ruleFormThr.schoolAdress[1]
          obj.area = that.ruleFormThr.schoolAdress[2]
          obj.type = that.ruleFormThr.schoolvalue
          activatePost(obj).then(res => {
            if (res.code == 10000) {
              that.forgotPage = 4
              localStorage.setItem('UserToken', 'sss')
              that.jhAcitveShow = true
            } else {
              localStorage.setItem('UserToken', 'sss')
              that.jhAcitveShow = false
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
            }
          }).catch(error => {
            localStorage.setItem('UserToken', 'sss')
            that.$messageOne({message: error, type: 'error', duration: 3000})
          })
        }
      })
    },
    mediClick () {
      this.schoolNameShow = false
    },
    mediAdressClick () {
      this.schoolAdressShow = false
    },
    mediAdressXqClick () {
      this.schoolAdressXqShow = false
    },
    goLoginClick () {
      localStorage.setItem('UserToken', '')
      this.$router.push({name: 'Login'})
    },
    resetClick () {
      this.forgotPage = 1
    },
    djsTime () {
      let that = this
      const interval = setInterval(() => {
        that.timers--
        if (that.timers == 0) {
          clearInterval(interval) // 清除计时器
          that.yzmShow = true
          that.timers = 60 // 重置倒计时时长，根据需要可以省略此行，如果每次点击都应该重新开始倒计时
        }
      }, 1000) // 每秒更新一次倒计时
    },
    yzmClick () {
      let that = this
      if (that.ruleForm.phone == '') {
        that.$messageOne({message: '手机号不能为空！', type: 'error', duration: 3000})
        return
      }
      let obj = {}
      obj.phone = that.ruleForm.phone
      activatesendphonecode(obj).then(res => {
        if (res.code == 10000) {
          that.yzmShow = false
          that.djsTime()
        } else if (res.code == 69002) {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log(error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }
  }
}
</script>
<style scoped>
.loginBox{margin:130px auto 0;width:700px;}
.bzTab{height:70px;margin-bottom:80px;text-align:center;font-size: 16px;color: #161617;line-height: 22px;text-align: center;}
.bzTab .siglist{width:70px;display:inline-block;}
.bzTab .les{margin:0 20px;}
.bzTab .siglist .yuan{display:inline-block;width: 40px;height: 40px;background: #CCCCCC;line-height:40px;text-align:center;color:#fff;font-weight: bold;font-size: 20px;border-radius:50%;margin-bottom:8px;}
.bzTab .siglist .line{width: 100%;height: 3px;background: #CCCCCC;display:inline-block;position:relative;top:-42px;}
.bzTab .siglist .yuan.current,.bzTab .siglist .line.current{background-color:#0071DB;}
.demoRuleForm >>> .el-form-item__label{font-weight: bold;font-size: 16px;color: #161617;line-height: 24px;margin-bottom:8px;}
.demoRuleForm >>> .el-form-item{margin-bottom:24px;}
.noPassword{text-align:right;color:#5C9AEF;}
.loginTips{text-align:center;margin-bottom:10px;}
.yzmBox{position:absolute;bottom:5px;height:30px;line-height:30px;padding:0 20px;right:0;z-index:999;cursor:pointer;color:#0071DB;}
.forgotTil{height: 50px;font-weight: bold;font-size: 36px;color: #161617;line-height: 50px;text-align: center;font-style: normal;margin-bottom:40px;}
.chenggong{text-align:center;}
.chenggong .cgTile{height:32px;font-size: 24px;color: #161617;line-height: 32px;margin:12px 0 24px;}
.chenggong .cgTiles{height:32px;font-size: 24px;color: #161617;line-height: 32px;margin:12px 0;}
.chenggong p{font-size: 14px;color: #808080;line-height: 22px;text-align: center;margin-bottom:24px;}
.chenggongIcon{background:url('../../assets/icon26.png') no-repeat 0 0/100%;display:inline-block;width:54px;height:54px;}
.shibaiIcon{background:url('../../assets/icon27.png') no-repeat 0 0/100%;display:inline-block;width:54px;height:54px;}
.schoolTil{font-weight: 400;font-size: 16px;color: #161617;line-height: 24px;padding-left:10px;}
.schoolTil span{color:#5C9AEF;padding-left:20px;cursor:pointer;}
.jihuochenggong{height: 40px;background: #F0F9EB;border-radius: 4px;border: 1px solid #D1EDC4;margin-bottom:28px;line-height:40px;padding:0 17px;font-size: 14px;color: #67C23A;text-align:left;}
.jihuochenggong .jhcgIcon000{background:url('../../assets/icon7.png') no-repeat 0 0/100%;width:16px;height:16px;margin-right:4px;float:left;display:block;position:relative;top:12px;}
.jihuochenggong1{height: 40px;background: #FEF0F0;border-radius: 4px;border: 1px solid #FCD3D3;margin-bottom:28px;line-height:40px;padding:0 17px;font-size: 14px;color: #F56C6C;text-align:left;}
.jihuochenggong .jhcgIcon001{background:url('../../assets/icon8.png') no-repeat 0 0/100%;width:16px;height:16px;margin-right:4px;float:left;display:block;position:relative;top:12px;}
</style>
