<template>
  <div class="login-container animate__animated" :class="[animateClass]">
    <div class="login-header flex">
      <div
        @click="checkType('account')"
        :class="loginType == 'account' && 'on'"
      >
        账号密码登录
      </div>
      <div @click="checkType('phone')" :class="loginType == 'phone' && 'on'">
        手机验证码登录
      </div>
    </div>
    <div class="login-body">
      <!-- 账号密码登录 -->
      <div class="account-login-container" v-if="loginType == 'account'">
        <a-form-model
          ref="accountLoginForm"
          :model="accountLoginForm"
          :rules="accountLoginRules"
        >
          <!-- 账号 -->
          <a-form-model-item ref="account" prop="account">
            <a-input
              v-model="accountLoginForm.account"
              placeholder="请输入手机号"
              size="large"
              ref="accountLoginForm.account"
            />
          </a-form-model-item>
          <!-- 密码 -->
          <a-form-model-item ref="password" prop="password">
            <a-input-password
              v-model="accountLoginForm.password"
              placeholder="请输入密码"
              size="large"
              ref="accountLoginForm.password"
            />
          </a-form-model-item>
        </a-form-model>
        <!--  -->
        <div class="login-operate">
          <a-checkbox>下次自动登录</a-checkbox>
          <div class="forget-password" @click="goFoundPassword()">
            忘记密码?
          </div>
        </div>
      </div>
      <!-- 手机验证码登录 -->
      <div class="phone-login-container" v-if="loginType == 'phone'">
        <a-form-model
          ref="phoneLoginForm"
          :model="phoneLoginForm"
          :rules="phoneLoginRules"
        >
          <!-- 手机号 -->
          <a-form-model-item ref="phone" prop="phone" class="login-phone">
            <!-- <div class="area-code">
              <a-select default-value="+85">
                <a-select-option value="+85"> +85 </a-select-option>
                <a-select-option value="+86"> +86 </a-select-option>
              </a-select>
            </div> -->
            <a-input
              v-model="phoneLoginForm.phone"
              placeholder="请输入手机号"
              size="large"
            />
          </a-form-model-item>
          <!-- 验证码 -->
          <a-form-model-item ref="code" prop="code" class="login-code">
            <a-input
              v-model="phoneLoginForm.code"
              placeholder="请输入验证码"
              size="large"
            />
            <a-button size="large"> 获取验证码 </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
    <div class="login-footer">
      <a-button
        type="primary"
        size="large"
        @click="confirm()"
        :loading="loading"
      >
        {{ loading ? "正在登录" : "登录" }}</a-button
      >
      <div class="login-tip-warp">
        没有账号？
        <span @click="goRregister()">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getAuthData } from "../../api/login";
import { checkPhone } from "../../utils";
export default {
  name: "Login",
  inject: ["provideData"],
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isShow: {
      handler() {
        if (this.initAin) {
          this.initAin = false;
        }
      },
    },
  },
  computed: {
    animateClass() {
      let { isShow, initAin } = this;
      if (initAin) {
        return "animate__fadeInDown";
      } else {
        switch (isShow) {
          case true:
            return "animate__faster animate__fadeInLeftBig";

          case false:
            return "animate__faster animate__fadeOutLeftBig";
          default:
            break;
        }
      }
    },
  },
  mounted() {},
  data() {
    return {
      initAin: true,
      loading: false,
      loginType: "account",
      //账号密码登录
      //account: "jtsuper",
      //password: "123456",
      accountLoginForm: {
        account: "jtsuper",
        password: "123456",
      },
      accountLoginRules: {
        account: [
          {
            required: false,
            message: "您输入的账号不正确",
            trigger: ["change"],
          },
        ],
        password: [
          {
            required: false,
            message: "您输入的密码不正确",
            trigger: ["change"],
          },
        ],
      },
      //账号密码登录
      phoneLoginForm: {
        phone: "",
        code: "",
      },
      phoneLoginRules: {
        phone: [
          {
            required: true,
            message: "您输入的手机不正确",
            trigger: ["change"],
          },
        ],
        code: [
          {
            required: true,
            message: "您输入的验证码不正确",
            trigger: ["change"],
          },
        ],
      },
    };
  },
  methods: {
    //登录
    confirm() {
      switch (this.loginType) {
        //账号密码登录
        case "account":
          this.accountLogin();

          break;

        default:
          break;
      }
    },
    //账号登录api
    accountLogin() {
      let { host } = this.provideData;
      let { account, password } = this.accountLoginForm;
      if (account.trim() == "") {
        this.$message.error(`请输入账号`);
        this.$refs["accountLoginForm.account"].focus();
      } else if (password.trim() == "") {
        this.$message.error(`请输入密码`);
        this.$refs["accountLoginForm.password"].focus();
      } else {
        this.loading = true;
        let fd = new FormData();
        fd.append("username", account);
        fd.append("password", password);
        fd.append("grant_type", "password");
        getAuthData({
          host,
          params: fd,
        })
          .then((res) => {
            let { data } = res;
            this.loading = false;
            //关键数据写入缓存
            localStorage.setItem("LOGIN_DATA", JSON.stringify(data));
            localStorage.setItem("ACCESS_TOKEN", data.access_token);
            localStorage.setItem("USER_INFO", JSON.stringify(data.userInfo));

            //账号密码登录成功回调
            this.$parent.$emit("loginSuccess", {
              loginType: "account",
              response: data,
            });
            this.$message.success(`${data.userInfo.username}，欢迎回来！`);
          })
          .catch((error) => {
            this.loading = false;
            //账号密码登录失败回调
            this.$parent.$emit("loginError", {
              loginType: "account",
              response: error,
            });
          });
      }
    },
    //切换登录类型
    checkType(type = "account") {
      this.loginType = type;
    },
    //切换注册
    goRregister() {
      this.$emit("update:isShow", false);
      this.$emit("linkRregister");
    },
    //切换忘记密码
    goFoundPassword() {
      this.$emit("update:isShow", false);
      this.$emit("goFoundPassword");
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  width: 580px;
  height: 526px;
  position: fixed;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  margin: -263px -290px;
  background: rgba(255, 255, 255, 0.8) url("../../assets/logo.png") no-repeat
    center 35px;
  box-sizing: border-box;
  padding: 150px 60px 0 60px;
  .login-header {
    justify-content: center;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #899194;
    height: 36px;
    line-height: 36px;
    margin-bottom: 36px;
    div {
      height: 100%;
      cursor: pointer;
      &.on {
        color: var(--primary-color);
        font-weight: bold;
        border-bottom: 2px solid var(--primary-color);
      }
      &:last-child {
        margin-left: 76px;
      }
    }
  }
  .login-footer {
    width: 100%;
    flex: 1;
    .ant-btn {
      display: block;
      width: 100%;
    }
    .login-tip-warp {
      text-align: center;
      padding-top: 26px;
      span {
        color: var(--primary-color);
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .account-login-container {
    .login-operate {
      display: flex;
      justify-content: space-between;
      margin-top: -5px;
      padding-bottom: 30px;
      div {
        cursor: pointer;
      }
      .forget-password:hover {
        text-decoration: underline;
      }
    }
  }
  .phone-login-container {
    padding-bottom: 46px;
    .ant-form-item {
      position: relative;
      &.login-phone {
        .ant-input {
          //   padding-left: 66px;
        }
      }
      &.login-code {
        .ant-input {
          width: 346px;
        }
        .ant-btn-lg {
          font-size: 14px;
          margin-left: 12px;
          background: #e1e8ee;
          color: var(--primary-color);
        }
      }
      .area-code {
        position: absolute;
        z-index: 9;
        /deep/.ant-select-selection--single {
          border: none;
          box-shadow: none;
          background: none;
          .ant-select-arrow {
            right: 6px;
          }
          position: relative;
          &::after {
            content: "";
            position: absolute;
            height: 20px;
            width: 1px;
            background: var(--border-color-base);
            top: 50%;
            right: 0;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}
</style>
