<template>
  <aside class="screen overflow">
    <div class="login-icon-container overflow">
      <div @click="$emit('close')" class="cursor-pointer login-close">
        <icon type="close" class="login-close-icon"></icon>
      </div>
    </div>

    <article class="login-content-padding">
      <!--  标题内容介绍  -->
      <header class="login-header">
        <div class="login-header-title">欢迎注册</div>
        <div class="login-header-info">已有账号？<span @click="openModal('login')">立即登录</span></div>
      </header>


      <!--  输入内容  -->
      <section class="login-section register-section">
        <aside
            v-for="(item,index) in inputData"
            :key="'login-input-'+index"
            class="login-input rowACenter"
        >
          <div class="flex-1 overflow">
            <input :type="item.value ?  item.type : '' || 'text'"
                   :placeholder="item.placeholder"
                   class="screen login-input-target"
                   v-model="item.value"
                   autocomplete="off"
                   disableautocomplete
            />
          </div>
          <div v-if="item.code"
               class="login-code cursor-pointer"
               :class="{
                    'button-active' : !timeFormat,
                    'login-code-disabled': timeFormat
                   }"
               @click="triggerTimeDate(item,inputData)"
          >{{ timeFormat || timeConfig.default }}</div>
        </aside>
      </section>

      <!--  按钮  -->
      <v-button class="login-button register-button"
          @submit-verify="submitVerify"
          @submit="submit"
          success-text="注册成功"
      >同意协议并注册</v-button>

      <!--  协议  -->
      <div class="login-agreement">已阅读并同意以下协议<span>《用户协议》</span>和<span>《隐私政策》</span></div>

    </article>


  </aside>
</template>

<script>
import {
  icon,
  vButton
} from '$components';
import inputData from '../data/input';
import mixins from '../mixins';
import verification from "$utils/verification";
import {InstructionsMessageType} from "$utils/request";

export default {
  name: "register",
  data(){
    return {
      inputData: inputData()
    }
  },

  inject:['openModal','setLoginParams'],

  methods:{
    submitVerify:function (callback) {
      return verification.verificationPromise(this.inputData,true).then(callback);
    },
    submit:function (obj) {

      this.storageData = obj.data;

      return this.$request({
        url:'login/user_reg',
        data:obj.data,
        message: true
      }).then((data)=>{

        if (data.isSuccess) {
          this.storageData && this.setLoginParams(this.storageData);

          // 跳转 login 同时释放自身
          return this.openModal('login',false);
        }

        return obj.none();
      }).catch(obj.fail);
    },
    //跳转登录
    toLogin(){

      this.storageData && this.setLoginParams(this.storageData);

      // 跳转 login 同时释放自身
      return this.openModal('login',false);
    }
  },
  components:{
    icon,
    vButton
  },
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>