<script setup>
import { ref } from "vue";
import axios from 'axios'
const form = ref({
  firstName: "",
  lastName: "",
  email: "",
  company: "",
  phone: "",
  alertType: "all"
});
const submitted = ref(false);

async function handleSubmit(e) {
  e.preventDefault();
  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
  if(res.data.status === 0){
    submitted.value = true;
  }else{
 
  }

}
</script>

<template>

  <main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
    <!-- 粒子背景 -->
    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
    <!-- 表单卡片/提交成功卡片 -->
    <div class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in">
      <template v-if="!submitted">
        <h2 class="text-2xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
        <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
        <form class="space-y-3" @submit="handleSubmit">
          <div>
            <label class="block text-gray-700 font-semibold mb-1">* First Name</label>
            <input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
            <input v-model="form.lastName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1">* Email</label>
            <input v-model="form.email" type="email" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1">* Company</label>
            <input v-model="form.company" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
            <input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
          </div>
          <button type="submit" class="w-full py-2.5 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
            Submit
          </button>
        </form>
      </template>
      <template v-else>
        <div class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in">
          <span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
          <h2 class="text-xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
          <div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
          <div class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm">
            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
            <div><span class="font-semibold">Phone：</span>{{ form.phone || 'Not filled in' }}</div>
            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
          </div>
        </div>
      </template>
    </div>
  </main>
</template>

<style scoped lang="scss">
/* 可选：自定义粒子或渐变动画背景 */
</style>

