<!--
 * @Author: wyd
 * @Date: 2024-03
 * @LastEditors: wyd
 * @LastEditTime: 2024-03
 * @Description: 忘记密码
-->
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onPullDownRefresh, onReady } from '@dcloudio/uni-app'
import { system } from '@/stores/modules/system'
import { useGlobal } from '@/composables'
import { validatorMobile, verifyPwd } from '@/utils/verification'
import { getSmsApi, forgetApi } from '@/api/login'

const systemStore = system()
// 表单信息
const form = ref({
  passwordAgain: '',
  password: '',
  phonenumber: '',
  smsCode: ''
})
// 表单校验
const rules: UniHelper.UniFormsRules = {
  password: {
    rules: [
      {
        required: true,
        errorMessage: '请输入密码'
      },
      {
        validateFunction: verifyPwd
      }
    ]
  },
  passwordAgain: {
    rules: [
      {
        required: true,
        errorMessage: '请再次输入密码'
      },
      {
        validateFunction: function (rule, value, data, callback) {
          if (value !== data.password) {
            callback('两次输入密码不一致')
          }
          return true
        }
      }
    ]
  },
  phonenumber: {
    rules: [
      {
        required: true,
        errorMessage: '请输入手机号'
      },
      {
        validateFunction: validatorMobile
      }
    ]
  },
  smsCode: {
    rules: [
      {
        required: true,
        errorMessage: '请输入验证码'
      }
    ]
  }
}

// 短信验证码
let isDisabled = ref(false)
let countdown = ref(0)
const getSmsCode = () => {
  getSmsApi({ phonenumber: form.value.phonenumber, type: 2 }).then(() => {
    uni.showToast({
      title: '操作成功',
      icon: 'none'
    })
    isDisabled.value = true
    countdown.value = 60
    const timerInterval = setInterval(() => {
      if (countdown.value > 1) {
        countdown.value--
      } else {
        isDisabled.value = false
        clearInterval(timerInterval)
      }
    }, 1000)
  })
}

// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()

const handleSubmit = async () => {
  formRef.value?.validate?.((err, formData) => {
    if (!err) {
      uni.showLoading()
      forgetApi(form.value).then(() => {
        // 注册成功，返回上一页
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    }
  })
}
onLoad(async () => {
  await systemStore.getConfigData()
})
onReady(() => {
  formRef.value?.setRules?.(rules)
})
// 下拉刷新
onPullDownRefresh(async () => {
  await systemStore.getConfigData()
  uni.stopPullDownRefresh()
})
</script>

<template>
  <view class="login-box">
    <view class="center-box p15 shadow">
      <view class="tc f18 weight-600 black-color mb20">重置密码</view>
      <uni-forms ref="formRef" :model="form" :rules="rules">
        <uni-forms-item name="phonenumber">
          <uni-easyinput type="text" v-model="form.phonenumber" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item name="passwordAgain">
          <uni-easyinput type="password" v-model="form.passwordAgain" placeholder="请再次输入密码" />
        </uni-forms-item>
        <uni-forms-item name="smsCode">
          <view class="flex j-sb a-center w100">
            <uni-easyinput type="text" v-model="form.smsCode" placeholder="请输入验证码" />
            <button class="ml10 sms-btn success-bg" :disabled="isDisabled" type="primary" size="mini" @tap="getSmsCode">
              {{ isDisabled ? countdown + 's后重新获取' : '获取验证码' }}
            </button>
          </view>
        </uni-forms-item>
      </uni-forms>
      <view class="btn-b warning-bg" @tap="handleSubmit">确 定</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background: url('http://1.94.6.75:9000/zlhy-app/bg_login.jpg') center no-repeat;
  background-size: 100% 100%;
  position: relative;
  .center-box {
    width: calc(100vw - 60px);
    min-height: 200px;
    border-radius: 10rpx;
    background: rgba($color: #fff, $alpha: 0.8);
    position: absolute;
    left: 15px;
    top: 20%;
    .btn-b {
      width: 100% !important;
    }
    .sms-btn {
      height: 35px;
      line-height: 35px;
    }
  }
}
</style>
