<!-- -->
<template>
  <div class="login">
    <el-tabs v-model="activeName" class="login-box">
      <el-tab-pane label="账号登录" name="account">
        <el-form
          :model="accountForm"
          :label-position="labelPosition"
          :rules="accountRules"
          ref="accountForm"
        >
          <el-form-item
            label="账号"
            :label-width="formLabelWidth"
            prop="account"
          >
            <el-input
              v-model="accountForm.account"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd">
            <el-input
              v-model="accountForm.pwd"
              autocomplete="off"
              type="password"
              clearable
              show-password
            ></el-input>
            <div class="register">
              <router-link to="/register" @click.native="closeDialog">
                没有账号？去注册
              </router-link>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机号登录" name="phoneNumber">
        <el-form
          :model="phoneForm"
          label-position="labelPosition"
          :rules="phoneRules"
          ref="phoneForm"
        >
          <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="phoneNumber"
          >
            <el-input
              v-model="phoneForm.phoneNumber"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="验证码"
            :label-width="formLabelWidth"
            prop="captcha"
          >
            <el-input
              v-model="phoneForm.captcha"
              autocomplete="off"
              style="width: 46%; margin-right: 8px"
              clearable
            ></el-input>
            <el-button :disabled="isDisabled" @click.native="handleSend">{{
              sendButtonText
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="handleSubmitLogin">登 陆</el-button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      accountForm: {
        account: "",
        pwd: "",
      },
      phoneForm: {
        phoneNumber: "",
        captcha: "",
      },
      accountRules: {
        account: [{ message: "请输入账号", required: true }],
        pwd: [{ message: "请输入密码", required: true }],
      },
      phoneRules: {
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
        captcha: [{ message: "请输入验证码", required: true }],
      },
      formLabelWidth: "70px",
      labelPosition: "right",
      activeName: "account",
      isDisabled: true,
      sendButtonText: "发送验证码",
      second: 60,
    };
  },
  watch: {
    "phoneForm.phoneNumber": {
      handler: function (value) {
        this.$refs["phoneForm"].validateField("phoneNumber", (errorMessage) => {
          let valid = errorMessage == "";
          if (valid) {
            this.isDisabled = false;
          } else {
            this.isDisabled = true;
          }
        });
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    handleClickLogin() {
      this.loginDialogVisible = true;
    },
    // 登录提交
    handleSubmitLogin() {
      if (this.activeName == "account") {
        this.$refs["accountForm"].validate((isTrue) => {
          if (isTrue) {
            if (this.accountForm.account) {
              var params = {
                userName: this.accountForm.account,
                pwd: this.accountForm.pwd,
              };
              this.$store
                .dispatch("user/login", params)
                .then(() => {
                  this.$message.success("登录成功！");
                  var redirect = this.$route.query.redirect;
                  this.$router.push({
                    path: redirect || "/",
                  });
                })
                .catch((err) => {
                  this.$message.error(err);
                  console.log(err);
                });
            }
          }
        });
      } else {
        this.$refs["phoneForm"].validate((isTrue) => {
          if (isTrue) {
            //  TODO:调用登录接口
            this.$message.info("需调用登录接口");
            this.closeDialog();
          }
        });
      }
    },
    // 点击发送验证码
    handleSend() {
      this.isDisabled = true;
      this.second = 60;
      var timer = setInterval(() => {
        if (this.second < 1) {
          this.isDisabled = false;
          clearInterval(timer);
          timer = null;
          this.sendButtonText = "发送验证码";
        } else {
          this.second--;
          this.sendButtonText = `${this.second}秒后重新发送`;
        }
      }, 1 * 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 500px;
  margin: 50px auto;
  .login-box {
    width: 500px;
    margin: auto;
  }
}
.register {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
