<template>
  <div class="app-container participant-detail-page">
    <div class="document-wrapper">
      <div class="document-content">
        <div class="clause-section">
          <div class="clause-title">一、服务范围与信息传递免责</div>
          <div class="clause-item">
            <span class="item-index">1.</span>
            <div class="item-text">甲方仅负责将目标企业的招聘需求、岗位信息及 Offer 核心条款（如岗位名称、薪酬范围、报到时间等）如实传递给乙方。甲方不对目标企业提供信息的完整性、准确性及后续变更承担保证责任。若目标企业在 Offer 发出后调整薪酬、岗位职责、福利政策等内容，甲方应及时通知乙方，但不承担因该等调整导致乙方收益受损的赔偿责任。</div>
          </div>
          <div class="clause-item">
            <span class="item-index">2.</span>
            <div class="item-text">甲方基于行业经验为乙方提供的求职建议（如面试技巧、薪资谈判参考等），仅为参考性意见，不构成对乙方最终决定的强制要求。乙方应结合自身情况独立判断。甲方不对该等建议的最终效果承担责任。</div>
          </div>
        </div>

        <div class="clause-section">
          <div class="clause-title">二、Offer 效力与履行免责</div>
          <div class="clause-item">
            <span class="item-index">1.</span>
            <div class="item-text">目标企业发出的 Offer 效力及履行主体为目标企业与乙方，甲方非 Offer 的签订方，不参与乙方与目标企业之间劳动合同的签订、履行及后续纠纷处理。若目标企业出现 Offer 撤销、逾期未签订劳动合同、未按 Offer 约定提供工作条件等情况，乙方应直接与目标企业协商或通过法律途径解决。甲方不承担由此产生的违约责任（如乙方因拒绝其他机会导致的损失、交通住宿等费用损失）。</div>
          </div>
          <div class="clause-item">
            <span class="item-index">2.</span>
            <div class="item-text">乙方确认，在接收 Offer 前已充分了解目标企业的经营状况、行业风险、岗位要求及工作地点等关键信息（包括但不限于通过甲方提供的资料、自行查询或与目标企业沟通等方式），并自愿接受 Offer 相关条款。若乙方因自身原因（如个人职业规划变更、家庭原因、接受其他企业 Offer 等）拒绝履行已确认的 Offer，导致目标企业或甲方产生损失（如目标企业重新招聘的成本、甲方服务信誉影响等），乙方应承担相应赔偿责任，甲方有权追偿。</div>
          </div>
        </div>

        <div class="clause-section">
          <div class="clause-title">三、信息保密与责任划分</div>
          <div class="clause-item">
            <span class="item-index">1.</span>
            <div class="item-text">甲方对乙方提供的个人信息（如简历、身份证信息、薪酬历史等）负有保密义务，仅用于本次猎头服务及与目标企业的必要沟通，未经乙方书面同意不得向第三方披露（法律法规要求披露的除外）。若因甲方故意或重大过失导致乙方信息泄露，甲方应承担相应法律责任；若因不可抗力、第三方黑客攻击或乙方自身原因导致信息泄露，甲方不承担责任。</div>
          </div>
          <div class="clause-item">
            <span class="item-index">2.</span>
            <div class="item-text">乙方应对甲方提供的目标企业信息、服务流程及本协议内容予以保密，不得将甲方推荐的岗位信息、目标企业招聘细节泄露给其他猎头机构或无关第三方，若因此给甲方或目标企业造成损失，乙方应承担相应赔偿责任。</div>
          </div>
        </div>

        <div class="signature-section">
          <div class="signature-name">张三</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
// 可以在这里获取传入的查询参数，如 id 等去获取详细合同信息
// const id = route.query.id;
</script>

<style scoped lang="scss">
.participant-detail-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px); /* 假设有顶部导航栏 */
  display: flex;
  justify-content: center;
}

.document-wrapper {
  background-color: #fff;
  width: 100%;
  max-width: 1200px;
  min-height: 800px;
  padding: 60px 80px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.document-content {
  color: #333;
  line-height: 1.8;
  font-size: 14px;
}

.clause-section {
  margin-bottom: 24px;
}

.clause-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
}

.clause-item {
  display: flex;
  margin-bottom: 8px;
  
  .item-index {
    color: #409eff; /* 序号使用原图那种蓝色 */
    font-weight: bold;
    margin-right: 8px;
    min-width: 16px;
  }
  
  .item-text {
    flex: 1;
    text-align: justify;
  }
}

.signature-section {
  margin-top: 100px;
  text-align: right;
  padding-right: 40px;
  
  .signature-name {
    font-size: 32px;
    font-family: "KaiTi", "楷体", serif;
    color: #000;
  }
}
</style>
