<template>
  <view id="register-container">
    <view class="top-area">
      <u-icon name="arrow-left" size="17px" color="#000" :bold="true" @click="navigateTo"></u-icon>
    </view>

    <view class="content-area">
      <text class="content-area-title">注册</text>
    </view>

    <view class="bottom-area">
      <u-input v-model="phone" prefixIcon="phone" placeholder="手机号(必填)" border="none" />
      <u-input v-model="verify" prefixIcon="chat" placeholder="验证码(必填)" border="none" :maxlength="6">
        <template #suffix>
          <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
        </template>
      </u-input>
      <u-input v-model="userName" prefixIcon="account" placeholder="用户名(必填)" border="none" />
      <u-input v-model="email" prefixIcon="email" placeholder="邮箱(必填)" border="none" />
      <u-input v-model="nickName" prefixIcon="coupon" placeholder="真实姓名(必填)" border="none" />
      <u-input v-model="newPassword" prefixIcon="lock" placeholder="密码(必填)" border="none" :password="newPasswordBool">
        <template #suffix>
          <text :class="!newPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
        </template>
      </u-input>
      <u-input v-model="confirmPassword" prefixIcon="lock" placeholder="再次输入密码(必填)" border="none" :password="confirmPasswordBool">
        <template #suffix>
          <text :class="!confirmPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
        </template>
      </u-input>

      <u-button
        type="primary"
        shape="circle"
        :customStyle="{
          display: 'block',
          width: '100%',
          height: '45px',
          lineHeight: '45px',
          fontSize: '17px',
        }"
        @click="handleSubmit()"
      >
        注 册
      </u-button>
    </view>
  </view>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  userName: undefined,
  nickName: undefined,
  phone: undefined,
  verify: undefined,
  email: undefined,
  newPassword: undefined,
  newPasswordBool: true,
  confirmPassword: undefined,
  confirmPasswordBool: true,
});

const { userName, nickName, phone, verify, email, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool } = toRefs(state);

/**
 * @点击发送验证码
 */
function getVerifyCode() {
  verify.value = undefined;
  useStore.GetCodeImg({
    phone: phone.value,
    success: (res) => {
      proxy.$modal.msgSuccess("发送成功");
    },
  });
}

/**
 * @注册
 * @按钮点击事件
 */
function handleSubmit() {
  useStore.PhoneVerify({
    data: {
      phone: phone.value,
      verify: verify.value,
    },
    success: (res) => {
      useStore.UserAdd({
        data: {
          userName: userName.value,
          nickName: nickName.value,
          phone: phone.value,
          verify: verify.value,
          email: email.value,
          newPassword: newPassword.value,
          confirmPassword: confirmPassword.value,
        },
        success: (res) => {
          proxy.$modal.msgSuccess("注册成功");

          setTimeout(() => {
            proxy.$modal.loading("登录中，请耐心等待...");
            useStore
              .Login({
                username: phone.value,
                password: newPassword.value,
                tenantId: useStore.tenantId,
              })
              .then(() => {
                /** 获取用户信息 */
                proxy.$modal.closeLoading();
                useStore.GetInfo().then((res) => {
                  proxy.$tab.reLaunch("/pages/index");
                });
              });
          }, 1000);
        },
      });
    },
    error: (res) => {
      return false;
    },
  });
}

/**
 * @跳转登录
 */
function navigateTo() {
  proxy.$tab.navigateBack(1);
}

onLoad((options) => {});
</script>

<style lang="scss" scoped>
#register-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  margin: auto;
  padding: 0 30px;
  padding-top: 20%;
  //#ifdef MP-WEIXIN
  padding-top: 30%;
  //#endif
  background-color: #ffffff;
  overflow: auto;
  .top-area {
  }

  .content-area {
    display: flex;
    margin: 30px 0;

    &-title {
      margin: auto auto auto 0;
      color: #000;
      font-size: 18px;
    }
  }

  .bottom-area {
    :deep() {
      .u-input {
        height: 45px;
        border-radius: 8px;
        padding: 5px 12px !important;
        border: 0 !important;
        background-color: #f5f6fa !important;
        margin-bottom: 15px;
      }
      .u-icon__icon {
        font-size: 24px !important;
        line-height: 24px !important;
        color: gray !important;
      }
      .iconfont {
        color: gray !important;
      }
      .input-placeholder {
        color: #c0c4cc !important;
      }
      .uni-input-wrapper {
        font-size: 16px;
      }
      .u-line {
        display: none !important;
      }
    }
  }
}

@media (min-width: 1280px) {
  #register-container {
    padding-top: 10% !important;
  }
}
</style>
