<template>
  <div id="to-login">
    <el-dialog
      :title="title ? title : '提示'"
      :visible.sync="display"
      width="40%"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      v-if="display"
    >
      <el-row>
        <slot>
          <el-col :span="12" class="el-icon-s-platform" style="text-align:center;padding-bottom:1rem;zoom:1.5;"> </el-col>
          <el-col :span="12" class="el-icon-full-screen" style="text-align:center;padding-bottom:1rem;zoom:1.5;"> </el-col>
        </slot>
        <el-col :span="12">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="account">
              <el-col>
                <el-input placeholder="学号" prefix-icon="el-icon-user-solid" v-model="form.account"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item prop="passwd">
              <el-col>
                <el-input
                  placeholder="密码(首次登陆密码为身份证密码后六位)"
                  prefix-icon="el-icon-lock"
                  v-model="form.passwd"
                  show-password
                  @keyup.enter.native="toSubmit"
                >
                </el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <el-col :span="12" style="text-align:center;">
            <el-button type="primary" @click="toSubmit">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
          </el-col>
          <el-col :span="12" style="text-align:center;">
            <el-button @click="toClose">取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
          </el-col>
        </el-col>
        <el-col :span="12" style="text-align:center">
          <qrcode :qrcode="qrcode" @toReturn="toReturn"></qrcode>
        </el-col>
        <slot name="footer"></slot>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
const jwt = require('jsonwebtoken');
import { mapActions, mapState, mapMutations } from 'vuex';
import qrcode from '@/components/qrcode.vue';
export default {
  name: 'to-login',
  props: {
    title: null,
    display: { type: Boolean },
  },
  components: {
    qrcode,
  },
  data: () => ({
    form: {},
    qrcode: '',
    loginType: 0,
    rules: {
      account: [{ required: true, message: '请输入学号', trigger: 'blur' }],
      passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    },
  }),
  created() {
    this.initQrcode();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapMutations(['setUser']),
    ...mapActions(['createConnection', 'getWxtoken', 'userOperation']),
    async initQrcode() {
      let result = await this.createConnection();
      this.$set(this, `qrcode`, result);
    },
    async toReturn(msg) {
      let result = await this.getWxtoken(this.qrcode);
      this.submit(result, 1);
    },
    toSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submit(null, 0);
        }
        return false;
      });
    },
    async submit(wxtoken, loginType) {
      let data = JSON.parse(JSON.stringify(this.form));
      if (loginType === 0) {
        data.account = `${data.account}@999991`;
      } else {
        data = { wxtoken: wxtoken };
      }
      let result = await this.userOperation({ type: 'login', data: { loginType: loginType, info: data } });
      this.$message({
        type: `${result.errcode}` === '0' ? 'success' : 'error',
        message: `${result.errcode}` === '0' ? '登录成功' : 'result.errmsg',
      });
      if (`${result.errcode}` === '0') {
        sessionStorage.setItem('token', result.data);
        let info = jwt.decode(result.data);
        sessionStorage.setItem('user', JSON.stringify(info));
        window.location.href = `${window.location.href}`;
      }
    },
    toClose() {
      this.$emit('close');
    },
    // async wxLogin(wxtoken) {
    //   let result = await this.userOperation({ type: 'login', data: { loginType: '1', info: { wxtoken: wxtoken } } });
    //   if (`${result.errcode}` === '0') {
    //     let info = jwt.decode(result.data);
    //     sessionStorage.setItem('user', JSON.stringify(info));
    //     this.setUser(info);
    //     window.location.href = `${window.location.href}`;
    //   }
    // },
  },
};
</script>

<style lang="less" scoped></style>
