<template>
  <PageContainer>
    <div class="solutions-page solutions-clinical-insurance">
      <PageHeader title="临床保险" description="为临床试验提供全面的保险保障服务" />
      <div class="page-body">
      

        <!-- GCP 中的内容 -->
        <section class="section gcp-section">
          <div class="container">
            <h2 class="section-title">GCP要求申办者提供保险或保证</h2>
            <div class="gcp-card card">
              <p class="gcp-source">《药物临床试验质量管理规范》第三十九条</p>
              <p class="gcp-content">
                （一）申办者应当向研究者和临床试验机构提供与临床试验相关的法律上、经济上的保险或者保证，并与临床试验的风险性质和风险程度相适应。但不包括研究者和临床试验机构自身的过失所致的损害。
              </p>
            </div>
          </div>
        </section>

        <!-- 清晰的保险与保证越来越重要 - 轮播 -->
        <section class="section carousel-section">
          <div class="container">
            <h2 class="section-title">清晰的保险与保证越来越重要</h2>
            <div class="company-carousel-container">
              <div class="company-carousel-wrapper">
                <div
                  class="company-carousel-track"
                  :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
                >
                  <div
                    v-for="(item, index) in companySummaries"
                    :key="index"
                    class="company-carousel-slide"
                  >
                    <div class="company-summary-card">
                      <h4 class="company-name">{{ item.company }}</h4>
                      <p class="company-summary">{{ item.summary }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-controls">
                <button
                  type="button"
                  class="carousel-btn carousel-btn-prev"
                  aria-label="上一项"
                  @click="prevSlide"
                />
                <div class="carousel-indicators">
                  <button
                    v-for="(_, index) in companySummaries"
                    :key="index"
                    type="button"
                    :class="['carousel-indicator', { active: index === currentSlide }]"
                    :aria-label="`第${index + 1}项`"
                    @click="currentSlide = index"
                  />
                </div>
                <button
                  type="button"
                  class="carousel-btn carousel-btn-next"
                  aria-label="下一项"
                  @click="nextSlide"
                />
              </div>
            </div>
          </div>
        </section>
          <section class="section">
          <div class="container">
            <div class="solutions-content">
              <div class="solution-item">
                <h3>基础保障</h3>
                <p>满足基础合规要求的保险保障方案</p>
              </div>
              <div class="solution-item">
                <h3>全面保障</h3>
                <p>扩大保障范围、优化理赔流程与医疗直付等服务</p>
              </div>
              <div class="solution-item">
                <h3>风险减量</h3>
                <p>提供风险减量相关服务，降低风险发生概率</p>
              </div>
            </div>
          </div>
        </section>
        
      </div>

    </div>
  </PageContainer>
</template>

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

const currentSlide = ref(0)

const companySummaries = [
  {
    company: 'XX创新药企章总',
    summary: '所有的临床试验都需要购买保险，以前我们对临床试验责任保险关注不多，也没发生过赔偿的案例，保险只是为伦理审批必须买；但随着创新药越来越多，我们也常常遇到参加试验后额外的治疗费用如何获得理赔？肿瘤患者死亡了，需要付赔偿金吗？如果我们不及时处理，研究中心可能会暂停我们的项目。'
  },
  {
    company: 'XX药物上市许可持有人 质量部 李经理',
    summary: '监管机构要求企业需要有风险赔偿能力，但如何才能算有风险赔偿能力？一个患者因不良反应要求赔偿，应该如何处理？如何保证企业合规、符合监管要求的风险赔偿能力？'
  },
  {
    company: 'XX疫苗企业 药物警戒负责人 王总',
    summary: '疫苗的赔偿责任比药品清晰，也需要有鉴定，但这些事件处理过程往往需要大量的人力、时间。我们很需要有独立第三方协助处理此类的患者纠纷。'
  },
  {
    company: '上海XX医院',
    summary: '我们希望申办者能配置专用账户，用于患者的紧急救治，比如患者用药后发生AE/SAE需要及时治疗。需要每个申办者向本院专用账号存入资金，作为及时救治的资金保证。'
  }
]

function prevSlide() {
  currentSlide.value = currentSlide.value === 0 ? companySummaries.length - 1 : currentSlide.value - 1
}

function nextSlide() {
  currentSlide.value = currentSlide.value === companySummaries.length - 1 ? 0 : currentSlide.value + 1
}
</script>

<style scoped>
@import '@/pages/Solutions.css';
@import '@/pages/SolutionsClinicalInsurance.css';
</style>
