<template>
  <div class="page-shell refined-page pricing-refined">
    <section class="subpage-hero pricing-hero-refined">
      <div class="container mx-auto px-4">
        <div class="subpage-hero__grid">
          <div data-aos="fade-up">
            <span class="subpage-kicker">PRICING</span>
            <h1>按诊所阶段选择套餐，而不是被功能清单淹没。</h1>
            <p>价格页专注回答三件事：当前阶段选哪档、月付年付差异、提交后如何进入演示或订购流程。</p>
          </div>
          <div class="pricing-switch-card" data-aos="fade-left">
            <span>计费周期</span>
            <div>
              <button :class="{ active: billingCycle === 'month' }" type="button" @click="billingCycle = 'month'">月付</button>
              <button :class="{ active: billingCycle === 'year' }" type="button" @click="billingCycle = 'year'">年付</button>
            </div>
            <p>年付适合已确定上线计划的诊所，便于统一部署和运营辅导。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="pricing-cards-v2">
          <article v-for="plan in plans" :key="plan.code" :class="{ recommended: plan.recommended }" data-aos="fade-up">
            <div class="pricing-card-head">
              <span>{{ plan.stage }}</span>
              <h2>{{ plan.name }}</h2>
              <p>{{ plan.description }}</p>
            </div>
            <div class="pricing-card-price">
              <strong>{{ formatPrice(plan) }}</strong><small>/{{ billingCycle === 'month' ? '月' : '年' }}</small>
            </div>
            <ul><li v-for="feature in plan.features" :key="feature.name"><span>{{ feature.name }}</span>{{ feature.value }}</li></ul>
            <button :class="plan.recommended ? 'primary-button' : 'secondary-button'" type="button" @click="selectPlan(plan)">选择{{ plan.name }}</button>
          </article>
        </div>
      </div>
    </section>

    <section class="editorial-section editorial-muted">
      <div class="container mx-auto px-4">
        <div class="feature-compare" data-aos="fade-up">
          <div>
            <span class="eyebrow">权益矩阵</span>
            <h2>核心能力怎么分布，一张表看清。</h2>
          </div>
          <div class="compare-table">
            <div class="compare-row compare-head"><span>能力</span><strong v-for="plan in plans" :key="plan.code">{{ plan.name }}</strong></div>
            <div v-for="row in compareRows" :key="row.name" class="compare-row"><span>{{ row.name }}</span><strong v-for="plan in plans" :key="plan.code">{{ row[plan.code] }}</strong></div>
          </div>
        </div>
      </div>
    </section>

    <section class="editorial-section">
      <div class="container mx-auto px-4">
        <div class="order-panel order-panel-v2" id="order-form" data-aos="fade-up">
          <div>
            <span class="eyebrow">订购与演示</span>
            <h2>留下诊所信息，我们把方案讲清楚。</h2>
            <p>当前选择：{{ selectedPlan.name }} · {{ billingCycle === 'month' ? '月付' : '年付' }}。提交后运营会联系你确认演示和支付方式。</p>
          </div>
          <form @submit.prevent="submitOrder">
            <label><span>诊所名称</span><input v-model="form.tenant_name" class="form-input" autocomplete="organization" /></label>
            <label><span>联系人</span><input v-model="form.contact_name" class="form-input" autocomplete="name" /></label>
            <label><span>手机号</span><input v-model="form.phone" class="form-input" type="tel" autocomplete="tel" /></label>
            <label><span>所在城市</span><input v-model="form.city" class="form-input" autocomplete="address-level2" /></label>
            <label class="full"><span>补充说明</span><textarea v-model="form.remark" class="form-input" rows="4" placeholder="门店数量、当前获客方式、期望上线时间"></textarea></label>
            <div class="form-actions full">
              <button class="primary-button" type="submit"><i class="fas fa-file-invoice"></i>创建订购订单</button>
              <button class="secondary-button" type="button" @click="submitLead"><i class="fas fa-headset"></i>只预约演示</button>
            </div>
          </form>
          <div v-if="message" class="pricing-message" aria-live="polite">{{ message }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { post } from '@/api/request'

const billingCycle = ref('month')
const message = ref('')
const plans = [
  { code: 'starter', stage: '单店起步', name: '基础版', description: '适合先把预约、线索和基础后台跑起来的单店诊所。', monthly_fee: 19900, yearly_fee: 199000, recommended: false, features: [{ name: '患者端', value: '基础预约与提醒' }, { name: 'PC后台', value: '线索与订单管理' }, { name: '账号数量', value: '5个员工账号' }] },
  { code: 'growth', stage: '增长运营', name: '增长版', description: '适合需要推广获客、医生协同和经营分析的成长型诊所。', monthly_fee: 39900, yearly_fee: 399000, recommended: true, features: [{ name: '四端小程序', value: '患者/医生/老板/推广员' }, { name: '经营看板', value: '转化、收入、复购分析' }, { name: '账号数量', value: '20个员工账号' }] },
  { code: 'enterprise', stage: '连锁预留', name: '连锁版', description: '适合多门店和需要深度配置的诊所集团。', monthly_fee: 89900, yearly_fee: 899000, recommended: false, features: [{ name: '多门店', value: '预留扩展与独立配置' }, { name: '专属服务', value: '部署辅导和运营顾问' }, { name: '账号数量', value: '不限账号数量' }] }
]
const compareRows = [
  { name: '患者端小程序', starter: '基础', growth: '完整', enterprise: '完整' },
  { name: '医生/老板/推广员端', starter: '—', growth: '包含', enterprise: '包含' },
  { name: '经营数据分析', starter: '基础', growth: '完整', enterprise: '定制' },
  { name: '多门店能力', starter: '—', growth: '预留', enterprise: '包含' },
  { name: '上线辅导', starter: '标准', growth: '增强', enterprise: '专属' }
]
const selectedPlan = ref(plans[1])
const form = ref({ tenant_name: '', contact_name: '', phone: '', city: '', remark: '' })
const selectedAmount = computed(() => billingCycle.value === 'year' ? selectedPlan.value.yearly_fee : selectedPlan.value.monthly_fee)
const formatPrice = (plan) => `¥${((billingCycle.value === 'year' ? plan.yearly_fee : plan.monthly_fee) / 100).toLocaleString('zh-CN')}`
const selectPlan = (plan) => { selectedPlan.value = plan; document.getElementById('order-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' }) }
const submitOrder = async () => { message.value = ''; await post('/orders', { ...form.value, plan_code: selectedPlan.value.code, billing_cycle: billingCycle.value, amount: selectedAmount.value }); message.value = '订购订单已提交，后台会生成待支付订单并联系你确认支付方式。' }
const submitLead = async () => { message.value = ''; await post('/leads', { name: form.value.contact_name, phone: form.value.phone, clinic_name: form.value.tenant_name, city: form.value.city, plan_code: selectedPlan.value.code, source_page: 'pricing', remark: form.value.remark }); message.value = '预约演示已提交，我们会尽快联系你。' }
</script>
