<script setup lang="ts">
import { reactive, ref } from 'vue'
import { refreshPage } from '@/utils/common'
import { resetPasswordApi } from '@/api/member'
import { smsTemplateCode } from '@/utils/constants'

const resetPwdRef = ref()
const form = reactive({
  password: '',
  phone: '',
  sms_captcha_code: '',
  new_password: '',
})
const formRules = {
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(value)) {
            return callback('密码要求6到32位，不能包含 & < >"')
          }
        },
      },
    ],
  },
  phone: {
    rules: [
      { required: true, errorMessage: '请输入手机号码' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(1[3-9])\d{9}$/.test(value.toString())) {
            return callback('手机号码格式不正确')
          }
        },
      },
    ],
  },
  sms_captcha_code: {
    rules: [{ required: true, errorMessage: '请输入短信验证码' }],
  },
  captcha_img_code: {
    rules: [{ required: true, errorMessage: '请输入验证码' }],
  },
  new_password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(value)) {
            return callback('密码要求6到32位，不能包含 & < >"')
          }
        },
      },
    ],
  },
}

const open = () => {
  resetPwdRef.value.open()
}
const popupDialog = ref()
const formRef = ref()
const onComfirm = async () => {
  try {
    await formRef.value.validate()

    await resetPasswordApi({
      phone: form.phone,
      sms_captcha_code: form.sms_captcha_code,
      new_password: form.new_password,
    })

    uni.showToast({
      title: '密码重置成功',
      icon: 'success',
      mask: true,
    })

    setTimeout(() => {
      popupDialog.value.popup.close()

      refreshPage()
    }, 1500)
  } catch (err) {
    console.log(err)
  }
}

defineExpose({ resetPwdRef, open })
</script>

<template>
  <uni-popup ref="resetPwdRef" type="dialog">
    <uni-popup-dialog
      ref="popupDialog"
      mode="base"
      title="重置密码"
      :before-close="true"
      @confirm="onComfirm"
      @close="popupDialog.popup.close()"
    >
      <uni-forms
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100%"
        label-position="top"
      >
        <view class="remark"><text>密码未设置或忘记密码可按步骤重置密码</text></view>

        <uni-forms-item name="phone" label="手机号码" class="input" required>
          <uni-easyinput v-model="form.phone" maxlength="11" placeholder="请输入手机号码" />
        </uni-forms-item>

        <shop-sms-captcha
          :phone="form.phone"
          :template_code="smsTemplateCode.resetPassword"
          v-model:sms_captcha="form.sms_captcha_code"
          :options="{
            label: '短信验证码',
            required: true,
          }"
        />

        <uni-forms-item name="new_password" class="input" label="新密码" required>
          <uni-easyinput v-model="form.new_password" type="password" placeholder="请输入新密码" />
        </uni-forms-item>
      </uni-forms>
    </uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss">
.remark {
  font-size: 24rpx;
  padding-bottom: 40rpx;
}

.input {
  width: 500rpx;
  position: relative;
}

.send-button {
  right: 0;
  top: 0;
  width: 6.875rem;
  text-align: center;
  font-size: 12px;
  color: red;
  font-size: 24rpx;
}

.captcha-img {
  width: 220rpx;
  height: 80rpx;
  margin-left: 20rpx;
}
</style>
