<template>
  <div class="mx-auto max-w-screen-xl px-4 py-12">
    <a-typography-title :level="1" class="!mb-2">联系我们</a-typography-title>
    <a-typography-paragraph class="!text-gray-600 !mb-8">
      填写需求后我们将尽快联系你，为你规划产品套餐、交付开通链路与部署方案（SaaS/私有化）。
    </a-typography-paragraph>

    <a-row :gutter="[24, 24]">
      <a-col :xs="24" :lg="14">
        <a-card title="需求表单">
          <a-form layout="vertical" :model="form" :rules="rules" @finish="onSubmit">
            <a-form-item label="需求描述" name="need">
              <a-textarea
                  v-model:value="form.need"
                  :rows="5"
                  placeholder="例如：参考美宜佳小程序，开发一套连锁便利店点餐/会员/配送小程序；需要商品管理、订单、优惠券、会员积分等功能；门店数量约 50 家；希望 SaaS 部署，1 个月内上线"
              />
            </a-form-item>
            <a-row :gutter="16">
              <a-col :xs="24" :md="24">
                <a-form-item label="单位名称" name="company">
                  <a-input v-model:value="form.company" placeholder="请填写公司名称单位名称" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="24">
                <a-form-item label="手机号" name="phone">
                  <a-input v-model:value="form.phone" placeholder="请填写手机号" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="24">
                <a-form-item label="姓名" name="name">
                  <a-input v-model:value="form.name" placeholder="请填写联系人姓名" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :xs="24" :md="12">
                <a-form-item label="交付方式" name="delivery">
                  <a-select v-model:value="form.delivery" placeholder="请选择">
                    <a-select-option value="saas">SaaS（云端）</a-select-option>
                    <a-select-option value="private">私有化部署</a-select-option>
                    <a-select-option value="hybrid">混合部署</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-space>
              <a-button type="primary" html-type="submit" :loading="submitting">提交</a-button>
              <a-button @click="reset" :disabled="submitting">重置</a-button>
            </a-space>
          </a-form>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="10">
        <div class="flex flex-col gap-4">

          <!-- 二维码矩阵 -->
          <a-card :bordered="false" class="shadow-sm">
            <template #title>
              <span class="font-semibold text-base">扫码联系 / 关注我们</span>
            </template>
            <div class="grid grid-cols-2 gap-4">
              <!-- 客户经理微信 -->
              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-blue-200 hover:bg-blue-50/40 transition-colors">
                <a-image
                  src="https://developer-1251422153.cos.ap-guangzhou.myqcloud.com/10001/20210519/60e1528c8a0f13a6bc0b537e99bddbb5.png"
                  alt="客户经理微信二维码"
                  :width="96"
                  :height="96"
                  class="rounded-lg border border-gray-200 object-cover"
                />
                <div class="text-center">
                  <div class="text-sm font-medium text-gray-400">微信客服</div>
                </div>
              </div>

              <!-- 微信公众号 -->
              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-green-200 hover:bg-green-50/40 transition-colors">
                <a-image
                  src="https://oss.wsdns.cn/20260328/72d21dc85f1a47d8a8d6e1f0082b8ce8.jpg?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
                  alt="微信公众号二维码"
                  :width="96"
                  :height="96"
                  class="rounded-lg border border-gray-200 object-cover"
                />
                <div class="text-center">
                  <div class="text-sm font-medium text-gray-400">微信公众号</div>
                </div>
              </div>

              <!-- 小红书 -->
              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-red-200 hover:bg-red-50/40 transition-colors">
                <a-image
                  src="https://oss.wsdns.cn/20260328/fce4bf99a5844baca70f17d4af678293.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
                  alt="小红书二维码"
                  :width="96"
                  :height="96"
                  class="rounded-lg border border-gray-200 object-cover"
                />
                <div class="text-center">
                  <div class="text-sm font-medium text-gray-400">小红书</div>
                </div>
              </div>

              <!-- 企业微信 -->
              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-teal-200 hover:bg-teal-50/40 transition-colors">
                <a-image
                  src="https://oss.wsdns.cn/20260328/71d4100fea834953b13a1e11903e6e68.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
                  alt="企业微信二维码"
                  :width="96"
                  :height="96"
                  class="rounded-lg border border-gray-200 object-cover"
                />
                <div class="text-center">
                  <div class="text-sm font-medium text-gray-400">企业微信</div>
                </div>
              </div>
            </div>

<!--            <a-alert-->
<!--              show-icon-->
<!--              type="info"-->
<!--              class="mt-4"-->
<!--              message="如需更快响应，可添加客户经理微信直接沟通。"-->
<!--            />-->
          </a-card>


          <!-- 联系方式卡片 -->
          <a-card :bordered="false" class="shadow-sm">
            <template #title>
              <span class="font-semibold text-base">联系我们</span>
            </template>

            <!-- 工作时间 -->
            <div class="flex items-center gap-3 py-3 border-b border-gray-100">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-50 text-green-500 text-xl">🕘</div>
              <div>
                <div class="text-xs text-gray-400 mb-0.5">工作时间</div>
                <div class="text-sm text-gray-700">周一至周六 · 09:00 – 18:00</div>
              </div>
            </div>

            <!-- 邮箱 -->
            <div class="flex items-center gap-3 py-3 border-b border-gray-100">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-purple-50 text-purple-500 text-xl">✉️</div>
              <div>
                <div class="text-xs text-gray-400 mb-0.5">商务邮箱</div>
                <a href="mailto:hi@websoft.top" class="text-sm text-gray-700 hover:text-blue-600 transition-colors">170083662@qq.com</a>
              </div>
            </div>

            <!-- 地址 -->
<!--            <div class="flex items-center gap-3 py-3">-->
<!--              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-orange-50 text-orange-500 text-xl">📍</div>-->
<!--              <div>-->
<!--                <div class="text-xs text-gray-400 mb-0.5">公司地址</div>-->
<!--                <div class="text-sm text-gray-700">广东省广州市天河区</div>-->
<!--              </div>-->
<!--            </div>-->
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { usePageSeo } from '@/composables/usePageSeo'
import { submitContactLead } from '@/api/cms/cmsContactLead'

usePageSeo({
  title: '联系我们 - 预约演示 / 私有化部署 / 产品开通',
  description: '预约演示与咨询：SaaS 平台、私有化部署、模板/插件市场与支付即开通业务链路。',
  path: '/contact'
})

const form = reactive({
  name: '',
  phone: '',
  company: '',
  delivery: undefined as undefined | 'saas' | 'private' | 'hybrid',
  need: ''
})

const rules = {
  name: [{ required: true, message: '请填写姓名' }],
  phone: [
    { required: true, message: '请填写手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' }
  ],
  company: [{ required: true, message: '请填写公司/团队' }],
  need: [{ required: true, message: '请填写需求描述' }]
}

const submitting = ref(false)

async function onSubmit() {
  try {
    submitting.value = true
    await submitContactLead({
      ...form,
      source: typeof window !== 'undefined' ? window.location.href : '/contact'
    })
    message.success('提交成功！我们会在 1 个工作日内联系您 🎉')
    reset()
  }
  catch (err: any) {
    message.error(err?.message || '提交失败，请稍后重试或直接联系我们')
  }
  finally {
    submitting.value = false
  }
}

function reset() {
  form.name = ''
  form.phone = ''
  form.company = ''
  form.delivery = undefined
  form.need = ''
}
</script>

