<template>
  <h-view id="register" class="public-style">
    <h-content>
      <div class="right-logo">
        <img src="@/assets/login/return.png" @click="returnLogin">
      </div>
      <div class="box">
        <div class="welcome">
          <h2>欢迎注册！</h2>
        </div>
        <div class="register-content">
          <div class="reg-item">
            <img src="../assets/login/phone.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@3x.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/passwordConfirm.png" class="left-icon">
            <input
              v-model="user_password"
              :type="pwdType"
              placeholder="请输入6~20位非纯数字密码"
              maxlength="20"
              oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"

            >
            <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType">
          </div>
          <div class="reg-item">
            <img src="../assets/login/passwordConfirm.png" class="left-icon">
            <input
              v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
              placeholder="请重新输入密码"
            >
            <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType">
          </div>

        </div>
        <div class="register-btn">
          <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 + 'appadmin'
    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 = '123456'
            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 if (new RegExp('^[0-9]*$').test(vm.user_password)) {
      //   hlsPopup.showLongCenter('密码不能全为数字')
      // }
      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
      }
    },
    async submit () {
      let vm = this
      if (!vm.phoneNumberFlag) {
        hlsPopup.showLongCenter('请输入手机号!')
      } else if (vm.verifiedCode !== vm.captchaKey) {
        hlsPopup.showLongCenter('验证码错误!')
      } else if (!vm.user_password) {
        hlsPopup.showLongCenter('请输入密码!')
      } else if (!vm.confirm) {
        hlsPopup.showLongCenter('请确认密码!')
      } else {
        await vm.passwordCheck()
        await vm.confirmCheck()
        if (vm.passwordFlag && vm.confirmPassword) {
          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 = '123456'
      // vm.captchaKey = signcode
      // let param = {
      //   '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.return.description)
      //   }
      // })
    },
  },
}
</script>

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

  #register {
    .content {
      background: url("../assets/login/register-back@3x.png") no-repeat;
      background-size: 100% 100%;
    }

    .box {
      width: 100%;
      height: auto;
      padding-top: 35%;

      .welcome {
        //margin-top: 35%;
        h2 {
          margin-left: 10%;
          font-family: AlibabaPuHuiTi_2_85_Bold;
          font-size: 27px;
          color: @theme-color;;
          font-weight: 700;
        }
      }

      .register-content {
        width: 87%;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
        border-radius: 10px;
        padding: 20px 24px 30px 24px;
        margin-top: 60px;
        .reg-item {
          position: relative;
          width: 100%;
          height: 40px;
          margin-top: 30px;
          line-height: 30px;
          &:first-child {
            margin-top: 6px;
          }
          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: @theme-color;;
              font-size: 14px;
              line-height: 30px;
            }

            .verified-code-des {
              font-size: 10px;
              color: #fff;
            }
          }

          input {
            width: 100%;
            text-indent: 30px;
            padding-bottom: 8px;
            font-size: 14px;
            line-height: 30px;
            border-bottom: 1px solid rgba(226,226,226,1);
          }

          input:focus {
            border-bottom: 1px solid #1d3fff;
          }
          input::-webkit-input-placeholder {
            font-size: 14px;
            color: rgba(75, 74, 75, 0.4);
          }
        }
      }
    }

    .right-logo {
      width: 327px;
      margin: 0 auto;
      margin-top: 10%;

      img:last-child {
        float: right;
        width: 50px;
      }

      img:first-child {
        float: left;
        width: 20px;
      }
    }

    .register-btn{
      margin-top: 30px;
      display: flex;
      justify-content: center;
      .submit {
        color: #fff;
        background: @theme-color;
        height: 44px;
        border-radius: 50px;
        width: 70%;
        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>