<template>
  <view class="jst-register">
    <view class="forms">
      <register-form
        :toTop="toTop"
        ref="registerForm"
        :sendSmsCode="sendSmsCode"
        :getPicCode="phoneGetPicCode"
        :getNeedCode="getNeedCode"
      />
    </view>

    <JstAgreement
      v-model="agreement"
      :show-agreement="showAgreement"
      :agreementName="'《聚水潭-SaaS ERP申请帐户协议》'"
    >
      <slot name="agreement" />
    </JstAgreement>

    <slot name="submitTop" />

    <u-button
      class="register-btn"
      type="primary"
      @click="submit"
      :loading="submitLoading"
      :disabled="loginDisabled"
      >{{ registerBtnText }}</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 RegisterForm from "./components/register-form/index.vue";

export default {
  name: "jst-register",
  props: {
    // 显示协议
    showAgreement: {
      type: Boolean,
      default: false,
    },
    // request 获取图形二维码
    getCheckCodeImg: {
      type: Function,
      default: () => {},
    },
    // request 是否需要图形二维码
    getNeedCode: {
      type: Function,
      default: () => {},
    },
    // request 发送手机验证码
    sendSmsCode: {
      type: Function,
      default: () => {},
    },
    // request 手机号验证码登录
    registerService: {
      type: Function,
      default: () => {},
    },
    registerBtnText: {
      type: String,
      default: "注册",
    },
  },
  components: {
    JstAgreement,
    JstCodeModal,
    RegisterForm,
  },
  data() {
    return {
      agreement: false,
      picCodeShow: false,
      submitLoading: false,
      formSelected: "",
      picCodeConfirm: () => {},
      registerFormData: {},
    };
  },
  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("请先勾选协议");
      }

      this.$refs.registerForm.validate((data) => {
        this.registerFormData = data;
        this.phoneLogin();
      });
    },
    async phoneLogin() {
      this.submitLoading = true;

      await this.registerService({
        ...this.registerFormData,
      });

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

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

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

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

  text.selected {
    font-size: 38rpx;
    color: #333333;
  }
}

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

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