<template>
  <a-modal :title="title"
           :visible="value"
           :confirm-loading="confirmLoading"
           @ok="loginevent"
           @cancel="handleCancel">
    <a-form :form="loginform">
      <a-form-item label="用户名"
                   :label-col="formItemLayout.labelCol"
                   :wrapper-col="formItemLayout.wrapperCol">
        <a-input class="input"
                 size="large"
                 type="text"
                 autocomplete="false"
                 placeholder="请输入用户名"
                 v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change' }
                ]"
                 @click="()=>isSome=false">
        </a-input>
      </a-form-item>
      <a-form-item label="密码"
                   :label-col="formItemLayout.labelCol"
                   :wrapper-col="formItemLayout.wrapperCol">
        <a-input class="input"
                 size="large"
                 type="password"
                 autocomplete="false"
                 placeholder="请输入密码"
                 v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'change' }
                ]"
                 @click="()=>isSome=false">
        </a-input>
      </a-form-item>
    </a-form>
    <p-alert v-show="isSome"
             type="error"
             message="与当前登录的账号相同，请换一个账号登录"
             banner />
  </a-modal>
</template>

<script>
import axios from "axios";
import { login } from "@/api/login";

export default {

  props: {
    title: {
      type: String,
      default: '登录'
    },
    value: {
      type: Boolean,
      default: false
    },
    isSupervisedData: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      confirmLoading: false,
      loginform: this.$form.createForm(this),
      refsss: null,
      isSome: false,
    }
  },

  methods: {

    loginevent() {
      this.loginform.validateFields((err, values) => {
        if (err) {
          return;
        }
        this.confirmLoading = true;
        login(values).then(res => {
          // this.$message.success('操作成功')
          this.getInfo(res.data.token);
        }).catch(error => {
          this.$message.error('登录失败')
          this.confirmLoading = false
        })
      })
    },

    handleCancel() {
      this.isSome = false;
      this.$emit('input', false);
    },

    getInfo(token) {
      axios.get('/api/user/info', {
        headers: {
          Authorization: 'Bearer ' + token
        }
      }).then(res => {
        this.confirmLoading = false
        if (this.$store.getters.userInfo.userId == res.data.data.userId) {
          this.isSome = true;
        } else {
          this.$emit('onLogined', res.data.data);
          this.loginform.resetFields()
          this.handleCancel();
        }
      });
    },

  }
}
</script>

<style></style>
