<template>
  <div v-if="!loading">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <span style="color:red">首次登录需关联原账号手机号！</span>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleBind">
          <span v-if="!loading">确定</span>
        </el-button>

      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default {
  name: 'WxCode',
  props: {
    code: {
      type: String,
      default: undefined
    },
    openId: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      loginForm: {
        username: undefined,
        code: undefined,
        type: 2,
        openId: undefined
      },
      loading: false,
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }],
      }
    }
  },
  created() {

  },

  methods: {

    handleBind() {
      this.loginForm.code = this.code;
      this.loginForm.openId = this.openId
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch('WXLogin', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' }).catch(() => { });
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    }

  },


}
</script>