<template>
  <div class="loginModel">
    <i class="iconClose" @click="() => this.$emit('close')"></i>
    <div class="loginSection">
      <div class="fieldSection">
        <van-field v-model="username" placeholder="请输入手机号" autocomplete="off" :border="false" type="tel" maxlength="11">
          <template #left-icon>
            <img src="./images/icon-phone.png" class="icon" />
          </template>
        </van-field>

        <van-field v-if="loginType === 'PWD'" v-model="password" placeholder="请输入密码" autocomplete="off" :border="false" type="password">
          <template #left-icon>
            <img src="./images/icon-password.png" class="icon" />
          </template>
        </van-field>
        <van-field v-else v-model="smsCode" placeholder="请输入验证码" autocomplete="off" maxlength="6" type="tel" :border="false">
          <template #left-icon>
            <img src="./images/icon-password.png" class="icon" />
          </template>
          <template #button>
            <span v-show="countDownStatus" class="codeText" @click="onSendCode">
              获取验证码
            </span>
            <van-count-down v-show="!countDownStatus" ref="countdown" :auto-start="false" :time="countDownTime" @finish="onFinished" format="ss秒" />
          </template>
        </van-field>
      </div>

      <div class="btnGroup">
        <van-button round block color="#2DC7AA" @click="onLogin">
          登录
        </van-button>

        <span
          class="btnText"
          @click="
            () => {
              if (loginType === 'PWD') {
                countDownStatus = true;
                loginType = 'SMS';
              } else {
                loginType = 'PWD';
              }
            }
          "
        >
          {{ loginType === "PWD" ? "验证码登录" : "密码登录" }}
        </span>
      </div>
    </div>

    <MTeleport to="body">
      <MImgCode
        v-if="showImgCode"
        v-model="showImgCode"
        :phone="username"
        @close="
          () => {
            showImgCode = false;
          }
        "
        @onCodeSend="onCodeSend"
      />
    </MTeleport>
  </div>
</template>

<script>
// import { sendSms, smsLogin, usernameLogin, queryClient } from "./api";
import request from "@/helpers/request";
import { verifyPhone } from "@/helpers/rules";
import MImgCode from "@/components/MImgCode";
import MTeleport from "@/components/MTeleport";
import { setTempAuthToken, removeAuthToken } from "@/common/common";
export default {
  components: {
    MImgCode,
    MTeleport,
  },
  data() {
    return {
      loginType: "PWD",
      showImgCode: false,
      username: "",
      password: "",
      smsCode: "",
      countDownStatus: true,
      countDownTime: 1000 * 120, // 倒计时时间
    };
  },
  methods: {
    async onSendCode() {
      if (!verifyPhone(this.username)) {
        return;
      }
      this.showImgCode = true;
    },
    onCodeSend() {
      this.countDownStatus = false;
      this.$refs.countdown.start(); // 倒计时开始
    },
    onFinished() {
      this.countDownStatus = true;
      this.$refs.countdown.reset();
    },
    async onLogin() {
      try {
        if (!verifyPhone(this.username)) {
          return this.$toast("请输入正确的手机号码");
        }
        if (this.loginType === "PWD") {
          if (!this.password) {
            return this.$toast("请输入密码");
          }
          const { data } = await request({
            baseURL: "/api-auth",
            url: "/usernameLogin",
            method: "post",
            requestType: "form",
            data: {
              username: this.username,
              password: this.password,
              clientId: "student",
              clientSecret: "student",
            },
          });
          const { authentication } = data;
          // setAuth(data.authentication.token_type + " " + data.authentication.access_token);
          setTempAuthToken(authentication.token_type + " " + authentication.access_token);
        } else {
          if (!this.smsCode) {
            return this.$toast("请输入验证码");
          }
          const { data } = await request({
            baseURL: "/api-auth",
            url: "/smsLogin",
            method: "post",
            data: {
              clientId: "student",
              clientSecret: "student",
              phone: this.username,
              smsCode: this.smsCode,
              isLessee: this.isRegister ? true : undefined,
            },
            requestType: "form",
          });
          const { authentication } = data;
          setTempAuthToken(authentication.token_type + " " + authentication.access_token);
        }

        await this.$store.dispatch("setUserInfo");
        this.$emit("confirm", true);
      } catch (e) {
        //
        console.log(e);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.loginModel {
  background: url("data:image/png;base64,[encoded data, 10476 characters]")
    no-repeat center;
  background-size: contain;
  width: 306px;
  height: 370px;

  .iconClose {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 30px;
    right: -12px;
    background: url("./images/icon-close.png") no-repeat center;
    background-size: contain;
    z-index: 1;
  }
}

.loginSection {
  padding: 126px 16px 0;
}

.fieldSection {
  padding-bottom: 18px;

  :global {
    .van-field {
      background: #f2f4f8;
      border-radius: 24px;
      padding: 11px 16px;
      margin-bottom: 12px;
    }

    .van-field__left-icon {
      display: flex;
      align-items: center;
    }

    .van-field__control::placeholder {
      color: #97b9c3;
    }
  }

  .icon {
    width: 20px;
    height: 20px;
  }

  .codeText {
    font-size: 14px;
    color: #2dc7aa;
  }
}

.btnGroup {
  :global {
    .van-button {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .btnText {
    display: block;
    padding-top: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #74949e;
    line-height: 22px;
    text-align: center;
  }
}
</style>
