<template>
  <h-view class="public-style t-regiester">
    <h-header>
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">注册</div>
    </h-header>
    <h-content class="has-header">
      <!--<div class="user_name">
        <div class="user-icon"><img src="../assets/image/login/username@2x.png"/></div>
        <div class="user-name">用户名</div>
        <div class="user-input"><input type="text" placeholder="请输入用户名" v-model="user_name"/></div>
      </div>-->
      <div class="phone_number">
        <div class="phone-icon"><img src="../assets/image/login/cellphone@2x.png"/></div>
        <div class="number">手机号</div>
        <div class="input-box"><input type="number" placeholder="请输入手机号" v-model="phone_number"/></div>
        <div class="getVerify" :class="{'disable':showTimer}" @blur="checkPhone" @click="getPhoneCode"><span
          v-if="showTimer">{{timerCount}}</span>{{text}}
        </div>
      </div>
      <div class="user_name">
        <div class="user-icon"><img src="../assets/image/login/verification@2x.png"/></div>
        <div class="user-name">验证码</div>
        <div class="user-input"><input type="text" maxlength="6" placeholder="请输入验证码" v-model="verifiedCode"/>
          <img
            src="../assets/image/login/checked@2x.png" v-if="verifiedCodeFlag"/>
        </div>
      </div>
      <div class="user_name">
        <div class="user-icon"><img src="../assets/image/login/locked@2x.png"/></div>
        <div class="user-name">密&#12288;码</div>
        <div class="user-input"><input type="password" maxlength="12" placeholder="请输入至少6位密码"
                                       v-model="user_password" @blur="passwordCheck"/>
          <img
            src="../assets/image/login/checked@2x.png" v-if="passwordFlag"/>
        </div>
      </div>
      <div class="user_name">
        <div class="user-icon"><img src="../assets/image/login/locked@2x.png"/></div>
        <div class="user-name">确&#12288;认</div>
        <div class="user-input"><input type="password" maxlength="12" placeholder="请与密码保持一致" @blur="confirmCheck"
                                       v-model="confirm"/>
          <img
            src="../assets/image/login/checked@2x.png" v-if="confirmPassword"/>
        </div>
      </div>
      <div :class="{'submit':!agreeFlag,'selected':agreeFlag}" @click="submit">注册</div>
      <div class="potocol">
        <div class="img-box" v-if="!agreeFlag" @click="changeStatus()"><img
          src="../assets/image/login/unchecked@2x.png"/></div>
        <div class="img-box" v-if="agreeFlag" @click="changeStatus()"><img
          src="../assets/image/login/checked@2x.png"/></div>
        <div class="agreed">我已同意并阅读</div>
        <div class="clause" @click="goUserAgree">《车租易会员服务条款》</div>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  import hlsPopup from "../scripts/hlsPopup";

  var CryptoJS = require("crypto-js");

  export default {
    data() {
      return {

        user_name: '',
        phone_number: '',
        verifiedCode: '',
        user_password: '',
        confirm: '',

        phoneNumberFlag: false,
        verifiedCodeFlag: false,
        passwordFlag: false,
        confirmPassword: false,
        agreeFlag: false,

        captchaKey: '',
        phoneCodeTimeOut: false,
        timer: 60000,
        showTimer: false,
        timerCount: 60,
        text: '获取验证码'
      }
    },
    methods: {
      goUserAgree(){
        this.$router.push({
          name:"UserAgree"
        })
      },
      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.timerCount = vm.timer / 1000;
            }, vm.timer);
          }
          else {
            hlsPopup.showLongCenter('手机号不存在，请重新输入！');
          }
        }
      },
      passwordCheck() {
        let vm = this;
        let length = vm.user_password.length;
        if (length < 6 || length > 12) {
          hlsPopup.showLongBottom('密码长度6～12位之间')
        } else {
          vm.passwordFlag = true;
        }
      },
      confirmCheck() {
        let vm = this;
        let length = vm.confirm.length;
        if (length < 6 || length > 12) {
          hlsPopup.showLongBottom('密码长度6～12位之间')
        } else if (vm.confirm != vm.user_password) {
          hlsPopup.showLongBottom('两次输入的密码不一致，请从新输入')
        } else {
          vm.confirmPassword = true;
        }
      },
      changeStatus() {
        let vm = this;
        vm.agreeFlag = !vm.agreeFlag;
      },
      submit() {
        let vm =this;
        //vm.user_password = CryptoJS.MD5(vm.user_password).toString().toUpperCase();
        let md5password = CryptoJS.MD5(vm.user_password).toString().toUpperCase();
        if (!vm.phoneNumberFlag) {
          hlsPopup.showLongBottom('请输入手机号!')
        } else if (!vm.verifiedCodeFlag) {
          hlsPopup.showLongBottom('请输入验证码!')
        } else if (!vm.passwordFlag) {
          hlsPopup.showLongBottom('请输入密码!')
        } else if (!vm.confirmPassword) {
          hlsPopup.showLongBottom('请确认密码!')
        } else if (!vm.agreeFlag) {
          hlsPopup.showLongBottom('请同意《车租易会员服务条款》!')
        } else {
          let url = process.env.rootPath + '/captcha/do?captchaKey=' + vm.captchaKey + '&captchaCode=' + vm.verifiedCode + '&sysName=HLS_APP&apiName=tc_app_regiester';
          let params = {
            user_name: vm.phone_number,
            user_password: md5password,
            phone_number: vm.phone_number
          }
          hlsHttp.post(url, params).then(function (res) {
            if (res.result == 'S') {
              hlsPopup.showLongBottom('注册成功');
              window.localStorage.setItem('username', res.phone_number)
              window.localStorage.setItem('user_id', res.user_id)
              setTimeout(function () {
                vm.$router.push('login');
              }, 100)
            }

          })
        }
      },
      getVerifiedCode() {
        let vm = this;
        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);
            }

          }
        )
        /*post response {
          "Code": "OK",
            "Message": "OK",
            "sendNum": 641164
        }*/
      }
    },
    watch: {
      verifiedCode(value) {
        let vm = this;
        //console.log(value)
        if (value.length == 6) {
          vm.verifiedCodeFlag = false;
          if (vm.captchaKey.length == 0) {
            hlsPopup.showLongBottom('请先获取验证码')
          } else if (vm.phoneCodeTimeOut) {
            hlsPopup.showLongBottom('验证码已失效，请从新获取')
          } else {
            vm.verifiedCodeFlag = true;
          }

        }
      },
      user_password(value) {
        if (value.length > 12) {
          hlsPopup.showLongBottom('密码长度6～12位之间')
        }
      },
      confirm(value) {
        if (value.length > 12) {
          hlsPopup.showLongBottom('密码长度6～12位之间')
        }
      }
    },
    created() {
      let vm = this;
      let url = process.env.loginPath + 'appadmin';
      let param = {};
      //vm.hlsPopup.showLoading('请稍等');
      vm.$post(url, param).then(function (res) {
        window.localStorage.setItem('access_token', res.access_token);
      })
    }
  }
</script>

<style scoped lang="less">
  .t-regiester {
    .content {
      background-color: #f7f7f8;
      padding: 0;
      .phone_number {
        margin-top: 30px;
        padding: 2% 30px;
        width: 100%;
        background-color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        //justify-content: space-between;
        .number {
          color: #000000;
          letter-spacing: -0.83px;
          font-size: 26px;
          margin-right: 3%;
          padding: 0 3%;
          border-right: 1px solid #EFEFEF;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
        }
        .phone-icon {

          img {
            margin-top: 5px;
            width: 26px;
            height: 46px;
          }
        }
        .input-box {
          width: 50%;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;

          input {
            height: 100%;
            width: 100%;
            font-size: 26px;
            line-height: 32px;
            color: #000000;
            letter-spacing: -0.83px;
            border:none;
          }
          input::-webkit-input-placeholder {
            font-size: 26px;
            line-height: 32px;
            color: #C6C6CC;
            letter-spacing: -0.83px;
          }
        }
        .delete {
          img {
            margin-top: 10px;
            width: 24px;
            height: 24px;
          }
        }

        .getVerify {
          border-radius: 6px;
          background-color: @headerColor;
          font-size: 22px;
          padding: 15px 0;
          width: 25%;
          height: 100%;
          color: #FFFFFF;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content: center;
          -webkit-justify-content: center;
          text-align: center;
        }
        .disable {
          background-color: #DADADF;
        }

      }
      .user_name {
        margin-top: 2%;
        padding: 3% 30px;
        width: 100%;
        background-color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        .user-icon {
          img {
            width: 32px;
            height: 34px;
          }
        }
        .user-name {
          color: #000000;
          letter-spacing: -0.83px;
          font-size: 26px;
          margin-right: 3%;
          padding-right: 3%;
          padding-left: 2.5%;
          border-right: 1px solid #EFEFEF;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
        }
        .user-input {
          width: 75%;
          height: 3%;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          input {
            width: 100%;
            height: 100%;
            font-size: 26px;
            color: #000000;
            letter-spacing: -0.83px;
            line-height: 34px;
            float: left;
          }
          input::-webkit-input-placeholder {
            font-size: 26px;
            color: #C6C6CC;
            letter-spacing: -0.83px;
            line-height: 34px;
          }
          img {
            float: right;
          }
        }
      }
      .submit {
        background-color: #DADADF;
        border-radius: 6px;
        width: 88.3%;
        height: 90px;
        font-size: 32px;
        color: #FFFFFF;
        letter-spacing: 6px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        margin: 12% 40px 8% 40px;
      }
      .selected {
        background-color: @headerColor;
        border-radius: 6px;
        width: 88.3%;
        height: 90px;
        font-size: 32px;
        color: #FFFFFF;
        letter-spacing: 6px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        margin: 12% 40px 8% 40px;
      }
      .potocol {
        display: flex;
        display: -webkit-flex;
        .img-box {
          margin-left: 40px;
          margin-right: 10px;
          img {
            width: 28px;
            height: 28px;
          }
        }
        .agreed {
          font-size: 22px;
          color: #090909;
          line-height: 32px;
        }
        .clause {
          font-size: 22px;
          color: @headerColor;
          letter-spacing: 0.2px;
          margin-left: 10px;
          line-height: 32px;
        }
      }
    }
  }


</style>
