<template>
  <el-dialog title="賬號註冊"
             append-to-body
             :visible.sync="accountBox"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false"
             width="20%">
    <el-form :model="form" ref="form" label-width="80px">
      <el-form-item v-if="tenantMode" label="租戶編號">
        <el-input v-model="form.tenantId" placeholder="請輸入租戶編號"></el-input>
      </el-form-item>
      <el-form-item label="用戶姓名">
        <el-input v-model="form.name" placeholder="請輸入用戶姓名"></el-input>
      </el-form-item>
      <el-form-item label="賬號名稱">
        <el-input v-model="form.account" placeholder="請輸入賬號名稱"></el-input>
      </el-form-item>
      <el-form-item label="賬號密碼">
        <el-input v-model="form.password" placeholder="請輸入賬號密碼"></el-input>
      </el-form-item>
      <el-form-item label="確認密碼">
        <el-input v-model="form.password2" placeholder="請輸入確認密碼"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
              <el-button type="primary" :loading="loading" @click="handleRegister">確 定</el-button>
            </span>
  </el-dialog>
</template>

<script>
  import {mapGetters} from "vuex";
  import {validatenull} from "@/util/validate";
  import {registerGuest} from "@/api/user";
  import {getTopUrl} from "@/util/util";
  import {info} from "@/api/system/tenant";
  import {resetRouter} from "@/router/router";

  export default {
    name: "thirdRegister",
    data() {
      return {
        form: {
          tenantId: '',
          name: '',
          account: '',
          password: '',
          password2: '',
        },
        loading: false,
        tenantMode: true,
        accountBox: false,
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    created() {
      this.getTenant();
    },
    mounted() {
      // 若未登錄則彈出框進行綁定
      if (validatenull(this.userInfo.user_id) || this.userInfo.user_id < 0) {
        this.form.name = this.userInfo.user_name;
        this.form.account = this.userInfo.user_name;
        this.accountBox = true;
      }
    },
    methods: {
      handleRegister() {
        if (this.form.tenantId === '') {
          this.$message.warning("請先輸入租戶編號");
          return;
        }
        if (this.form.account === '') {
          this.$message.warning("請先輸入賬號名稱");
          return;
        }
        if (this.form.password === '' || this.form.password2 === '') {
          this.$message.warning("請先輸入密碼");
          return;
        }
        if (this.form.password !== this.form.password2) {
          this.$message.warning("兩次密碼輸入不壹致");
          return;
        }
        this.loading = true;
        registerGuest(this.form, this.userInfo.oauth_id).then(res => {
          this.loading = false;
          const data = res.data;
          if (data.success) {
            this.accountBox = false;
            this.$alert("註冊申請已提交,請耐心等待管理員通過!", '註冊提示').then(() => {
              this.$store.dispatch("LogOut").then(() => {
                resetRouter();
                this.$router.push({path: "/login"});
              });
            })
          } else {
            this.$message.error(data.msg || '提交失敗');
          }
        }, error => {
          window.console.log(error);
          this.loading = false;
        });
      },
      getTenant() {
        let domain = getTopUrl();
        // 臨時指定域名，方便測試
        //domain = "https://bladex.vip";
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.form.tenantId = data.data.tenantId;
            this.tenantMode = false;
          }
        })
      },
    },
  };
</script>
