<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-row :gutter="16">
              <a-col :xs="24" :md="12">
                <a-form-item label="姓名" name="name">
                  <a-input v-model:value="form.name" placeholder="请填写联系人姓名" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="手机号" name="phone">
                  <a-input v-model:value="form.phone" placeholder="请填写手机号" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :xs="24" :md="12">
                <a-form-item label="公司/团队" name="company">
                  <a-input v-model:value="form.company" placeholder="请填写公司或团队名称" />
                </a-form-item>
              </a-col>
              <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-form-item label="需求描述" name="need">
              <a-textarea
                v-model:value="form.need"
                :rows="5"
                placeholder="例如：需要企业官网/电商/小程序；是否需要模板/插件市场；是否需要支付即开通等"
              />
            </a-form-item>

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

      <a-col :xs="24" :lg="10">
        <a-card title="咨询内容建议">
          <a-list :data-source="tips" size="small">
            <template #renderItem="{ item }">
              <a-list-item>{{ item }}</a-list-item>
            </template>
          </a-list>
          <div class="mt-6">
            <a-alert
              show-icon
              type="info"
              message="如需更快响应，可在需求描述中留下可联系时间段。"
            />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

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

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: '请填写手机号' }],
  company: [{ required: true, message: '请填写公司/团队' }],
  need: [{ required: true, message: '请填写需求描述' }]
}

const tips = [
  '你希望售卖哪些产品（官网/电商/小程序/门户等）？',
  '是否需要模板/插件市场（购买、授权、更新）？',
  '是否需要“支付即开通”（自动创建租户/初始化模块与数据）？',
  '交付方式：SaaS 或私有化部署？是否有合规要求？'
]

function onSubmit() {
  message.success('已提交，我们会尽快联系你（当前为演示表单，可接入你的工单/线索接口）。')
  reset()
}

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

