<template>
  <div class="job-detail-container bg-white m-4 p-6 rounded relative">
    <!-- 岗位信息块 -->
    <div class="section-block">
      <div class="section-title">
        岗位信息
      </div>
      
      <div class="form-list mt-6 pl-2 pr-6 max-w-5xl text-sm">
        <div class="row">
          <div class="label"><span class="text-red-500 mr-1">*</span>岗位名称</div>
          <div class="value">审计岗位A1</div>
        </div>

        <div class="row mt-4 items-start">
          <div class="label">公司名称</div>
          <div class="value">
            <div class="mb-2">XXXXX公司</div>
            <div class="text-gray-500 text-xs leading-relaxed">
              公司简介XXXXX公司简介XXXXX公司简介XXXXX公司简介XXXXX
            </div>
          </div>
        </div>

        <div class="row mt-4">
          <div class="label"><span class="text-red-500 mr-1">*</span>办公地址</div>
          <div class="value">上海市 <span class="ml-4">黄浦区</span> <div class="mt-2 text-gray-500">XXXX路123号</div></div>
        </div>

        <div class="row mt-4">
          <div class="label"><span class="text-red-500 mr-1">*</span>岗位类型</div>
          <div class="value">全职</div>
        </div>

        <div class="row mt-4">
          <div class="label">薪资</div>
          <div class="value">12K-13K</div>
        </div>

        <div class="row mt-4 items-center">
          <div class="label"><span class="text-red-500 mr-1">*</span>招聘人数</div>
          <div class="value flex items-center">
             <el-input v-model="form.recruitCount" style="width: 200px" readonly />
             <el-radio v-model="form.recruitLimit" label="limit" class="ml-4" disabled>不限</el-radio>
          </div>
        </div>

        <div class="row mt-4 items-center">
          <div class="label"><span class="text-red-500 mr-1">*</span>报名时间</div>
          <div class="value flex items-center">
             <el-radio v-model="form.signupTime" label="unlimit" disabled>不限</el-radio>
          </div>
        </div>

        <div class="row mt-4">
          <div class="label">急招</div>
          <div class="value">
             <el-radio v-model="form.urgent" label="no" disabled>否</el-radio>
          </div>
        </div>

        <div class="row mt-4">
          <div class="label">学校要求</div>
          <div class="value">不限</div>
        </div>

        <div class="row mt-4">
          <div class="label">性别</div>
          <div class="value">不限</div>
        </div>

        <div class="row mt-4">
          <div class="label">年级</div>
          <div class="value">不限</div>
        </div>

        <div class="row mt-4">
          <div class="label">到岗时间</div>
          <div class="value">不限</div>
        </div>

        <div class="row mt-4">
          <div class="label">实习时长</div>
          <div class="value">不限</div>
        </div>

        <div class="row mt-4">
          <div class="label">是否出差</div>
          <div class="value">
             <el-radio v-model="form.bizTrip" label="no" disabled>否</el-radio>
             <el-radio v-model="form.bizTrip" label="yes" disabled>是</el-radio>
          </div>
        </div>

        <div class="row mt-4">
          <div class="label">岗位标签</div>
          <div class="value flex gap-2">
            <el-tag type="info" size="small">标签一</el-tag>
            <el-tag type="info" size="small">标签二</el-tag>
          </div>
        </div>

        <div class="row mt-4 items-start">
          <div class="label">岗位描述</div>
          <div class="value leading-relaxed text-gray-700 max-w-3xl">
            职位描述：<br/>
            作为高级审计师，您将负责领导审计团队，确保审计项目的高效执行，并为客户提供专业的审计服务。您需要具备扎实的财务知识，熟悉美国通用会计准则（US GAAP），并能够独立处理复杂的审计任务。<br/><br/>
            任职要求：<br/>
            - 本科及以上学历，会计、财务或相关专业；<br/>
            - 至少3年以上审计工作经验，具备会计师事务所工作经验者优先；<br/>
            - 熟悉US GAAP，具备美国注册会计师（CPA）资格者优先；<br/>
            - 优秀的沟通能力和团队合作精神，能够有效领导团队；<br/>
            - 具备较强的分析和解决问题的能力，能够应对复杂的审计挑战；<br/>
            - 良好的英语沟通能力，能够与国外客户进行有效沟通。<br/><br/>
            我们提供：<br/>
            - 具有竞争力的薪酬和福利；<br/>
            - 良好的职业发展机会和培训体系；<br/>
            - 国际化的工作环境和团队合作氛围；
          </div>
        </div>
      </div>
    </div>

    <!-- 评测信息块 -->
    <div class="section-block mt-10">
      <div class="section-title">评测信息</div>
      
      <div class="form-list mt-6 pl-2 pr-6 text-sm">
        <div class="row mt-4">
          <div class="label"><span class="text-red-500 mr-1">*</span>岗位级别</div>
          <div class="value">A1</div>
        </div>

        <div class="row mt-6">
          <div class="label"><span class="text-red-500 mr-1">*</span>测评时长</div>
          <div class="value font-bold">60 <span class="font-normal text-xs ml-8 text-gray-500">分钟</span></div>
        </div>

        <div class="row mt-6 items-start">
          <div class="label"><span class="text-red-500 mr-1">*</span>及格线</div>
          <div class="value space-y-4 font-bold">
            <div class="flex items-center">
              <span class="w-28 text-sm">能力A（总分100）</span>
              <span class="ml-4">60<span class="font-normal text-xs ml-6 text-gray-500">分</span></span>
            </div>
            <div class="flex items-center">
              <span class="w-28 text-sm">能力C（总分100）</span>
              <span class="ml-4">60<span class="font-normal text-xs ml-6 text-gray-500">分</span></span>
            </div>
            <div class="flex items-center">
              <span class="w-28 text-sm">能力D（总分100）</span>
              <span class="ml-4">70<span class="font-normal text-xs ml-6 text-gray-500">分</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 审核信息块 -->
    <div class="section-block mt-10">
      <div class="section-title">审核信息</div>
      
      <div class="form-list mt-6 pl-2 pr-6 text-sm text-gray-800 space-y-5">
        <div>审核结果： 通过</div>
        <div class="flex items-center gap-6 py-2">
           <span>总价： 30</span>
           <span>定金： 30</span>
           <span>尾款： 4000</span>
        </div>
        <div>备注： 说明说明说明说明说明说明</div>
        <div>审核时间： 2019-09-09 10:40</div>
        <div>审核人： 李四</div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="fixed-bottom-btn hidden-print">
      <el-button @click="handleBack" class="px-8 shadow-sm border border-gray-300">返回</el-button>
    </div>

    <!-- 底部垫高预留位置给fixed返回按钮 -->
    <div class="h-24"></div>
  </div>
</template>

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

const router = useRouter();

const form = reactive({
  recruitCount: '123',
  recruitLimit: '',
  signupTime: 'unlimit',
  urgent: 'no',
  bizTrip: 'no'
});

const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.job-detail-container {
  min-height: calc(100vh - 84px);
  position: relative;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  background-color: #f7f8fa;
  padding: 12px 16px;
  border-left: 3px solid #165dff;
}

.form-list {
  .row {
    display: flex;
    align-items: center;
    color: #4e5969;
    
    .label {
      width: 120px;
      text-align: right;
      padding-right: 24px;
      font-size: 14px;
      flex-shrink: 0;
    }
    
    .value {
      flex: 1;
      color: #1d2129;
      font-size: 14px;
    }
  }
}

.fixed-bottom-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid #f2f3f5;
  border-radius: 0 0 4px 4px;
  z-index: 10;
}

:deep(.el-radio__input.is-disabled .el-radio__inner) {
  border-color: #165dff;
  background-color: #fff;
}
:deep(.el-radio__input.is-disabled.is-checked .el-radio__inner::after) {
  background-color: #165dff;
}
:deep(.el-radio__input.is-disabled + span.el-radio__label) {
  color: #606266;
}
</style>
