<script setup lang="ts">
import { ref, reactive } from 'vue'
import { submitMchApply, type MchApplyParams } from '~/config/api'

const toast = useToast()
const formRef = ref()
const isSubmitting = ref(false)

const formState = reactive<MchApplyParams>({
  name: '',
  mobile: '',
  content: '',
  hasDevice: 0,
  city: ''
})

const showToast = (title: string, type: 'success' | 'error' = 'success') => {
  toast.add({
    title,
    color: type === 'success' ? 'success' : 'error',
    icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',

  })
}

const resetForm = () => {
  formState.name = ''
  formState.mobile = ''
  formState.content = ''
  formState.hasDevice = 0
  formState.city = ''
  formRef.value?.clear()
}

const validateForm = (): boolean => {
  if (!formState.name.trim()) {
    showToast('请输入姓名', 'error')
    return false
  }
  if (!formState.mobile.trim()) {
    showToast('请输入手机号', 'error')
    return false
  }
  // 简单的手机号验证
  const mobileRegex = /^1[3-9]\d{9}$/
  if (!mobileRegex.test(formState.mobile)) {
    showToast('请输入正确的手机号', 'error')
    return false
  }
  if (!formState.city.trim()) {
    showToast('请输入所在城市', 'error')
    return false
  }
  if (!formState.content.trim()) {
    showToast('请输入留言内容', 'error')
    return false
  }
  return true
}

const onSubmit = async () => {
  if (!validateForm()) {
    return
  }

  isSubmitting.value = true

  try {
    const response = await submitMchApply(formState)

    if (response.code === 200) {
      showToast('申请提交成功！我们会尽快与您联系。', 'success')
      resetForm()
    } else {
      showToast(response.msg || '提交失败，请稍后重试', 'error')
    }
  } catch (error) {
    console.error('提交申请失败:', error)
    showToast('提交失败，请检查网络连接后重试', 'error')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <div class="w-full   p-4 bg-white rounded-lg shadow-xl ">
    <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
    <h3 class="text-lg font-semibold mb-1 text-gray-800">商家加盟申请</h3>
    <UForm
        ref="formRef"
        :state="formState"
        class="space-y-4 w-full"
        @submit="onSubmit"
    >
      <UFormGroup label="姓名" name="name" required>
        <UInput
            v-model="formState.name"
            placeholder="请输入您的姓名"
            size="md"
            class="w-full mb-2"
        />
      </UFormGroup>

      <UFormGroup label="手机号" name="mobile" required>
        <UInput
            v-model="formState.mobile"
            type="tel"
            placeholder="请输入您的手机号"
            size="md"
            class="w-full mb-2"
        />
      </UFormGroup>

      <UFormGroup label="城市" name="city" required>
        <UInput
            v-model="formState.city"
            placeholder="请输入您的意向合作城市"
            size="md"
            class="w-full mb-2"
        />
      </UFormGroup>

      <UFormGroup label="是否有设备" name="hasDevice">
        <div class="flex gap-4">
          <label class="flex items-center gap-2 cursor-pointer">
            <input
                type="radio"
                v-model="formState.hasDevice"
                :value="1"
                class="w-4 h-4 text-primary"
            />
            <span class="text-sm">有设备</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input
                type="radio"
                v-model="formState.hasDevice"
                :value="0"
                class="w-4 h-4 text-primary"
            />
            <span class="text-sm">无设备</span>
          </label>
        </div>
      </UFormGroup>

      <UFormGroup label="留言内容" name="content" required>
        <UTextarea
            v-model="formState.content"
            placeholder="请输入您想要了解的信息"
            :rows="3"
            size="md"
            class="w-full mt-1"
        />
      </UFormGroup>


      <div class="flex gap-2 pt-2 ">
        <UButton
            type="submit"
            :loading="isSubmitting"
            :disabled="isSubmitting"
            class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center"
            size="md"
        >
          {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
        </UButton>

      </div>
    </UForm>

    <img class="mt-2" src="https://api.ccttiot.com/image-1762158608753.png" alt="">
    <img src="https://api.ccttiot.com/image-1762159041739.png" alt="">
    <img src="https://api.ccttiot.com/image-1762159105486.png" alt="">
    <img src="https://api.ccttiot.com/image-1762158699504.png" alt="">
  </div>
</template>

<style scoped>

</style>