<template>
  <view class="jst-login">
    <view class="tabs" v-if="showTab">
      <text
        @click="onTabChange('phone')"
        :class="{ selected: formSelected === 'phone' }"
        >验证码登录</text
      >
      <text
        @click="onTabChange('account')"
        :class="{ selected: formSelected === 'account' }"
        >账号登录</text
      >
    </view>
    <view class="forms">
      <view class="form-code" v-show="formSelected === 'phone'">
        <phone-form
          :toTop="toTop"
          ref="phoneForm"
          :sendSmsCode="sendSmsCode"
          @getPicCode="phoneGetPicCode"
          :getNeedCode="getNeedCode"
        />
      </view>
      <view class="form-account" v-show="formSelected === 'account'">
        <account-form
          :toTop="toTop"
          :accountPlaceholder="accountPlaceholder"
          ref="accountForm"
        />
      </view>
    </view>

    <JstAgreement
      v-model="agreement"
      :show-agreement="showAgreement"
      :agreementName="'《用户服务协议及隐私政策》'"
    >
      <slot name="agreement" />
    </JstAgreement>

    <slot name="submitTop" />

    <u-button
      class="login-btn"
      type="primary"
      @click="submit"
      :loading="submitLoading"
      :disabled="loginDisabled"
      >登录</u-button
    >

    <JstCodeModal
      :toTop="toTop"
      v-model="picCodeShow"
      :getCheckCodeImg="getCheckCodeImg"
      @confirm="picCodeConfirm"
    />
  </view>
</template>

<script>
import JstAgreement from "../jst-agreement/index.vue";
import JstCodeModal from "../jst-code-modal/index.vue";
import AccountForm from "./components/account-form/index.vue";
import PhoneForm from "./components/phone-form/index.vue";

export default {
  name: "jst-login",
  props: {
    // 表单  ['account', 'phone'] 同时显示账号与手机  'account' 账户  'phone' 验证码
    formType: {
      type: [Array, String],
      default() {
        return ["phone", "account"];
      },
    },
    // 显示协议
    showAgreement: {
      type: Boolean,
      default: false,
    },
    // request 获取图形二维码
    getCheckCodeImg: {
      type: Function,
      default: () => {},
    },
    // request 是否需要图形二维码
    getNeedCode: {
      type: Function,
      default: () => {},
    },
    // request 发送手机验证码
    sendSmsCode: {
      type: Function,
      default: () => {},
    },
    // request 用户密码登录
    loginByPassword: {
      type: Function,
      default: () => {},
    },
    // request 手机号验证码登录
    loginBySmsCode: {
      type: Function,
      default: () => {},
    },
    // 账号登陆是否开启图形验证码
    accountCodeShow: {
      type: Boolean,
      default: true,
    },
    // 账号Placeholder
    accountPlaceholder: {
      type: String,
      default: "",
    },
  },
  components: {
    JstAgreement,
    JstCodeModal,
    AccountForm,
    PhoneForm,
  },
  data() {
    return {
      showTab: false,
      agreement: false,
      picCodeShow: false,
      submitLoading: false,
      formSelected: "",
      picCodeConfirm: () => {},
      accountFormData: {},
      phoneFormData: {},
    };
  },
  computed: {
    loginDisabled: function () {
      return this.showAgreement ? !this.agreement : false;
    },
  },
  created() {
    const formType = this.formType;

    if (Array.isArray(formType)) {
      this.formSelected = formType[0];
      if (formType.length > 1) {
        this.showTab = true;
      }
    } else {
      this.formSelected = formType;
    }
  },
  methods: {
    toTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0,
      });
    },
    submit() {
      if (this.showAgreement && !this.agreement) {
        return this.$u.toast("请先勾选协议");
      }

      if (this.formSelected === "account") {
        this.$refs.accountForm.validate(async (data) => {
          if (this.accountCodeShow) {
            this.picCodeShow = true;
            this.picCodeConfirm = this.accountLogin;
            this.accountFormData = data;
          } else {
            this.submitLoading = true;

            await this.loginByPassword({
              ...data,
            });

            this.submitLoading = false;
          }
        });
      }

      if (this.formSelected === "phone") {
        this.$refs.phoneForm.validate((data) => {
          this.phoneFormData = data;
          this.phoneLogin();
        });
      }
    },
    async accountLogin(data) {
      this.submitLoading = true;

      await this.loginByPassword({
        ...data,
        ...this.accountFormData,
      });

      this.submitLoading = false;
    },
    async phoneLogin() {
      this.submitLoading = true;

      await this.loginBySmsCode({
        ...this.phoneFormData,
      });

      this.submitLoading = false;
    },
    async phoneGetPicCode() {
      const isNeed = await this.$refs.phoneForm.needCode();

      if (isNeed) {
        this.picCodeShow = true;
        this.picCodeConfirm = this.$refs.phoneForm.getSmsCode;
      } else {
        this.$refs.phoneForm.getSmsCode();
      }
    },
    onTabChange(type) {
      this.formSelected = type;
    },
  },
};
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28rpx;

  text {
    font-size: 28rpx;
    color: #838383;
    width: 220rpx;
    text-align: center;
  }

  text.selected {
    font-size: 36rpx;
    color: #333333;
    font-weight: 500;
  }
}

.forms {
  .codeBtn {
    color: $uni-color-primary;
  }
}

.login-btn {
  margin-top: 60rpx;
  background: #1890ff;
  box-shadow: 0px 4px 18px rgba(24, 144, 255, 0.12);
  border-radius: 8px;
}
</style>
