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

const props = defineProps({
  phone: String,
})

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

const confirmPopup = ref()
const confirmPopupDialog = ref()
const confrimFormRef = ref()

const profileData = useMemberStore().profile
// 验证用户信息表单
const form = reactive({
  password: '',
  sms_captcha_code: '',
  phone: props.phone,
})
const formRules = {
  password: {
    rules: [{ required: true, errorMessage: '请输入密码' }],
  },
  sms_captcha_code: {
    rules: [{ required: true, errorMessage: '请输入验证码' }],
  },
}
// 确认修改手机号码表单
const confirmForm = reactive({
  phone: '',
  sms_captcha_code: '',
  verification_token: '',
})
const confirmFormRules = {
  phone: {
    rules: [{ required: true, errorMessage: '请输入手机号码' }],
  },
  sms_captcha_code: {
    rules: [{ required: true, errorMessage: '请输入验证码' }],
  },
}
const open = () => {
  popup.value?.open()
}

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

    const res = await verificationApi({
      password: form.password,
      sms_captcha_code: form.sms_captcha_code,
    })

    if (!res.result.verificationToken) {
      return uni.showToast({
        title: '验证码错误',
        icon: 'none',
      })
    }

    confirmForm.verification_token = res.result.verificationToken

    popup.value?.close()
    confirmPopup.value.open()
  } catch (err) {
    console.log(err)
  }
}

const onConfirmChange = async () => {
  try {
    await confrimFormRef.value.validate()

    const res = changeBindApi({
      verification_token: confirmForm.verification_token,
      phone: confirmForm.phone,
      sms_captcha_code: confirmForm.sms_captcha_code,
    })

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

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

const onBeforeSend = () => {
  if (!form.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })

    return false
  }

  return true
}

defineExpose({ popup, 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"
          label-width="100%"
        >
          <uni-forms-item required label="用户密码" name="password">
            <uni-easyinput
              v-model="form.password"
              type="password"
              placeholder="请输入当前账户密码"
            />
          </uni-forms-item>

          <shop-sms-captcha
            :phone="form.phone"
            :template_code="smsTemplateCode.verifyPhone"
            :password="form.password"
            v-model:sms_captcha="form.sms_captcha_code"
            :options="{
              label: `短信验证码(接收手机: ${profileData?.mobile})`,
              required: true,
            }"
            :before-send="onBeforeSend"
          />
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
    <!-- 修改框 -->
    <uni-popup ref="confirmPopup" type="dialog">
      <uni-popup-dialog
        ref="confirmPopupDialog"
        mode="input"
        title="修改手机号码"
        @confirm="onConfirmChange"
        @close="confirmPopupDialog.popup.close()"
        :before-close="true"
      >
        <uni-forms
          ref="confrimFormRef"
          :model="confirmForm"
          :rules="confirmFormRules"
          validateTrigger="blur"
          label-position="top"
          label-width="100%"
        >
          <uni-forms-item required name="phone" label="新手机号码">
            <uni-easyinput
              v-model="confirmForm.phone"
              placeholder="请输入新的手机号码"
              maxlength="11"
            />
          </uni-forms-item>

          <shop-sms-captcha
            :phone="confirmForm.phone"
            :template_code="smsTemplateCode.changePhone"
            v-model:sms_captcha="confirmForm.sms_captcha_code"
            :options="{
              label: '短信验证码',
              required: true,
            }"
          />
        </uni-forms>
      </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>
