<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-22 16:11:24
 * @FilePath: /meihuaApp/src/pages/login/index.vue
 * @Description: 文件描述
-->
<template>
  <view>
    <view style="color: #6A4925; font-size: 56rpx; text-align: center;">登&nbsp;录</view>
    <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
      <nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" max-length="11" />
    </view>
    <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
      <!-- <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
        <template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
      </nut-input> -->
      <nut-row>
        <nut-col span="14">
          <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" :formatter="codeFormatter" max-length="4"></nut-input>
        </nut-col>
        <nut-col span="10">
          <view style="padding: 25rpx 10rpx; line-height: 40rpx; background-color: #6A4925; color: #fff; border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx; font-size: 28rpx;text-align: center;">
            <view @tap="getCode" v-if="!time_remaining">获取验证码</view>
            <text v-else>{{ time_remaining }}秒后重新发送</text>
          </view>
        </nut-col>
      </nut-row>
    </view>
    <view style="color: #7B7B7B; font-size: 28rpx; margin: 20rpx 50rpx;">未注册手机号验证后自动创建新账号</view>
    <view style="margin: 50rpx; margin-bottom: 10rpx;">
      <nut-button block color="#6A4925" size="large" @tap="login"><text style="font-size: 38rpx;">登&nbsp;录</text></nut-button>
    </view>
    <view style="display: flex; align-items: center; margin-left: 60rpx; margin-top: 30rpx; color: #6A4925;">
      <IconFont name="checked" color="#6A4925"></IconFont>
      <text style="margin-left: 5rpx;">登录即同意</text><text style="font-weight: bold;" @tap="tapRight">《法律条款及隐私政策》</text>
    </view>
    <nut-popup position="right" closeable :style="{ width: '100%', height: '100%' }" v-model:visible="showRight"></nut-popup>
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref, nextTick } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { bindPhoneAPI, sendSmsCodeAPI } from '@/api/index'

let countdownIntervalId; // 用于存储倒计时的计时器 ID

const startCountdown = (timeInSeconds, updateCallback, resetCallback) => {
  if (countdownIntervalId) {
    // 如果已经有倒计时在进行中，则先清除之前的计时器
    clearInterval(countdownIntervalId);
  }

  let timeLeft = timeInSeconds;

  // 更新倒计时显示的函数
  const updateCountdown = () => {
    if (timeLeft <= 0) {
      // 倒计时结束
      clearInterval(countdownIntervalId);
      resetCallback(); // 调用重置函数
    } else {
      // 更新倒计时显示
      updateCallback(timeLeft);
      timeLeft--;
    }
  }

  // 立即执行一次更新倒计时显示函数
  updateCountdown();

  // 每秒调用一次更新倒计时显示函数
  countdownIntervalId = setInterval(updateCountdown, 1000);
}

const resetCountdown = () => {
  if (countdownIntervalId) {
    // 清除倒计时计时器
    clearInterval(countdownIntervalId);
    countdownIntervalId = undefined;
    console.log("倒计时已重置");
    time_remaining.value = 0;
  }
}

const time_remaining = ref(0);
const tel = ref('');
const code = ref('');

const showRight = ref(false);

const tapRight = () => {
  showRight.value = true;
}

const codeFormatter = (value) => {
  return value.replace(/\D/g, '').substring(0, 4);
}

const isValidTel = (tel) => {
  return /^1\d{10}$/.test(tel);
}

const login = async () => {
  if (!isValidTel(tel.value) ||!code.value) {
    Taro.showToast({
      title: '请检查输入项',
      icon: 'error',
      duration: 2000
    });
    return;
  } else {
    // TODO: 等待正式接口环境调整
    const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value });
    // const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' });
    if (code) {
      Taro.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000,
        success: () => {
          setTimeout(() => {
            let params = getCurrentPageParam();
            if (params.page === 'detail') { // 详情页
              Taro.navigateBack({
                delta: 1
              });
            } else if (params.page === 'my') { // 登录页
              Taro.redirectTo({
                url: '/pages/myInfo/index'
              });
            } else {
              Taro.redirectTo({
                url: '/pages/index/index'
              });
            }
          }, 1000);
        }
      });
    }
  }
}

const updateDisplay = (timeLeft) => {
  // 倒计时剩余时间
  time_remaining.value = timeLeft;
}

const resetDisplay = () => {
  // 在此处进行重置后的展示操作
  resetCountdown();
}

const getCode = async () => {
  if (isValidTel(tel.value)) {
    const { code } = await sendSmsCodeAPI({ mobile: tel.value });
    if (code) {
      Taro.showToast({
        title: '验证码已发送',
        icon:'success',
        duration: 2000
      });
      startCountdown(10, updateDisplay, resetDisplay);
    }
  } else {
    Taro.showToast({
      title: '请检查手机号',
      icon: 'error',
      duration: 2000
    });
  }
}
</script>

<script>
import "./index.less";
import mixin from '@/utils/mixin';

export default {
  name: "loginPage",
  mixins: [mixin.init],
};
</script>