kyj-yanglao-web-new/src/views/elderly/contracts/components/FirstServiceProjectConfirmationBody.vue

<script setup lang="ts">
import { reactive, watch } from 'vue'
import FieldItem from './FieldItem.vue'
import SignatureItem from './SignatureItem.vue'

interface ServiceItem {
  selected: string[]
  other: string
  remark?: string
}

interface FormData {
  partyBName?: string
  gender?: string
  roomNo?: string
  bedNo?: string
  assessDate?: string
  careLevel?: string
  agentName?: string
  emergencyContact?: string
  year?: string
  month?: string
  day?: string
  signDate?: string
  basicServices?: Record<string, ServiceItem>
  lifeCare?: Record<string, any>
  elderlyNursing?: Record<string, any>
  partyBSign?: string
  partyCSign?: string
}

const props = withDefaults(defineProps<{
  isTextMode?: boolean
  modelValue?: FormData
}>(), {
  isTextMode: false,
  modelValue: () => ({})
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: FormData): void
}>()

const defaultBasic = (): ServiceItem => ({ selected: [], other: '', remark: '' })

const form = reactive<FormData>({
  partyBName: '',
  gender: '',
  roomNo: '',
  bedNo: '',
  assessDate: '',
  careLevel: '',
  agentName: '',
  emergencyContact: '',
  year: '',
  month: '',
  day: '',
  signDate: '',
  basicServices: {
    consultation: defaultBasic(),
    mealService: defaultBasic(),
    deliveryService: defaultBasic(),
    medicalService: defaultBasic(),
    chronicManagement: defaultBasic(),
    accompanyMedical: defaultBasic(),
    mentalSupport: defaultBasic(),
    safetyProtection: defaultBasic(),
    recreation: defaultBasic(),
    education: defaultBasic(),
    commission: defaultBasic(),
    sanitation: defaultBasic(),
    laundry: defaultBasic(),
    shopping: defaultBasic(),
    maintenance: defaultBasic(),
    communication: defaultBasic(),
    transportation: defaultBasic(),
    infrastructure: defaultBasic(),
  },
  lifeCare: {
    personalHygiene: { selected: [], other: '' },
    dressing: { selected: [], other: '' },
    grooming: { selected: [], other: '' },
    dietaryCare: { selected: [], other: '' },
    toiletCare: { selected: [], other: '' },
    oralCare: { selected: [], other: '' },
    skinCleaning: { selected: [], other: '' },
    positionTransfer: { selected: [], other: '' },
    excretionCare: { selected: [], other: '' },
    skinCare: { selected: [], other: '' },
    other: ''
  },
  elderlyNursing: {
    comprehensiveAssessment: false,
    chronicDisease: { selected: [], other: '' },
    diseaseNursing: { selected: [], other: '' },
    nursingTech: { selected: [], other: '' },
    healthGuidance: false,
    drugManagement: false,
    other: '',
    assistMedicalNursing: { selected: [], other: '' },
    rehabilitation: { selected: [], other: '' },
    palliativeCare: { selected: [], other: '' },
    otherAgreed: ''
  },
  partyBSign: '',
  partyCSign: ''
})

watch(() => props.modelValue, (val) => {
  if (!val) return
  const newVal = JSON.parse(JSON.stringify(val))
  const mergedBasic = { ...form.basicServices }
  const mergedLife = { ...form.lifeCare }
  const mergedElderly = { ...form.elderlyNursing }
  if (newVal.basicServices) {
    Object.keys(newVal.basicServices).forEach(key => {
      if (mergedBasic[key] && typeof mergedBasic[key] === 'object' && !Array.isArray(mergedBasic[key])) {
        mergedBasic[key] = { ...mergedBasic[key], ...newVal.basicServices[key] }
      } else {
        mergedBasic[key] = newVal.basicServices[key]
      }
    })
  }
  if (newVal.lifeCare) {
    Object.keys(newVal.lifeCare).forEach(key => {
      if (mergedLife[key] && typeof mergedLife[key] === 'object' && !Array.isArray(mergedLife[key])) {
        mergedLife[key] = { ...mergedLife[key], ...newVal.lifeCare[key] }
      } else {
        mergedLife[key] = newVal.lifeCare[key]
      }
    })
  }
  if (newVal.elderlyNursing) {
    Object.keys(newVal.elderlyNursing).forEach(key => {
      if (mergedElderly[key] && typeof mergedElderly[key] === 'object' && !Array.isArray(mergedElderly[key])) {
        mergedElderly[key] = { ...mergedElderly[key], ...newVal.elderlyNursing[key] }
      } else {
        mergedElderly[key] = newVal.elderlyNursing[key]
      }
    })
  }
  Object.assign(form, newVal, {
    basicServices: mergedBasic,
    lifeCare: mergedLife,
    elderlyNursing: mergedElderly
  })
  if (!form.signDate && form.year && form.month && form.day) {
    form.signDate = `${form.year}年${form.month}月${form.day}日`
  } else if (form.signDate) {
    const m = form.signDate.match(/(\d{4})[年/\-.](\d{1,2})[月/\-.](\d{1,2})/)
    if (m) {
      form.year = m[1]
      form.month = m[2]
      form.day = m[3]
    }
  }
}, { immediate: true, deep: true })

const updateForm = () => {
  if (form.signDate) {
    const m = form.signDate.match(/(\d{4})[年/\-.](\d{1,2})[月/\-.](\d{1,2})/)
    if (m) {
      form.year = m[1]
      form.month = m[2]
      form.day = m[3]
    }
  }
  emit('update:modelValue', JSON.parse(JSON.stringify(form)))
}

const toggleBasic = (key: string, option: string) => {
  const item = form.basicServices![key]
  const idx = item.selected.indexOf(option)
  if (idx > -1) item.selected.splice(idx, 1)
  else item.selected.push(option)
  updateForm()
}

const toggleLife = (key: string, option: string) => {
  const item = form.lifeCare![key]
  const idx = item.selected.indexOf(option)
  if (idx > -1) item.selected.splice(idx, 1)
  else item.selected.push(option)
  updateForm()
}

const toggleElderly = (key: string, option: string) => {
  const item = form.elderlyNursing![key]
  const idx = item.selected.indexOf(option)
  if (idx > -1) item.selected.splice(idx, 1)
  else item.selected.push(option)
  updateForm()
}

const isChecked = (obj: any, option: string) => (obj?.selected || []).includes(option)

const basicServices = [
  { name: '咨询服务', key: 'consultation', options: ['入住咨询', '法律咨询', '心理咨询', '医疗咨询', '护理咨询', '康复咨询', '教育咨询', '服务咨询'], other: '其他咨询' },
  { name: '膳食服务', key: 'mealService', options: ['食谱定制', '营养配餐', '食品加工与制作'], other: '其他膳食服务' },
  { name: '送餐服务', key: 'deliveryService', options: ['定期订餐', '按时送餐'], other: '其他送餐服务' },
  { name: '医疗服务', key: 'medicalService', options: ['疾病诊治', '健康指导', '预防保健、体检', '药事管理', '医疗相关风险管理及告知', '转诊转院'], other: '其他医疗服务', sub: { name: '慢病管理', key: 'chronicManagement', options: ['慢病监测', '健康咨询', '用药指导'], other: '其他慢病管理服务' } },
  { name: '陪同就医服务', key: 'accompanyMedical', options: ['陪同指定医院就医', '协助挂号', '协助完成各项检查', '协助取药'], other: '其他陪同就医服务' },
  { name: '心理/精神支持服务', key: 'mentalSupport', options: ['情绪疏导', '心理支持', '危机干预', '老年人家属心理支持服务'], other: '其他心理/精神支持服务' },
  { name: '安全保护服务', key: 'safetyProtection', options: ['安全风险评估', '安全教育', '提供安全设备设置'], other: '其他安全保护服务' },
  { name: '休闲娱乐服务', key: 'recreation', options: ['文体活动', '棋牌娱乐', '健身活动', '游艺活动', '影视观看服务', '参观游览'], other: '其他娱乐休闲服务' },
  { name: '教育服务', key: 'education', options: ['读书', '讲座', '老年大学'], other: '其他教育服务' },
  { name: '委托服务', key: 'commission', options: ['代读、代写书信', '代领物品', '代缴费用'], other: '其他委托服务' },
  { name: '环境卫生服务', key: 'sanitation', options: ['机构公共区域清洁', '老年人居室清洁'], other: '其他环境卫生服务', extra: ['频次', '频次'] },
  { name: '洗涤服务', key: 'laundry', options: ['老年人衣物洗涤', '老年人居室布草洗涤'], other: '其他洗涤服务', extra: ['频次', '频次'] },
  { name: '购物服务', key: 'shopping', options: ['代购日常生活物品', '陪同外出购物', '协助老年人使用网络购物'], other: '其他购物服务' },
  { name: '维修服务', key: 'maintenance', options: ['公共设施设备维修', '老年人居室设备维修'], other: '其他维修服务' },
  { name: '通信服务', key: 'communication', options: ['提供电话设备', '提供互联网上网服务'], other: '其他通信服务' },
  { name: '交通服务', key: 'transportation', options: ['提供交通工具运送老年人', '联系交通工具运送老年人'], other: '其他交通服务' },
  { name: '基础设施服务', key: 'infrastructure', options: ['提供居室内基本用电用水服务', '提供有线电视收视服务', '提供空调服务', '提供冬季取暖服务', '提供生活饮用水服务', '呼叫应答服务'], other: '其他基础设施服务' },
]

const lifeCareItems = [
  { name: '个人清洁卫生服务', key: 'personalHygiene', options: ['洗脸', '洗手', '洗头', '洗脚', '按摩', '拍背', '协助整理个人物品', '清洁整理床铺', '更换床单位'], other: '其他个人清洁卫生服务' },
  { name: '穿衣服服务', key: 'dressing', options: ['更换上衣、裤子', '协助穿衣', '整理衣物'], other: '其他穿衣服务' },
  { name: '修饰服务', key: 'grooming', options: ['梳头', '剃须', '剪指/趾甲', '化妆'], other: '其他修饰服务' },
  { name: '饮食照料服务', key: 'dietaryCare', options: ['经口喂食或水', '鼻胃管喂食或水', '协助用膳'], other: '其他饮食服务' },
  { name: '如厕照料服务', key: 'toiletCare', options: ['定时提醒如厕', '使用便盆', '使用尿壶', '协助入厕排便、排尿'], other: '其他如厕服务' },
  { name: '口腔清洁服务', key: 'oralCare', options: ['刷牙', '漱口', '清洁义齿', '口腔擦拭'], other: '其他口腔清洁服务' },
  { name: '皮肤清洁服务', key: 'skinCleaning', options: ['淋浴', '床上擦浴', '清洗会阴'], other: '其他皮肤清洁服务' },
  { name: '体位转移服务', key: 'positionTransfer', options: ['进行床上体位转换', '床与轮椅转移', '床与平车转移'], other: '其他体位转移服务' },
  { name: '便溺照料服务', key: 'excretionCare', options: ['协助进行床上排便', '人工排便', '药物及辅助用品肛注排便', '床上排尿', '更换一次性尿垫', '更换一次性尿裤'], other: '其他便溺服务' },
  { name: '皮肤护理服务', key: 'skinCare', options: ['卧床老年人预防压疮', '老年人皮肤观察', '定时更换体位', '清洁皮肤', '使用预防压疮的器具'], other: '其他皮肤护理服务' },
]

const elderlyNursingItems = [
  { name: '慢病管理服务', key: 'chronicDisease', options: ['老年人慢性非传染性疾病情况制定护理计划', '实施维持性治疗', '观察老年人症状变化、定期检测', '生活方式干预', '健康教育'], other: '其他慢病管理服务' },
  { name: '病症护理服务', key: 'diseaseNursing', options: ['常见病症进行观察', '按照医嘱针对护理'], other: '其他病症护理服务' },
  { name: '护理技术操作服务', key: 'nursingTech', options: ['清洁与舒适管理', '营养与排泄护理', '常见症状护理', '皮肤、伤口、造口护理', '气道护理', '引流护理', '生命体征监测', '急救技术', '常用标本采集', '给药治疗与护理'], other: '其他护理服务' },
  { name: '协助医疗护理服务', key: 'assistMedicalNursing', options: ['老年人日常生活观察', '协助或指导老年人使用辅助器具', '化验标本的收集送检'], other: '其他协助医疗护理服务' },
  { name: '康复服务', key: 'rehabilitation', options: ['康复评定和制定计划', '物理治疗', '作业治疗', '言语治疗', '中医康复治疗'], other: '其他康复服务' },
  { name: '安宁服务', key: 'palliativeCare', options: ['疼痛及其他症状护理服务', '舒适照护'], other: '其他安宁服务' },
]

defineExpose({ form })
</script>

<template>
  <div class="first-service-project">
    <div class="doc-title">首次服务项目确认表</div>

    <!-- 基本信息 -->
    <table class="info-table">
      <tbody>
        <tr>
          <td class="label">乙方姓名</td>
          <td><FieldItem v-model="form.partyBName" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
          <td class="label">性别</td>
          <td><FieldItem v-model="form.gender" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
          <td class="label">房间号/床号</td>
          <td><FieldItem v-model="form.bedNo" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
        </tr>
        <tr>
          <td class="label">评估日期</td>
          <td><FieldItem v-model="form.assessDate" :is-text-mode="isTextMode" type="date" width="100%" placeholder="" @update:model-value="updateForm" /></td>
          <td class="label">照料护理等级</td>
          <td colspan="3"><FieldItem v-model="form.careLevel" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
        </tr>
        <tr>
          <td class="label">代理人姓名</td>
          <td><FieldItem v-model="form.agentName" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
          <td class="label">紧急联系人姓名</td>
          <td colspan="3"><FieldItem v-model="form.emergencyContact" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" /></td>
        </tr>
      </tbody>
    </table>

    <!-- 基础服务 -->
    <table class="service-table">
      <thead>
        <tr>
          <th colspan="3" class="section-title">基础服务</th>
        </tr>
        <tr>
          <th class="col-service">服务项目</th>
          <th class="col-content">服务内容</th>
          <th class="col-remark">备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="svc in basicServices" :key="svc.key">
          <td class="service-name">{{ svc.name }}</td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label v-for="(opt, idx) in svc.options" :key="opt" class="chk-label">
                <input type="checkbox" :checked="isChecked(form.basicServices![svc.key], opt)" @change="toggleBasic(svc.key, opt)" />
                <span>{{ opt }}</span>
                <span v-if="svc.extra && svc.extra[idx]" class="extra-label">{{ svc.extra[idx] }}：<FieldItem v-model="(form.basicServices as any)[svc.key]['extra' + idx]" :is-text-mode="isTextMode" width="60px" placeholder="" @update:model-value="updateForm" /></span>
              </label>
              <div v-if="svc.other" class="other-row">
                <span>{{ svc.other }}：</span>
                <FieldItem v-model="(form.basicServices as any)[svc.key].other" :is-text-mode="isTextMode" width="200px" placeholder="" @update:model-value="updateForm" />
              </div>
              <div v-if="svc.sub" class="sub-service">
                <div class="sub-name">{{ svc.sub.name }}</div>
                <label v-for="opt in svc.sub.options" :key="opt" class="chk-label">
                  <input type="checkbox" :checked="isChecked(form.basicServices![svc.sub.key], opt)" @change="toggleBasic(svc.sub.key, opt)" />
                  <span>{{ opt }}</span>
                </label>
                <div v-if="svc.sub.other" class="other-row">
                  <span>{{ svc.sub.other }}：</span>
                  <FieldItem v-model="(form.basicServices as any)[svc.sub.key].other" :is-text-mode="isTextMode" width="200px" placeholder="" @update:model-value="updateForm" />
                </div>
              </div>
            </template>
            <template v-else>
              <span v-for="opt in svc.options" :key="opt" class="text-chk">
                {{ isChecked(form.basicServices![svc.key], opt) ? '☑' : '□' }}{{ opt }}
                <span v-if="svc.extra && svc.extra[svc.options.indexOf(opt)]" class="extra-text">{{ svc.extra[svc.options.indexOf(opt)] }}：{{ (form.basicServices as any)[svc.key]['extra' + svc.options.indexOf(opt)] || '____' }}</span>
              </span>
              <span v-if="(form.basicServices as any)[svc.key].other" class="text-chk">☑{{ svc.other }}：{{ (form.basicServices as any)[svc.key].other }}</span>
              <span v-else-if="svc.other" class="text-chk">□{{ svc.other }}：____</span>
              <div v-if="svc.sub" class="sub-service">
                <div class="sub-name">{{ svc.sub.name }}</div>
                <span v-for="opt in svc.sub.options" :key="opt" class="text-chk">
                  {{ isChecked(form.basicServices![svc.sub.key], opt) ? '☑' : '□' }}{{ opt }}
                </span>
                <span v-if="(form.basicServices as any)[svc.sub.key].other" class="text-chk">☑{{ svc.sub.other }}：{{ (form.basicServices as any)[svc.sub.key].other }}</span>
                <span v-else-if="svc.sub.other" class="text-chk">□{{ svc.sub.other }}：____</span>
              </div>
            </template>
          </td>
          <td class="service-remark">
            <FieldItem v-model="(form.basicServices as any)[svc.key].remark" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" />
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 等级护理照料服务 -->
    <div class="section-title-bar">等级护理照料服务</div>

    <!-- 生活照料服务 -->
    <table class="service-table no-remark">
      <thead>
        <tr>
          <th class="col-service">服务项目</th>
          <th class="col-content">服务内容</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="svc in lifeCareItems" :key="svc.key">
          <td class="service-name">{{ svc.name }}</td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label v-for="opt in svc.options" :key="opt" class="chk-label">
                <input type="checkbox" :checked="isChecked(form.lifeCare![svc.key], opt)" @change="toggleLife(svc.key, opt)" />
                <span>{{ opt }}</span>
              </label>
              <div v-if="svc.other" class="other-row">
                <span>{{ svc.other }}：</span>
                <FieldItem v-model="(form.lifeCare as any)[svc.key].other" :is-text-mode="isTextMode" width="200px" placeholder="" @update:model-value="updateForm" />
              </div>
            </template>
            <template v-else>
              <span v-for="opt in svc.options" :key="opt" class="text-chk">
                {{ isChecked(form.lifeCare![svc.key], opt) ? '☑' : '□' }}{{ opt }}
              </span>
              <span v-if="(form.lifeCare as any)[svc.key].other" class="text-chk">☑{{ svc.other }}：{{ (form.lifeCare as any)[svc.key].other }}</span>
              <span v-else-if="svc.other" class="text-chk">□{{ svc.other }}：____</span>
            </template>
          </td>
        </tr>
        <tr>
          <td class="service-name"></td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label class="chk-label">
                <input type="checkbox" v-model="form.lifeCare!.otherChecked" @change="updateForm" />
                <span>其他生活照料服务：</span>
              </label>
              <FieldItem v-model="form.lifeCare!.other" :is-text-mode="isTextMode" width="300px" placeholder="" @update:model-value="updateForm" />
            </template>
            <template v-else>
              <span class="text-chk">{{ form.lifeCare!.otherChecked ? '☑' : '□' }}其他生活照料服务：{{ form.lifeCare!.other || '____' }}</span>
            </template>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 老年护理服务 -->
    <table class="service-table no-remark">
      <thead>
        <tr>
          <th class="col-service">服务项目</th>
          <th class="col-content">服务内容</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="service-name">老年人综合评估</td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label class="chk-label">
                <input type="checkbox" v-model="form.elderlyNursing!.comprehensiveAssessment" @change="updateForm" />
                <span>老年人综合评估</span>
              </label>
            </template>
            <template v-else>
              <span class="text-chk">{{ form.elderlyNursing!.comprehensiveAssessment ? '☑' : '□' }}老年人综合评估</span>
            </template>
          </td>
        </tr>
        <tr v-for="svc in elderlyNursingItems" :key="svc.key">
          <td class="service-name">{{ svc.name }}</td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label v-for="opt in svc.options" :key="opt" class="chk-label">
                <input type="checkbox" :checked="isChecked(form.elderlyNursing![svc.key], opt)" @change="toggleElderly(svc.key, opt)" />
                <span>{{ opt }}</span>
              </label>
              <div v-if="svc.other" class="other-row">
                <span>{{ svc.other }}：</span>
                <FieldItem v-model="(form.elderlyNursing as any)[svc.key].other" :is-text-mode="isTextMode" width="200px" placeholder="" @update:model-value="updateForm" />
              </div>
            </template>
            <template v-else>
              <span v-for="opt in svc.options" :key="opt" class="text-chk">
                {{ isChecked(form.elderlyNursing![svc.key], opt) ? '☑' : '□' }}{{ opt }}
              </span>
              <span v-if="(form.elderlyNursing as any)[svc.key].other" class="text-chk">☑{{ svc.other }}：{{ (form.elderlyNursing as any)[svc.key].other }}</span>
              <span v-else-if="svc.other" class="text-chk">□{{ svc.other }}：____</span>
            </template>
          </td>
        </tr>
        <tr>
          <td class="service-name"></td>
          <td class="service-content">
            <template v-if="!isTextMode">
              <label class="chk-label">
                <input type="checkbox" v-model="form.elderlyNursing!.healthGuidance" @change="updateForm" />
                <span>健康指导</span>
              </label>
              <label class="chk-label">
                <input type="checkbox" v-model="form.elderlyNursing!.drugManagement" @change="updateForm" />
                <span>药品管理服务</span>
              </label>
              <div class="other-row">
                <span>其他老年护理服务：</span>
                <FieldItem v-model="form.elderlyNursing!.other" :is-text-mode="isTextMode" width="300px" placeholder="" @update:model-value="updateForm" />
              </div>
            </template>
            <template v-else>
              <span class="text-chk">{{ form.elderlyNursing!.healthGuidance ? '☑' : '□' }}健康指导</span>
              <span class="text-chk">{{ form.elderlyNursing!.drugManagement ? '☑' : '□' }}药品管理服务</span>
              <span class="text-chk">其他老年护理服务：{{ form.elderlyNursing!.other || '____' }}</span>
            </template>
          </td>
        </tr>
        <tr>
          <td class="service-name">其他约定服务</td>
          <td class="service-content">
            <FieldItem v-model="form.elderlyNursing!.otherAgreed" :is-text-mode="isTextMode" width="100%" placeholder="" @update:model-value="updateForm" />
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 签名 -->
    <div class="sign-row">
      <div class="sign-block">
        <span class="sign-label">乙方（签名）：</span>
        <SignatureItem v-model="form.partyBSign" :is-text-mode="isTextMode" width="200" height="80" placeholder="（签字处）" title="乙方签字" @update:model-value="updateForm" />
      </div>
      <div class="sign-block">
        <span class="sign-label">丙方（签名或盖章）：</span>
        <SignatureItem v-model="form.partyCSign" :is-text-mode="isTextMode" width="200" height="80" placeholder="（签字处）" title="丙方签字" @update:model-value="updateForm" />
      </div>
    </div>
    <div class="date-row">
      日期：
      <FieldItem v-model="form.signDate" :is-text-mode="isTextMode" type="date" width="220px" placeholder="" @update:model-value="updateForm" />
    </div>

    <!-- 备注 -->
    <div class="notice">
      <p>注：1. 根据乙方的照料护理等级确定相应服务内容。</p>
      <p>　　2. “服务内容”一栏在确认内容后的“□”内打“√”，未选的在“□”内打“×”。</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.first-service-project {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
  font-family: 'SimSun', 'Microsoft YaHei', serif;
  font-size: 13px;
  color: #333;
  background: #fff;
  padding: 5mm;

  @media print {
    width: 210mm !important;
    max-width: 100%;
    padding: 0;
    border: none;
    margin: 0;
    box-sizing: border-box;
  }
}

.doc-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.doc-date {
  text-align: center;
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.info-table,
.service-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;

  th,
  td {
    border: 1px solid #333;
    padding: 6px 8px;
    vertical-align: top;
  }

  th {
    background: #f5f5f5;
    font-weight: bold;
    text-align: center;
  }

  .label {
    background: #f5f5f5;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    width: 100px;
  }
}

.service-table {
  .section-title {
    background: #f5f5f5;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
  }

  .col-service {
    width: 120px;
    text-align: center;
  }

  .col-content {
    min-width: 400px;
  }

  .col-remark {
    width: 100px;
  }

  .service-name {
    text-align: center;
    font-weight: bold;
  }

  .service-content {
    .chk-label {
      display: inline-flex;
      align-items: center;
      margin-right: 12px;
      margin-bottom: 4px;
      cursor: pointer;

      input[type='checkbox'] {
        margin-right: 4px;
      }
    }

    .text-chk {
      display: inline-block;
      margin-right: 12px;
      margin-bottom: 4px;
    }

    .other-row {
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sub-service {
      margin-top: 6px;
      padding-left: 8px;
      border-left: 2px solid #ccc;

      .sub-name {
        font-weight: bold;
        margin-bottom: 4px;
      }
    }

    .extra-label,
    .extra-text {
      margin-left: 4px;
    }
  }
}

.section-title-bar {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  padding: 8px;
  border: 1px solid #333;
  border-bottom: none;
  background: #f5f5f5;
}

.sign-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 20px;

  .sign-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .sign-label {
      white-space: nowrap;
      padding-top: 4px;
    }
  }
}

.date-row {
  text-align: right;
  margin-top: 12px;
  padding-right: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.notice {
  margin-top: 16px;
  font-size: 12px;
  color: #666;

  p {
    margin: 4px 0;
  }
}

@media print {
  .first-service-project {
    font-size: 12px;
  }

  .service-table {
    .col-content {
      min-width: auto;
    }
  }
}
</style>