<template>
  <PageContainer>
    <div class="project-quotes-page">
      <PageHeader title="项目报价" description="选择报价类型并填写表单获取报价" />
      <div class="page-body">
        <section class="section">
          <div class="quotes-cards-grid">
            <!-- PV报价卡片 -->
            <div class="quote-card" :class="{ expanded: expandedCard === 'pv' }">
              <div class="quote-card-header" @click="toggleCard('pv')">
                <div class="quote-card-icon">📊</div>
                <div class="quote-card-title-wrap">
                  <h3>PV报价</h3>
                  <p>药物警戒服务报价咨询</p>
                </div>
                <span class="quote-card-arrow">{{ expandedCard === 'pv' ? '▼' : '▶' }}</span>
              </div>
              <div v-show="expandedCard === 'pv'" class="quote-card-body">
                <form class="quote-form" @submit.prevent="handlePvSubmit">
                  <div class="form-group">
                    <label for="pv-name">姓名 <span class="required">*</span></label>
                    <input id="pv-name" v-model="pvForm.name" type="text" placeholder="请输入姓名" required />
                  </div>
                  <div class="form-row">
                    <div class="form-group">
                      <label for="pv-email">电子邮箱 <span class="required">*</span></label>
                      <input id="pv-email" v-model="pvForm.email" type="email" placeholder="请输入电子邮箱" required />
                    </div>
                    <div class="form-group">
                      <label for="pv-phone">联系电话 <span class="required">*</span></label>
                      <input id="pv-phone" v-model="pvForm.phone" type="tel" placeholder="请输入联系电话" required />
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group">
                      <label for="pv-company">公司 <span class="required">*</span></label>
                      <input id="pv-company" v-model="pvForm.company" type="text" placeholder="请输入公司名称" required />
                    </div>
                    <div class="form-group">
                      <label for="pv-position">职位</label>
                      <input id="pv-position" v-model="pvForm.position" type="text" placeholder="请输入职位" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="pv-question">业务相关问题 <span class="required">*</span></label>
                    <textarea id="pv-question" v-model="pvForm.question" placeholder="请描述您的业务问题或需求" rows="4" required></textarea>
                  </div>
                  <div class="form-group">
                    <label for="pv-captcha">验证码 <span class="required">*</span></label>
                    <div class="captcha-row">
                      <input id="pv-captcha" v-model="pvForm.captcha" type="text" placeholder="请输入验证码" maxlength="4" required />
                      <span class="captcha-code">{{ captchaCode }}</span>
                      <button type="button" class="btn-captcha-refresh" @click="refreshCaptcha">刷新</button>
                    </div>
                  </div>
                  <div class="privacy-commitment">
                    <label class="privacy-checkbox-label">
                      <input type="checkbox" v-model="pvPrivacyAgreed" required />
                      <span>我已阅读并理解该承诺、声明</span>
                    </label>
                    <p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary" :disabled="pvSubmitting || !pvPrivacyAgreed">
                      {{ pvSubmitting ? '提交中...' : '提交' }}
                    </button>
                  </div>
                </form>
              </div>
            </div>

            <!-- 临床试验保险报价卡片 -->
            <div class="quote-card" :class="{ expanded: expandedCard === 'clinical' }">
              <div class="quote-card-header" @click="toggleCard('clinical')">
                <div class="quote-card-icon">🛡️</div>
                <div class="quote-card-title-wrap">
                  <h3>临床试验保险报价</h3>
                  <p>临床试验责任保险报价咨询</p>
                </div>
                <span class="quote-card-arrow">{{ expandedCard === 'clinical' ? '▼' : '▶' }}</span>
              </div>
              <div v-show="expandedCard === 'clinical'" class="quote-card-body">
                <form class="quote-form" @submit.prevent="handleClinicalSubmit">
                  <div class="form-group">
                    <label for="clinical-projectType">项目类型</label>
                    <select id="clinical-projectType" v-model="clinicalForm.projectType">
                      <option value="">请选择</option>
                      <option value="phase1">I期临床试验</option>
                      <option value="phase2">II期临床试验</option>
                      <option value="phase3">III期临床试验</option>
                      <option value="phase4">IV期临床试验</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="clinical-riskLevel">风险等级</label>
                    <select id="clinical-riskLevel" v-model="clinicalForm.riskLevel">
                      <option value="">请选择</option>
                      <option value="low">低风险</option>
                      <option value="medium">中风险</option>
                      <option value="high">高风险</option>
                    </select>
                  </div>
                  <div class="form-row">
                    <div class="form-group">
                      <label for="clinical-coverage">保障金额（元）</label>
                      <input id="clinical-coverage" v-model="clinicalForm.coverageAmount" type="number" placeholder="请输入保障金额" />
                    </div>
                    <div class="form-group">
                      <label for="clinical-participants">受试者人数</label>
                      <input id="clinical-participants" v-model="clinicalForm.participantCount" type="number" placeholder="请输入受试者人数" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="clinical-duration">试验周期（月）</label>
                    <input id="clinical-duration" v-model="clinicalForm.duration" type="number" placeholder="请输入试验周期" />
                  </div>
                  <div class="form-group">
                    <label for="clinical-remark">备注说明</label>
                    <textarea id="clinical-remark" v-model="clinicalForm.remark" placeholder="请输入其他需求说明" rows="3"></textarea>
                  </div>
                  <div class="privacy-commitment">
                    <label class="privacy-checkbox-label">
                      <input type="checkbox" v-model="clinicalPrivacyAgreed" required />
                      <span>我已阅读并理解该承诺、声明</span>
                    </label>
                    <p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary" :disabled="clinicalSubmitting || !clinicalPrivacyAgreed">
                      {{ clinicalSubmitting ? '提交中...' : '提交' }}
                    </button>
                  </div>
                </form>
              </div>
            </div>

            <!-- 产品责任保险报价卡片 -->
            <div class="quote-card" :class="{ expanded: expandedCard === 'product' }">
              <div class="quote-card-header" @click="toggleCard('product')">
                <div class="quote-card-icon">💼</div>
                <div class="quote-card-title-wrap">
                  <h3>产品责任保险报价</h3>
                  <p>上市后产品责任保险报价咨询</p>
                </div>
                <span class="quote-card-arrow">{{ expandedCard === 'product' ? '▼' : '▶' }}</span>
              </div>
              <div v-show="expandedCard === 'product'" class="quote-card-body">
                <form class="quote-form" @submit.prevent="handleProductSubmit">
                  <div class="form-group">
                    <label for="product-productName">产品名称</label>
                    <input id="product-productName" v-model="productForm.productName" type="text" placeholder="请输入产品名称" />
                  </div>
                  <div class="form-group">
                    <label for="product-productType">产品类型</label>
                    <select id="product-productType" v-model="productForm.productType">
                      <option value="">请选择</option>
                      <option value="drug">药品</option>
                      <option value="device">医疗器械</option>
                      <option value="other">其他</option>
                    </select>
                  </div>
                  <div class="form-row">
                    <div class="form-group">
                      <label for="product-coverage">保障金额（元）</label>
                      <input id="product-coverage" v-model="productForm.coverageAmount" type="number" placeholder="请输入保障金额" />
                    </div>
                    <div class="form-group">
                      <label for="product-sales">年销售额（元）</label>
                      <input id="product-sales" v-model="productForm.annualSales" type="number" placeholder="请输入年销售额" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="product-remark">备注说明</label>
                    <textarea id="product-remark" v-model="productForm.remark" placeholder="请输入其他需求说明" rows="3"></textarea>
                  </div>
                  <div class="privacy-commitment">
                    <label class="privacy-checkbox-label">
                      <input type="checkbox" v-model="productPrivacyAgreed" required />
                      <span>我已阅读并理解该承诺、声明</span>
                    </label>
                    <p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
                  </div>
                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary" :disabled="productSubmitting || !productPrivacyAgreed">
                      {{ productSubmitting ? '提交中...' : '提交' }}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import PageHeader from '@/components/PageHeader.vue'

type ExpandedCard = 'pv' | 'clinical' | 'product' | null

const expandedCard = ref<ExpandedCard>('pv')

const pvForm = ref({
  name: '',
  email: '',
  phone: '',
  company: '',
  position: '',
  question: '',
  captcha: ''
})

const clinicalForm = ref({
  projectType: '',
  riskLevel: '',
  coverageAmount: '',
  participantCount: '',
  duration: '',
  remark: ''
})

const productForm = ref({
  productName: '',
  productType: '',
  coverageAmount: '',
  annualSales: '',
  remark: ''
})

const captchaCode = ref('')
const pvPrivacyAgreed = ref(false)
const clinicalPrivacyAgreed = ref(false)
const productPrivacyAgreed = ref(false)
const pvSubmitting = ref(false)
const clinicalSubmitting = ref(false)
const productSubmitting = ref(false)

function generateCaptcha() {
  captchaCode.value = Math.random().toString(36).slice(2, 6).toUpperCase()
}

function refreshCaptcha() {
  generateCaptcha()
}

onMounted(() => {
  generateCaptcha()
})

function toggleCard(card: ExpandedCard) {
  expandedCard.value = expandedCard.value === card ? null : card
}

async function handlePvSubmit() {
  if (pvForm.value.captcha.toUpperCase() !== captchaCode.value) {
    alert('验证码错误，请重新输入')
    refreshCaptcha()
    return
  }
  pvSubmitting.value = true
  try {
    await new Promise(r => setTimeout(r, 800))
    alert('PV报价提交成功！我们会尽快与您联系。')
    pvForm.value = { name: '', email: '', phone: '', company: '', position: '', question: '', captcha: '' }
    pvPrivacyAgreed.value = false
    refreshCaptcha()
  } finally {
    pvSubmitting.value = false
  }
}

async function handleClinicalSubmit() {
  clinicalSubmitting.value = true
  try {
    await new Promise(r => setTimeout(r, 800))
    alert('临床试验保险报价提交成功！我们会尽快与您联系。')
    clinicalForm.value = { projectType: '', riskLevel: '', coverageAmount: '', participantCount: '', duration: '', remark: '' }
    clinicalPrivacyAgreed.value = false
  } finally {
    clinicalSubmitting.value = false
  }
}

async function handleProductSubmit() {
  productSubmitting.value = true
  try {
    await new Promise(r => setTimeout(r, 800))
    alert('产品责任保险报价提交成功！我们会尽快与您联系。')
    productForm.value = { productName: '', productType: '', coverageAmount: '', annualSales: '', remark: '' }
    productPrivacyAgreed.value = false
  } finally {
    productSubmitting.value = false
  }
}
</script>

<style scoped>
@import '@/pages/dashboard/ProjectQuotes.css';
</style>
