<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">
      诚邀区域合作伙伴与渠道经销商，共同拓展市场。我们提供稳定供应链、合规资质支持与运营赋能，
      帮助你更快落地、更稳增长。
    </a-typography-paragraph>

    <a-row :gutter="[24, 24]">
      <a-col :xs="24" :lg="14">
        <a-card title="合作优势">
          <a-list size="small" :data-source="advantages">
            <template #renderItem="{ item }">
              <a-list-item class="list-item">{{ item }}</a-list-item>
            </template>
          </a-list>
        </a-card>

        <a-card class="mt-6" title="合作模式">
          <a-row :gutter="[16, 16]">
            <a-col v-for="mode in modes" :key="mode.title" :xs="24" :md="8">
              <div class="mode-card">
                <div class="mode-title">{{ mode.title }}</div>
                <div class="mode-desc">{{ mode.desc }}</div>
              </div>
            </a-col>
          </a-row>
        </a-card>

        <a-card class="mt-6" title="扶持政策（示例）">
          <a-row :gutter="[16, 16]">
            <a-col v-for="s in supports" :key="s.title" :xs="24" :md="12">
              <a-statistic :title="s.title" :value="s.value" />
              <div class="support-desc">{{ s.desc }}</div>
            </a-col>
          </a-row>
          <a-alert
            class="mt-4"
            show-icon
            type="info"
            message="实际政策以对接沟通为准，我们会根据城市、渠道资源与团队情况给出更匹配的方案。"
          />
        </a-card>

        <a-card class="mt-6" title="加盟流程">
          <a-steps :current="0" size="small" direction="vertical">
            <a-step title="提交意向" description="填写基本信息、合作类型与所在区域" />
            <a-step title="电话沟通" description="了解资源与目标，确认合作方向" />
            <a-step title="资质审核" description="身份证明/营业执照/场地等（按合作类型）" />
            <a-step title="签约与培训" description="合同签署、产品与运营培训" />
            <a-step title="开业/启动" description="物料支持、营销支持与持续复盘" />
          </a-steps>
        </a-card>

        <a-card class="mt-6" title="常见问题">
          <a-collapse accordion>
            <a-collapse-panel key="q1" header="需要门店吗？">
              <a-typography-paragraph class="!mb-0">
                不强制。可按你的资源选择渠道分销、团购/企业客户、或门店零售等模式，我们会给出落地建议。
              </a-typography-paragraph>
            </a-collapse-panel>
            <a-collapse-panel key="q2" header="是否有区域保护？">
              <a-typography-paragraph class="!mb-0">
                可根据区域与合作层级协商设置，原则上以“可持续经营、避免恶性竞争”为目标。
              </a-typography-paragraph>
            </a-collapse-panel>
            <a-collapse-panel key="q3" header="多久可以启动？">
              <a-typography-paragraph class="!mb-0">
                资料齐全且沟通确认后，一般 3-7 个工作日可完成签约与基础培训，具体以项目复杂度为准。
              </a-typography-paragraph>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="10">
        <a-card title="加盟申请">
          <a-form ref="formRef" 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="city">
                  <a-input v-model:value="form.city" placeholder="例如：南宁/柳州/桂林" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="合作类型" name="cooperationType">
                  <a-select v-model:value="form.cooperationType" placeholder="请选择">
                    <a-select-option value="area">区域合伙人</a-select-option>
                    <a-select-option value="dealer">渠道经销</a-select-option>
                    <a-select-option value="group">团购/企业客户</a-select-option>
                    <a-select-option value="store">门店加盟</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :xs="24" :md="12">
                <a-form-item label="从业经验" name="experience">
                  <a-select v-model:value="form.experience" placeholder="请选择">
                    <a-select-option value="0">无</a-select-option>
                    <a-select-option value="1-3">1-3年</a-select-option>
                    <a-select-option value="3-5">3-5年</a-select-option>
                    <a-select-option value="5+">5年以上</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="预算范围" name="budget">
                  <a-select v-model:value="form.budget" placeholder="请选择（可选）" allow-clear>
                    <a-select-option value="lt3">3万以内</a-select-option>
                    <a-select-option value="3-10">3-10万</a-select-option>
                    <a-select-option value="10-30">10-30万</a-select-option>
                    <a-select-option value="gt30">30万以上</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" :loading="submitting">提交申请</a-button>
              <a-button :disabled="submitting" @click="reset">重置</a-button>
            </a-space>
          </a-form>
        </a-card>

        <a-card class="mt-6" title="填写建议">
          <a-list size="small" :data-source="tips">
            <template #renderItem="{ item }">
              <a-list-item>{{ item }}</a-list-item>
            </template>
          </a-list>
          <a-alert class="mt-4" show-icon type="success" message="我们将尽快与你联系沟通合作细节。" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import { addCmsOrder } from '@/api/cms/cmsOrder'
import { usePageSeo } from '@/composables/usePageSeo'
import { COMPANY } from '@/config/company'

usePageSeo({
  title: '招商加盟',
  description: `${COMPANY.projectName} 招商加盟：区域合伙人、渠道经销、团购/企业客户与门店合作。`,
  path: '/join'
})

const advantages = [
  '合规资质与经营范围清晰，合作沟通更高效',
  '稳定供货与品控管理，支持标准化交付',
  '市场物料与活动打法沉淀，降低试错成本',
  '培训与运营辅导，帮助门店/渠道快速起量',
  '数字化工具支持（选品、下单、对账等）',
  '持续复盘与长期支持，陪跑成长'
]

const modes = [
  { title: '区域合伙人', desc: '负责区域招商与渠道拓展，获取更高合作权益与支持。' },
  { title: '渠道经销', desc: '适合批发商/渠道商/社区团购，走量稳定、周转快。' },
  { title: '门店加盟', desc: '适合零售门店，提供选品建议、陈列物料与运营培训。' }
]

const supports = [
  { title: '培训赋能', value: '1v1', desc: '产品知识/动销话术/活动策略与执行清单' },
  { title: '选品建议', value: '定制', desc: '按城市与客群定制类目结构与爆品组合' },
  { title: '运营陪跑', value: '持续', desc: '启动期跟进复盘，关键节点协助优化' },
  { title: '物料支持', value: '可配', desc: '海报、价签、活动页等物料统一输出' }
]

const tips = [
  '请尽量写清楚：所在城市/可覆盖区域。',
  '说明你的资源：门店数量、渠道类型、团购社群、企业客户等。',
  '如果方便，可补充预估销量/团队人数/启动时间。'
]

const form = reactive({
  name: '',
  phone: '',
  city: '',
  cooperationType: undefined as undefined | 'area' | 'dealer' | 'group' | 'store',
  experience: undefined as undefined | '0' | '1-3' | '3-5' | '5+',
  budget: undefined as undefined | 'lt3' | '3-10' | '10-30' | 'gt30',
  need: ''
})

const formRef = ref<FormInstance>()
const submitting = ref(false)

const rules = {
  name: [{ required: true, message: '请填写姓名' }],
  phone: [{ required: true, message: '请填写手机号' }],
  city: [{ required: true, message: '请填写意向城市' }],
  cooperationType: [{ required: true, message: '请选择合作类型' }],
  experience: [{ required: true, message: '请选择从业经验' }],
  need: [{ required: true, message: '请填写资源/诉求说明' }]
}

function labelCooperationType(value?: typeof form.cooperationType) {
  if (value === 'area') return '区域合伙人'
  if (value === 'dealer') return '渠道经销'
  if (value === 'group') return '团购/企业客户'
  if (value === 'store') return '门店加盟'
  return '未选择'
}

function labelBudget(value?: typeof form.budget) {
  if (value === 'lt3') return '3万以内'
  if (value === '3-10') return '3-10万'
  if (value === '10-30') return '10-30万'
  if (value === 'gt30') return '30万以上'
  return '未填写'
}

async function onSubmit() {
  if (submitting.value) return
  submitting.value = true
  try {
    const content = [
      `姓名：${form.name || '-'}`,
      `手机号：${form.phone || '-'}`,
      `意向城市：${form.city || '-'}`,
      `合作类型：${labelCooperationType(form.cooperationType)}`,
      `从业经验：${form.experience || '-'}`,
      `预算范围：${labelBudget(form.budget)}`,
      '',
      '资源/诉求说明：',
      form.need || '-'
    ].join('\n')

    const resMessage = await addCmsOrder({
      title: `招商加盟 - ${form.city || ''}${form.name ? `-${form.name}` : ''}`.trim(),
      type: 2, // 2 留言
      channel: 0, // 0 网站
      realName: form.name,
      phone: form.phone,
      content
    })

    message.success(resMessage || '已提交，我们会尽快与你联系。')
    reset()
  } catch (err: unknown) {
    const errMsg = err instanceof Error ? err.message : '提交失败，请稍后重试。'
    message.error(errMsg)
  } finally {
    submitting.value = false
  }
}

function reset() {
  formRef.value?.resetFields()
}
</script>

<style scoped>
.list-item {
  padding: 6px 0;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.6;
}

.mode-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 14px;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
}

.mode-title {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
}

.mode-desc {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.6;
}

.support-desc {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.6;
}
</style>
