<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('register')">立即注册</span></div>
      </header>

      <!--  输入内容  -->
      <section class="login-section">
        <aside
            v-for="(item,index) in inputData"
            :key="'login-input-'+index"
            class="login-input rowACenter"
        >
          <div class="flex-1 overflow">
            <input :type="item.type || 'text'"
                   :placeholder="item.placeholder"
                   class="screen login-input-target"
                   v-model="item.value"
            />
          </div>
        </aside>
      </section>

      <!--  按钮  -->
      <v-button class="login-button"
        @submit-verify="submitVerify"
        @submit="submit"
        @change-success="loginSuccess"
        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 verification from '$utils/verification';

import { InstructionsMessageType } from '$utils/request';

import user from '$config/user';
import popup from "$utils/tool/popup";
import socket from "$utils/socket";

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

  inject:['openModal'],

  methods:{
    submitVerify:function (callback) {
      return verification.verificationPromise(this.inputData,true).then(callback);
    },
    submit:function (obj) {
      return this.$request({
        url:'login/user_login',
        data:obj.data,
        message: InstructionsMessageType.other
      }).then((data)=>{

        if (data.isSuccess) {

          user.user = data.data;
          socket.install(user.user);
          this.$request.getUserInfo().then((resultData)=>{
             this.$store.commit('setUserInfo',Object.assign({},data.data,resultData));

             popup.$toast(data.msg);
             return this.$emit('close');
          }).catch(obj.fail);
        } else {
          return obj.none();
        }

      }).catch(obj.fail);
    },
    setLoginParams:function (data){

      if (data) {
        this.inputData.map((item)=>{
          if (item.value !== data[item.key]) {
            item.value = data[item.key];
          }
        });
      }

    },

    // loginSuccess:function () {
    //   return this.$emit('close');
    // }
  },

  components:{
    icon,
    vButton
  }
}
</script>

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