<template>
  <view class="phoneVerify-container">
    <view class="content-area">
      <view class="content-area-top">
        <text class="content-area-top-icon iconfont oaIcon-phone"></text>
      </view>

      <view class="content-area-text">
        <text class="title">手机号验证</text>
      </view>

      <view class="content-area-center">
        <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号" :maxlength="11" />

        <u-input v-model="verify" prefixIcon="email" placeholder="请输入验证码" :maxlength="6">
          <template #suffix>
            <button class="content-area-center-verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
          </template>
        </u-input>
      </view>

      <u-button class="content-area-submit" type="primary" :plain="false" text="验 证" color="#2a98ff" @click="submitRes()"></u-button>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll, onBackPress, onUnload } from "@dcloudio/uni-app";
import { reactive, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

const useStore = useStores();
const { proxy } = getCurrentInstance();

const data = reactive({
  path: "",
  phone: undefined,
  verify: undefined,
});

const { phone, verify, path } = toRefs(data);

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

/** 点击提交按钮 */
function submitRes() {
  useStore.PhoneVerify({
    data: {
      phone: phone.value,
      verify: verify.value,
    },
    success: (res) => {
      proxy.$tab.redirectTo(path.value + `?statusBool=${true}&phone=${phone.value}`);
    },
    error: (res) => {
      return false;
    },
  });
}

onShow(() => {
  useStore.SetInterval("codeTime"); //调用倒计时定时器
});

onLoad((options) => {
  if ("path" in options) {
    path.value = options.path;
  }
});
</script>

<style lang="scss" scoped>
.phoneVerify-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: $uni-bg-color;

  .content-area {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 150px 50px 0px;

    &-top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;

      &-icon {
        font-size: 40px;
        color: #2a98ff;
      }
    }

    &-text {
      display: flex;
      position: relative;
      margin-bottom: 30px;
      .title {
        margin: auto;
        color: #000;
        font-size: 16px;
        font-weight: 600;
      }
    }

    // 登录页-服务器配置样式 开始
    &-center {
      :deep(.u-input) {
        height: 45px;
        border: 0 !important;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 5px 12px !important;
        background-color: #f5f6fa !important;
      }

      :deep(.input-placeholder) {
        color: #c0c4cc !important;
      }

      :deep(.uni-input-wrapper) {
        font-size: 16px;
      }

      :deep(.u-icon__icon) {
        font-size: 24px !important;
        line-height: 24px !important;
        color: gray !important;
      }

      :deep(.iconfont) {
        color: gray !important;
      }

      :deep(:-webkit-autofill) {
        caret-color: #000; // 设置光标颜色
        // -webkit-text-fill-color: gray !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
      }

      &-verify {
        color: #2a98ff;
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
        background-color: transparent;

        &::after {
          border: 0px;
        }
      }
    }

    &-submit {
      background: #2a98ff;
      color: #fff;
      border: 0px;
      margin-top: 30px;
    }
  }
}
</style>
