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

const popup = ref()
const popupDialog = ref()
const formRef = ref()
const resetPasswordRef = ref()

const form = reactive({
  old_password: '',
  new_password: '',
  confrim_password: '',
})

const formRules = reactive({
  old_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位，不能包含& < > " ')
          }
        },
      },
    ],
  },
  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位，不能包含& < > " ')
          }
        },
      },
    ],
  },
  confrim_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 = () => {
  popup.value?.open()
}

const onConfirm = async () => {
  try {
    await formRef.value.validate()

    if (form.new_password !== form.confrim_password) {
      return uni.showToast({
        title: '两次输入的新密码不一致',
        icon: 'none',
        mask: true,
      })
    }

    await changePasswordApi({
      old_password: form.old_password,
      new_password: form.new_password,
    })

    uni.showToast({ title: '修改成功', icon: 'success' })

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

defineExpose({ popup, open })

// 重置密码
const resetPassword = () => {
  resetPasswordRef.value.open()
}
</script>
<template>
  <view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        ref="popupDialog"
        mode="input"
        title="修改密码"
        @confirm="onConfirm"
        @close="popupDialog.popup.close()"
        :before-close="true"
      >
        <uni-forms
          ref="formRef"
          :model="form"
          :rules="formRules"
          validateTrigger="blur"
          label-position="top"
        >
          <view class="remark">
            <text>
              密码未设置或忘记密码请选择
              <text class="reset-btn" @tap="resetPassword">重置密码</text>
            </text>
          </view>
          <uni-forms-item name="old_password" label="旧密码" required>
            <uni-easyinput
              v-model="form.old_password"
              type="password"
              placeholder="请输入旧密码"
              maxlength="32"
            />
          </uni-forms-item>
          <uni-forms-item name="new_password" label="新密码" required>
            <uni-easyinput
              v-model="form.new_password"
              type="password"
              placeholder="请输入新密码"
              maxlength="32"
            />
          </uni-forms-item>
          <uni-forms-item name="confrim_password" label="确认密码" required>
            <uni-easyinput
              v-model="form.confrim_password"
              type="password"
              placeholder="请再次输入新密码"
              maxlength="32"
            />
          </uni-forms-item>
        </uni-forms>

        <shop-reset-password ref="resetPasswordRef" />
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<style lang="scss" scoped>
.remark {
  font-size: 24rpx;
  padding-bottom: 40rpx;
}

.reset-btn {
  color: red;
  font-size: 30rpx;
  padding-left: 20rpx;
  background: #fff;

  &::after {
    border: none;
  }
}
</style>
