<template>
  <h-view id="register" class="public-style">
    <h-content>
      <div class="right-logo">
        <img src="@/assets/login/return.png" @click="returnLogin">
        <img src="@/assets/login/right.png" >
      </div>
      <div class="box">
        <div class="box-content">
          <img class="register-title" src="../assets/login/reg-logo.png" >
          <div class="reg-item">
            <img src="../assets/login/reg-user.png" class="left-icon" >
            <input v-model="phone_number" placeholder="请输入手机号码" >
            <img
              v-if="phone_number"
              class="right-icon"
              src="@/assets/login/reg-de.png"
              @click="clearAccount"
            >
          </div>
          <div class="reg-item">
            <img src="../assets/login/check.png" class="left-icon" >
            <input v-model="verifiedCode" type="text" placeholder="请填写验证码" >
            <div class="verified-code">
              <div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
              <span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
            </div>
          </div>
          <div class="reg-item">
            <img src="../assets/login/pass.png" class="left-icon" >
            <input
              v-model="user_password"
              :type="pwdType"
              placeholder="请输入6~20位密码"
              maxlength="20"
              @blur="passwordCheck"
            >
            <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" >
          </div>
          <div class="reg-item">
            <img src="../assets/login/pass.png" class="left-icon" >
            <input v-model="confirm" :type="pwdType" placeholder="请重新输入密码" @blur="confirmCheck" >
            <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" >
          </div>
          <div class="button submit" @click="submit">注册</div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>
var CryptoJS = require('crypto-js')
export default {
  data () {
    return {
      pwdType: 'password', // 密码类型
      openEye: require('@/assets/login/passNoShow.png'), // 图片地址
      phone_number: '',
      verifiedCode: '',
      user_password: '',
      confirm: '',

      phoneNumberFlag: false,
      verifiedCodeFlag: false,
      passwordFlag: false,
      confirmPassword: false,
      captchaKey: '123456',
      phoneCodeTimeOut: false,
      timer: 120000,
      showTimer: false,
      timerCount: 120,
      text: '获取验证码',
    }
  },
  watch: {
    verifiedCode (value) {
      let vm = this
      if (value.length === 6) {
        vm.verifiedCodeFlag = false
        if (vm.captchaKey.length === 0) {
          hlsPopup.showLongCenter('请先获取验证码')
        } else if (vm.phoneCodeTimeOut) {
          hlsPopup.showLongCenter('验证码已失效,请从新获取')
        } else {
          vm.verifiedCodeFlag = true
        }
      }
    },
    user_password (value) {
      if (value.length > 20) {
        hlsPopup.showLongCenter('密码长度6~20位之间')
      }
    },
    confirm (value) {
      if (value.length > 20) {
        hlsPopup.showLongCenter('密码长度6~20位之间')
      }
    },
  },
  created () {
    let vm = this
    let url = process.env.loginPath + 'admin'
    let param = {}
    vm.$post(url, param).then(function (res) {
      window.localStorage.setItem('access_token', res.access_token)
    })
  },
  methods: {
    clearAccount: function () {
      this.phone_number = ''
      this.verifiedCode = ''
      this.user_password = ''
      this.confirm = ''
    },
    changeType () {
      this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
      this.openEye =
        this.pwdType === 'password'
          ? require('@/assets/login/passNoShow.png')
          : require('@/assets/login/passShow.png')
    },
    checkPhone () {
      let vm = this
      vm.phoneNumberFlag = false
      if (
        hlsUtil.phoneNumber(vm.phone_number) ||
        hlsUtil.phoneNumber86(vm.phone_number)
      ) {
        vm.phoneNumberFlag = true
      }
    },
    getPhoneCode () {
      let vm = this
      if (!vm.showTimer) {
        if (
          hlsUtil.phoneNumber(vm.phone_number) ||
          hlsUtil.phoneNumber86(vm.phone_number)
        ) {
          vm.phoneNumberFlag = true
          vm.getVerifiedCode()
          vm.showTimer = true
          vm.text = '秒后失效'
          let counter = setInterval(function () {
            if (vm.timerCount >= 0) {
              vm.timerCount = vm.timerCount - 1
            }
          }, 1000)
          setTimeout(function () {
            vm.text = '获取验证码'
            vm.showTimer = false
            clearInterval(counter)
            vm.showTimer = false
            vm.captchaKey = ('000000' + Math.floor(Math.random() * 999999)).slice(-6)
            hlsPopup.showLongCenter('验证码失效,请重新获取')
            vm.timerCount = vm.timer / 1000
          }, vm.timer)
        } else {
          hlsPopup.showLongCenter('手机号不存在,请重新输入!')
        }
      }
    },
    passwordCheck () {
      let vm = this
      let length = vm.user_password.length
      if (length < 6 || length > 20) {
        hlsPopup.showLongCenter('密码长度6~20位之间')
      } else {
        vm.passwordFlag = true
      }
    },
    confirmCheck () {
      let vm = this
      let length = vm.confirm.length
      if (length < 6 || length > 20) {
        hlsPopup.showLongCenter('密码长度6~20位之间')
      } else if (vm.confirm !== vm.user_password) {
        hlsPopup.showLongCenter('两次输入的密码不一致,请从新输入')
      } else {
        vm.confirmPassword = true
      }
    },
    submit () {
      let vm = this
      if (!vm.phoneNumberFlag) {
        hlsPopup.showLongCenter('请输入手机号!')
      } else if (vm.verifiedCode !== vm.captchaKey) {
        hlsPopup.showLongCenter('验证码错误!')
      } else if (!vm.passwordFlag) {
        hlsPopup.showLongCenter('请输入密码!')
      } else if (!vm.confirmPassword) {
        hlsPopup.showLongCenter('请确认密码!')
      } else {
        let url = process.env.basePath + 'register'
        let md5passwprd = CryptoJS.MD5(vm.user_password)
          .toString()
          .toUpperCase()
        let params = {
          master: {
            phone: vm.phone_number,
            password: md5passwprd,
          },
        }
        hlsHttp.post(url, params).then(function (res) {
          if (res.result === 'S') {
            hlsPopup.showLongCenter('注册成功')
            setTimeout(function () {
              vm.$router.push('login')
            }, 100)
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    returnLogin () {
      this.$router.go(-1)
    },
    getVerifiedCode () {
      let vm = this
      // hlsPopup.showLongCenter('测试验证码为123456')
      let url = process.env.basePath + 'sms_verify_post'
      let signcode = ('000000' + Math.floor(Math.random() * 999999)).slice(-6)
      vm.captchaKey = signcode
      let param = {
        'info': {
          'phone': vm.phone_number,
          'signcode': signcode,
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('验证码已发送')
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
      /* let url = process.env.rootPath + '/aliyun/sms'
          let params = {
            phoneNumber: vm.phone_number,
            signName: '车租易',
            templateCode: 'SMS_154585462',
          }
          hlsHttp.post(url, params).then(function (res) {
            if (res.code == 'OK') {
              vm.captchaKey = res.captchaKey
              vm.phoneCodeTimeOut = false
              setTimeout(function () {
                vm.captchaKey = ''
                vm.phoneCodeTimeOut = true
              }, 300000)
              hlsPopup.showLongBottom('验证码发送成功!')
            } else {
              hlsPopup.showLongBottom(res.message)
            }
          }
          ) */
    },
  },
}
</script>

<style lang="less">
@import "../styles/mixin";
@import "../styles/vue-1px";

#register {
  .content {
    background: url("../assets/login/register.png");
    background-size: 100% 100%;
  }
  .box {
    width: 327px;
    height: 512px;
    margin: 0 auto;
    margin-top:80px;
    background: #1d3fff;
    border-radius: 8px;
    .box-content {
      width: 279px;
      margin: 0 auto;
      .register-title {
        width: 156px;
      }
      .reg-item {
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 30px;
        line-height: 30px;
        img {
          width: 28px;
          height: 28px;
        }
        .left-icon {
          position: absolute;
        }
        .right-icon {
          width: 24px;
          height: 24px;
          position: absolute;
          right: 0px;
          top: 5px;
        }
        .verified-code {
          position: absolute;
          right: 0px;
          top: 0px;
          .verified-code-box {
            padding-left: 12px;
            border-left: 1px solid #ffffff;
            color: #fff;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            line-height: 30px;
          }
          .verified-code-des {
            font-size: 10px;
            color: #fff;
          }
        }
        input {
          width: 100%;
          text-indent: 30px;
          background-color: #1d3fff;
          font-family: PingFangSC-Regular;
          padding-bottom: 8px;
          font-size: 14px;
          color: #ffffff;
          line-height: 30px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        }
        input::placeholder {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }
        input:focus {
          border-bottom: 1px solid #fff;
        }
      }
    }
  }
  .right-logo {
        width: 327px;
margin: 0 auto;
margin-top:10%;
    img:last-child{
float: right;
    width: 50px;
    }
  img:first-child{
float:left;
    width: 20px;
    }
    // img {
    //   width: 50px;
    // }
  }

  .register-title {
    margin-top: 16%;
    // margin-left: 10%;

    img {
      width: 180px;
    }
  }

  .hls-list-item {
    width: 90%;
    margin-left: 8%;
    margin-top: 6%;
    background: #1d3fff;
  }

  .hls-item .contents {
    //.setBottomLine(rgba(29,63,255,0.25))
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }

  .hls-item .contents .add-name .left-icon {
    width: 26px;
  }

  .hls-item .contents .add-content input {
    text-align: left;
    background-color: #1d3fff;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
  }
  .hls-item .contents .add-content input::placeholder {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
  }
  .add-content {
    .right-icon {
      width: 14px;
    }
  }

  .submit {
    background: #ffffff;
    border-radius: 4px;
    color: @headerColor;
    width: 279px;
    height: 40px;
    margin-top: 50px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    &.activated {
      opacity: 0.8;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
  }
  .return {
    opacity: 1;
    background: #fff;
    border-radius: 8px 0 0 8px;
    height: 50px;
    margin: 0 0 6% 12%;
    font-size: 16px;
    color: #000000;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    &.activated {
      opacity: 0.8;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
  }
}
</style>