<template>
  <view class="page">
    <BackBar title="修改手机号" />
    <view class="login_form">
      <view class="login_form_item">
        <view class="left">
          <image
            :src="`${OSS_URL}/iconfont/phone_icon.png`"
            mode=""
            class="login_form_item_icon"
          ></image>
          <input
            v-model="form.phone"
            class="input_box"
            type="text"
            placeholder="请输入手机号"
            placeholder-style="color:rgba(169, 170, 181, 1);text-align: left;font-size:30rpx;"
            @input="phoneDivision"
          />
        </view>
      </view>
      <view class="login_form_item">
        <view class="left">
          <image
            :src="`${OSS_URL}/iconfont/code_icon.png`"
            mode=""
            class="login_form_item_icon"
          ></image>
          <input
            v-model="form.code"
            class="input_box"
            type="number"
            placeholder="请输入验证码"
            placeholder-style="color:rgba(169, 170, 181, 1);text-align: left;font-size:30rpx;"
          />
        </view>
        <view class="code_btn">
          <template v-if="codeTime > 0">
            <text class="time_tip">{{ codeTimeContet }} 秒后重新发送</text>
          </template>
          <template v-else>
            <text @click="getCode">获取验证码</text>
          </template>
        </view>
      </view>
      <button class="phone_btn" @click="submit">确定</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, computed, nextTick, reactive } from 'vue';
import { sendCodeMessageApi } from '@/api';
import { usepersonalStoreHook } from '@/store/inspector';
import { validCode } from '@/api/modules/inspector';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const formatPhone = ref('');
const form = reactive({
  phone: '',
  code: '',
});
const code = ref('');
const codeTime = ref(0);
const codeTimeContet = computed(() => {
  return codeTime.value;
});
// 手机344分割
function phoneDivision() {
  nextTick(() => {
    let value = form.phone.replace(/\D/g, '').substr(0, 11);
    let len = value.length; // 获取长度判断
    if (len > 3 && len < 8) {
      value = value.replace(/^(\d{3})/g, '$1 ');
    } else if (len >= 8) {
      value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ');
    }
    form.phone = value;
  });
}
// 保存修改
const submit = async () => {
  if (!validatePhone() || !form.code) {
    uni.showToast({
      icon: 'none',
      title: '手机号或验证码不正确',
    });
    return;
  }
  uni.showLoading({
    title: '保存中...',
  });
  const { code, message } = await validCode(form);
  uni.hideLoading();
  if (code === 200) {
    usepersonalStoreHook().SET_PHONE(form.phone);
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uni.showToast({
      title: message,
    });
  }
};
// 获取验证码
async function getCode() {
  form.phone = form.phone.replace(/\s+/g, '');
  if (!form.phone) {
    uni.showToast({
      icon: 'none',
      title: '请输入手机号',
    });
    return;
  }
  try {
    const res = await sendCodeMessageApi(form.phone);
    uni.showToast({
      title: '发送成功！',
      icon: 'none',
    });
    codeTime.value = 60;
    let timer = setInterval(() => {
      codeTime.value--;
      if (codeTime.value < 1) {
        clearInterval(timer);
        codeTime.value = 0;
      }
    }, 1000);
  } catch (err) {
    console.log(err);
  }
}
function back() {
  uni.navigateBack({ delta: 1 });
}
function validatePhone() {
  form.phone = form.phone.replace(/\s+/g, '');
  let reg = /^[1][0,1,2,3, 4, 5, 6, 7, 8, 9][0-9]{9}$/;
  return reg.test(form.phone);
}
</script>
<style lang="scss" scoped>
.page {
  padding-top: 0;
}
.login_form {
  padding: 0 30rpx;
  margin-top: 30rpx;

  &_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 30rpx;
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .left {
      display: flex;
      align-items: center;

      .input_box {
        text-align: left;
        color: rgba(51, 51, 51, 1);
        font-size: 30rpx;
        line-height: 42rpx;
      }
    }

    &_icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    .code_btn {
      color: rgba(97, 93, 255, 1);
      font-size: 30rpx;
      line-height: 42rpx;
      .time_tip {
        white-space: nowrap;
      }
    }
  }

  .phone_btn {
    margin: 60rpx 0 0 0;
    height: 90rpx;
    width: 690rpx;
    line-height: 90rpx;
    background-color: #615dff;
    color: #fff;
    font-size: 30rpx;
    border-radius: 20rpx;
  }
}
</style>
