<template>
  <div style="width: 100%" class="medicalSec">
    <div class="thirdItem" style="margin-top: 20px;">
      <div class="thirdItemTitle">住院费用</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>总费用:</label>
          <el-input v-model="thirdFormData['hosCharges']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>自付金额:</label>
          <el-input v-model="thirdFormData['hosCharges_self']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">1.综合医疗服务类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（1）一般医疗服务费:</label>
          <el-input v-model="thirdFormData['medicalServices_1']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（2）一般治疗操作费:</label>
          <el-input v-model="thirdFormData['medicalServices_2']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（3）护理费:</label>
          <el-input v-model="thirdFormData['medicalServices_3']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（4）其他费用:</label>
          <el-input v-model="thirdFormData['medicalServices_4']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">2.诊断类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（5）病理诊断费:</label>
          <el-input v-model="thirdFormData['diagnosis_5']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（6）实验室诊断费:</label>
          <el-input v-model="thirdFormData['diagnosis_6']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（7）影像学诊断费:</label>
          <el-input v-model="thirdFormData['diagnosis_7']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（8）临床诊断项目费:</label>
          <el-input v-model="thirdFormData['diagnosis_8']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">3.治疗类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（9）非手术治疗项目费:</label>
          <el-input v-model="thirdFormData['treatment_9']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（临床物理治疗费）:</label>
          <el-input v-model="thirdFormData['treatment_9_1']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（10）手术治疗费:</label>
          <el-input v-model="thirdFormData['treatment_10']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label></label>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（麻醉费）:</label>
          <el-input v-model="thirdFormData['treatment_10_1']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（手术费）:</label>
          <el-input v-model="thirdFormData['treatment_10_2']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">4.康复类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（11）康复费:</label>
          <el-input v-model="thirdFormData['recovery_11']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label></label>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">5.中医类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（12）中医治疗费:</label>
          <el-input v-model="thirdFormData['TCM_12']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label></label>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">6.西药类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（13）西药费:</label>
          <el-input v-model="thirdFormData['Western_13']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（抗菌药物费用）</label>
          <el-input v-model="thirdFormData['Western_13_1']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">7.中药类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（14）中成药费:</label>
          <el-input v-model="thirdFormData['chinese_14']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（15）中草药费:</label>
          <el-input v-model="thirdFormData['chinese_15']"></el-input>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">8.血液和血液制品类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（16）血费:</label>
          <el-input v-model="thirdFormData['blood_16']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（17）白蛋白类制品费:</label>
          <el-input v-model="thirdFormData['blood_17']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（18）球蛋白类制品费:</label>
          <el-input v-model="thirdFormData['blood_18']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（19）凝血因子类制品费:</label>
          <el-input v-model="thirdFormData['blood_19']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（20）细胞因子类制品费:</label>
          <el-input v-model="thirdFormData['blood_20']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label></label>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">9.耗材类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（21）检查用一次性医用材料费:</label>
          <el-input v-model="thirdFormData['consumables_21']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label>（22）治疗用一次性医用材料费:</label>
          <el-input v-model="thirdFormData['consumables_22']"></el-input>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（23）手术用一次性医用材料费:</label>
          <el-input v-model="thirdFormData['consumables_23']"></el-input>
        </div>
        <div class="form-item subTitle">
          <label></label>
        </div>
      </div>
    </div>
    <div class="thirdItem">
      <div class="thirdItemTitle">10.其他类</div>
      <div class="form-row">
        <div class="form-item subTitle">
          <label>（24）其他费:</label>
          <el-input v-model="thirdFormData['other_24']"></el-input>
        </div>
        <div class="form-item">
          <label></label>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 5px">
      <el-button type="primary" @click="addSubItem" :disabled="false">
        新增
      </el-button>
      <el-button type="danger" plain @click="handleSubDelete" :disabled="false"> 删除 </el-button>
    </div>
    <div class="subTable">
      <div class="subTableHeader">
        其他诊断及手术附加页
      </div>
      <div class="subTableItem1" :class="{'borderBottom':!tableData_sub.length}">
        <div class="subItemCheckbox">
          <div class="" :class="{'subItemCheckboxAct':isChooseAllSub,'subChooseAll':!isChooseAllSub}" @click="chooseAll(2)"><span v-show="isChooseAllSub">✓</span></div>
        </div>
        <div class="subItem1">出院诊断</div>
        <div class="subItem2">疾病编码</div>
        <div class="subItem2">入院病情</div>
        <div class="subItem2">转归情况</div>
      </div>
      <div class="subTableItem"
           :class="{'borderBottom':index+1===tableData_sub.length}"
           v-for="(item,index) in tableData_sub" :key="index">
        <div class="subItemCheckbox" @click="checkItem(item,2)">
          <div class="" :class="{'subItemCheckboxAct':item['isChoose'],'subChooseAll':!item['isChoose']}"><span v-show="item['isChoose']">✓</span></div>
        </div>
        <div class="subItem1">
          <el-input v-model="item.outPut"></el-input>
        </div>
        <div class="subItem2">
          <el-input v-model="item.code"></el-input>
        </div>
        <div class="subItem2">
          <el-input v-model="item.inPut"></el-input>
        </div>
        <div class="subItem2">
          <el-input v-model="item.back"></el-input>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 5px">
      <el-button type="primary" @click="addItem" :disabled="false">
        新增
      </el-button>
      <el-button type="danger" plain @click="handleDelete" :disabled="false"> 删除 </el-button>
    </div>
    <div class="tableBox">
      <div class="tableBoxInner">
        <div :class="{'borderBottom':!tableData_top.length}" class="tableBoxItemHeader">
          <div class="item itemIndex">
            <div :class="{'itemCheckBox':!isChooseAll,'itemCheckBoxAct':isChooseAll}" @click="chooseAll(1)">
              <span v-show="isChooseAll">✓</span>
            </div>
          </div>
          <div class="item itemDate">手术操作日期</div>
          <div class="item itemSurgeryLevel">手术级别</div>
          <div class="item itemSurgeryName">手术及操作名称</div>
          <div class="itemSpec">
            <div class="spec" style="width: 100%;border-bottom: 1px solid #ebeef5;">手术及操作医师</div>
            <div class="spec">
              <div class="specItem">术者</div>
              <div class="specItem" style="border-left: 1px solid #ebeef5;">Ⅰ助</div>
              <div class="specItem" style="border-left: 1px solid #ebeef5;">Ⅱ助</div>
            </div>
          </div>
          <div class="item itemCutLevel">切口愈合等级</div>
          <div class="item itemCutLevel">麻醉方式</div>
          <div class="item itemCutLevel">麻醉分级</div>
          <div class="item itemTime borderRight">手术时长(H)</div>
        </div>
        <div
            class="tableBoxItem"
            :class="{'borderBottom':index+1===tableData_top.length}"
            v-for="(item,index) in tableData_top"
            :key="index">
          <div class="item itemIndex">
            <div :class="{'itemCheckBox':!item['isChoose'],'itemCheckBoxAct':item['isChoose']}" @click="checkItem(item,1)">
              <span v-show="item['isChoose']">✓</span>
            </div>
          </div>
          <div class="item itemDate">
            <el-date-picker
                v-model="item.ctrlDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="手术操作日期"
                :default-time="item.ctrlDate"
            />
          </div>
          <div class="item itemSurgeryLevel">
            <el-select v-model="item.surgeryLevel" placeholder="请选择手术级别">
              <el-option
                  v-for="item in item['surgeryLevelArr']"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="item itemSurgeryName">
            <el-input v-model="item.surgeryName"></el-input>
          </div>
          <div class="itemSpec">
            <div class="spec_">
              <div class="specItem" style="padding: 10px;">
                <el-input v-model="item.surgeryMasterName"></el-input>
              </div>
              <div class="specItem" style="padding: 10px;border-left: 1px solid #ebeef5;">
                <el-input v-model="item.surgeryMasterName_1"></el-input>
              </div>
              <div class="specItem" style="padding: 10px;border-left: 1px solid #ebeef5;">
                <el-input v-model="item.surgeryMasterName_2"></el-input>
              </div>
            </div>
          </div>
          <div class="item itemCutLevel">
            <el-select v-model="item.cutLevel">
              <el-option
                  v-for="item in item['cutLevelArr']"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="item itemCutLevel">
            <el-select v-model="item.anesthesiaType" placeholder="请选择手术级别">
              <el-option
                  v-for="item in operationLevelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="item itemCutLevel">
            <el-select v-model="item.anesthesiaLevel" placeholder="请选择手术级别">
              <el-option
                  v-for="item in item.anesthesiaLevelArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="item itemTime borderRight">
            <el-input v-model="item.surgeryTime"></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref, watch} from 'vue';
import { ElMessage } from 'element-plus'

interface form {
  //总费用  sumamt  medfeeSumamt
  medfee_sumamt: '',
  //自付金额
  fulamt_ownpay_amt: '',

  //一般医疗服务费
  ordn_med_servfee: '',
  //一般治疗操作费
  ordn_trt_oprt_fee: '',
  //护理费
  nurs_fee: '',
  //其他费用
  com_med_serv_oth_fee: '',

  //病理诊断费
  palg_diag_fee: '',
  //实验室诊断费
  lab_diag_fee: '',
  //影像学诊断费
  rdhy_diag_fee: '',
  //临床诊断项目费
  clnc_dise_fee: '',

  //非手术治疗项目费
  nsrgtrt_item_fee: '',
  //临床物理治疗费
  clnc_phys_trt_fee: '',
  //手术治疗费
  rgtrt_trt_fee: '',
  //麻醉费
  anst_fee: '',
  //手术费
  rgtrt_fee: '',

  //康复费
  rhab_fee: '',

  //中医治疗费
  tcm_trt_fee: '',

  //西药费
  wm_fee: '',
  //抗菌药物费用
  abtl_medn_fee: '',

  //中成药费
  tcmpat_fee: '',
  //中草药费---不确定
  tcmherb_fee: '',

  //血费
  blo_fee: '',
  //白蛋白类制品费
  albu_fee: '',
  //球蛋白类制品费
  glon_fee: '',
  //凝血因子类制品费
  clotfac_fee: '',
  //细胞因子类制品费
  cyki_fee: '',

  //检查用一次性医用材料费
  exam_dspo_matl_fee: '',
  //治疗用一次性医用材料费
  trt_dspo_matl_fee: '',
  //手术用一次性医用材料费
  oprn_dspo_matl_fee: '',

  //其他费
  oth_fee: '',

  //出院诊断
  dscg_diag: '',
  //疾病编码--不确定
  damg_intx_ext_rea_disecode: '',
  //入院病情  admCond
  adm_cond: '',
  //转归情况



  //手术操作日期   oprn_oprt_date
  oprn_date: '',

  //手术级别 手术级别名称--oprn_lv_code
  oprn_lv_code: '',

  //手术及操作名称  oprn_oprt_code
  oprn_oprt_name: '',

  //手术及操作医师
  //术者
  oper_name: '',
  //Ⅰ助
  asit_1_name: '',
  //Ⅱ助
  asit_name2: '',

  //切口愈合等级 sinc_heal_lv_code
  sinc_heal_lv: '',

  //麻醉方式
  anst_way: '',

  //麻醉分级  anst_lv_code
  anst_lv_name: '',

  //手术时长


  //住院费用
  hosCharges: string,
  hosCharges_self: string,
  //1.综合医疗服务类
  medicalServices_1: string,
  medicalServices_2: string,
  medicalServices_3: string,
  medicalServices_4: string,
  //2.诊断类
  diagnosis_5: string,
  diagnosis_6: string,
  diagnosis_7: string,
  diagnosis_8: string,
  //3.治疗类
  treatment_9: string,
  treatment_9_1: string,
  treatment_10: string,
  treatment_10_1: string,
  treatment_10_2: string,
  //4.康复类
  recovery_11: string,
  //5.中医类
  TCM_12: string,
  //6.西药类
  Western_13: string,
  Western_13_1: string,
  //7.中药类
  chinese_14: string,
  chinese_15: string,
  //8.血液和血液制品类
  blood_16: string,
  blood_17: string,
  blood_18: string,
  blood_19: string,
  blood_20: string,
  //9.耗材类
  consumables_21: string,
  consumables_22: string,
  consumables_23: string,
  //10.其他类:
  other_24: string,
}

let chooseData = reactive([])//表格中选中的数据 TODO
let chooseSubData = reactive([])//表格中选中的数据 TODO
const tableData_top = reactive([])
const tableData_sub = reactive([])
const thirdFormData = ref<form[]>({});
/*const thirdFormData = reactive({

})*/
let isChooseAll = ref<boolean>(false);
let isChooseAllSub = ref<boolean>(false);
const formData = reactive({
  surgeryDate: '2025-10-10',
  surgeryType: '',
  surgeryTypeArr: [
    {
      title: '择期手术',
      value: 1,
    },
    {
      title: '限期手术',
      value: 2,
    },
    {
      title: '急诊手术',
      value: 3,
    }
  ],
  leaveType: '',
  leaveTypeArr: [
    {
      title: '医嘱离院',
      value: 1,
    },
    {
      title: '医嘱转院',
      value: 2,
    },
    {
      title: '医嘱转社区卫生服务机构',
      value: 3,
    },
    {
      title: '非医嘱离院',
      value: 4,
    },
    {
      title: '死亡',
      value: 5,
    },
    {
      title: '其他',
      value: 6,
    }
  ],
  isPlan: '',
  isPlanArr: [
    {
      title: '是',
      value: 1,
    },
    {
      title: '否',
      value: 1,
    }
  ],
  purpose: '',
  comaDurationTime_before: '',//昏迷时间---入院前
  comaDurationTime_after: '',//昏迷时间---入院后

  tumorStaging: '',
  tumorStagingArr: [
    {
      title: 'C',
      value: 1,
    },
    {
      title: 'P',
      value: 2,
    }
  ],
  judgmentBase: '',
  judgmentBaseArr: [
    {
      title: '0期',
      value: 0,
    },
    {
      title: '1期',
      value: 1,
    },
    {
      title: '2期',
      value: 2,
    },
    {
      title: '3期',
      value: 3,
    },
    {
      title: '4期',
      value: 4,
    },
    {
      title: '不详',
      value: 5,
    }
  ],
  tumor_T: '',
  tumor_N: '',
  tumor_M: '',
  degreeDifferentiation: '',

  enterPath: '',
  enterPathArr: [
    {
      title: '是',
      value: 1,
    },
    {
      title: '否',
      value: 1,
    }
  ],
  outPath: '',
  outPathArr: [
    {
      title: '是',
      value: 1,
    },
    {
      title: '否',
      value: 1,
    }
  ],
  mutation: '',
  mutationArr: [
    {
      title: '有',
      value: 1,
    },
    {
      title: '无',
      value: 1,
    }
  ],

  nursingLevel_spec: '',
  nursingLevel_1: '',
  nursingLevel_2: '',
  nursingLevel_3: '',

  ventilatorUse: '',
  ventilatorUseArr: [
    {
      title: '未使用',
      value: 1,
    },
    {
      title: '无创',
      value: 2,
    },
    {
      title: '有创',
      value: 3,
    },
    {
      title: '无创+有创',
      value: 4,
    }
  ],

  ventilatorUseTime: '',
});

const operationLevelList = [
  { name: '一级', id: 1 },
  { name: '二级', id: 2 },
  { name: '三级', id: 3 },
];

//最下table--新增
const addItem = () => {
  let data = {
    isChoose: false,
    ctrlDate: '2025-10-10',
    surgeryLevel: '',
    surgeryLevelArr: [
      {
        title: '1级',
        value: 1,
      },
      {
        title: '2级',
        value: 2,
      },
      {
        title: '3级',
        value: 3,
      },
      {
        title: '4级',
        value: 4,
      }
    ],
    surgeryName: '',
    surgeryMasterName: '',
    surgeryMasterName_1: '',
    surgeryMasterName_2: '',
    cutLevel: '',
    cutLevelArr: [
      {
        title: '1/甲',
        value: 1,
      },
      {
        title: '2/乙',
        value: 2,
      }
    ],
    anesthesiaType: '',
    anesthesiaTypeArr: [],
    anesthesiaEr: '',
    anesthesiaLevel: '',
    anesthesiaLevelArr: [
      {
        title: '1',
        value: 1,
      },
      {
        title: '2',
        value: 2,
      },
    ],
    surgeryTime: ''
  }
  //push
  tableData_top.unshift(
      data
  )
  tableData_top.map((d,i) => {
    d.currentIndex = i
  })

}
//最下table--删除
const handleDelete = () => {
  if (!tableData_top.length) { return }
  let deleteId = []
  chooseData.map((d) => {
    deleteId.push(d['currentIndex'])
  })

  for (let i = tableData_top.length - 1; i >= 0; i--) {
    if (deleteId.includes(tableData_top[i].currentIndex)) {
      tableData_top.splice(i, 1);
    }
  }

  isChooseAll.value = false

  msgSuccess('删除成功')
}

//其他诊断及手术附加页 添加方法
const addSubItem = () => {
  const data =   {
    isChoose: false,
    outPut: '',
    code: '',
    inPut: '',
    back: '',
  }
  //tableData_sub  unshift
  tableData_sub.unshift(data)
  tableData_sub.map((d,i) => {
    d.currentIndex = i
  })

}
//其他诊断及手术附加页 删除方法
const handleSubDelete = () => {
  if (!tableData_sub.length) { return }
  let deleteId = []
  chooseSubData.map((d) => {
    deleteId.push(d['currentIndex'])
  })

  for (let i = tableData_sub.length - 1; i >= 0; i--) {
    if (deleteId.includes(tableData_sub[i].currentIndex)) {
      tableData_sub.splice(i, 1);
    }
  }

  isChooseAllSub.value = false

  msgSuccess('删除成功')
}


//公共全选
const checkItem = (e,type) => {
  if (type===1) {
    chooseData = []
    e['isChoose'] = !e['isChoose']
    tableData_top.map((d) => {
      if (d['isChoose']) {
        chooseData.push(d)
      }
    })
  } else {
    chooseSubData = []
    e['isChoose'] = !e['isChoose']
    tableData_sub.map((d) => {
      if (d['isChoose']) {
        chooseSubData.push(d)
      }
    })
  }

}
const chooseAll = (type) => {
  // logHtml()
  if (type===1) {
    if (tableData_top.length) {
      isChooseAll.value = !isChooseAll.value

      tableData_top.map((d) => {
        d['isChoose'] = !isChooseAll.value

        checkItem(d,type)
      })
    }
  } else {
    if (tableData_sub.length) {
      isChooseAllSub.value = !isChooseAllSub.value

      tableData_sub.map((d) => {
        d['isChoose'] = !isChooseAllSub.value

        checkItem(d,type)
      })
    }
  }


}

const msgSuccess = (msg) => {
  ElMessage({
    message: msg,
    type: 'success',
  })
}

const logHtml = () => {
  let html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .hisSec {
            padding: 10px 0;
            width: 100vw;
            min-height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .font_1 {
            font-size: 14px;
            font-weight: bold;
        }
        .font_2 {
            font-size: 14px;
        }
        .font_3 {
            font-size: 13px;
        }
        .font_4 {
            font-size: 12px;
        }
        .hisSecInner {
            width: 1000px;
            height: 100%;
        }
        .tableBox {
            margin: 10px 0;
        }
        .tableBoxInner {

        }
        .borderRight {
            border-right: 1px solid #333333;
        }
        .borderBottom {
            border-bottom: 1px solid #333333;
        }
        .tableBoxItemHeader {
            font-weight: bold;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50px;

        }
        .tableBoxItemHeader .item {
            white-space: wrap;
            border-top: 1px solid #333333;
            border-left: 1px solid #333333;
            box-sizing: border-box;
            padding: 10px 2px;
            height: 100%;
            text-align: center;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItemHeader .itemIndex {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 3.5%;
        }
        .tableBoxItemHeader .chooseAllBtn {
            width: 18px;
            height: 18px;
        }
        .tableBoxItemHeader .itemDate {
            width: 10%;
        }
        .tableBoxItemHeader .itemSurgeryLevel {
            width: 7%;
        }
        .tableBoxItemHeader .itemSurgeryName {
            width: 23%;
        }
        .tableBoxItemHeader .itemCutLevel {
            width: 9%;
        }
        .tableBoxItemHeader .itemCutLevel1 {
            width: 12%;
        }
        .tableBoxItemHeader .itemCutLevel2 {
            width: 7%;
        }
        .tableBoxItemHeader .itemTime {
            width: 9%;
        }
        .tableBoxItemHeader .itemSpec {
            width: 20%;
            border-top: 1px solid #333333;
            border-left: 1px solid #333333;
            height: 50px;
        }
        .tableBoxItemHeader .itemSpec .spec {
            width: 100%;
            text-align: center;
            height: 50%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItemHeader .itemSpec .spec .specItem {
            width: 33.33%;
            height: 100%;
            line-height: 25px;
        }
        .tableBoxItemHeader .itemSpec .spec_ {
            width: 100%;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

        }
        .tableBoxItemHeader .itemSpec .spec_ .specItem {
            width: 33.33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItemHeader .itemCheckBox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 2px;
        }
        .tableBoxItemHeader .itemCheckBoxAct {
            line-height: 16px;
            text-align: center;
            font-size: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 2px;
            background: #333333;
            color: #fff;
        }
        .tableBoxItemHeader .itemCheckBox:hover {
            border: 1px solid #333333;
        }
        .tableBoxItem {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 55px;
        }
        .tableBoxItem .item {
            border-top: 1px solid #333333;
            border-left: 1px solid #333333;
            //line-height: 40px;
            box-sizing: border-box;
            padding: 10px 2px;
            height: 100%;
            text-align: center;
        }
        .tableBoxItem .itemIndex {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 3.5%;
        }
        .tableBoxItem .itemDate {
            width: 10%;
        }
        .tableBoxItem .itemSurgeryLevel {
            width: 7%;
        }
        .tableBoxItem .itemSurgeryName {
            width: 23%;
        }
        .tableBoxItem .itemCutLevel {
            width: 9%;
        }
        .tableBoxItem .itemCutLevel1 {
            width: 12%;
        }
        .tableBoxItem .itemCutLevel2 {
            width: 7%;
        }
        .tableBoxItem .itemTime {
            width: 9%;
        }
        .tableBoxItem .itemSpec {
            width: 20%;
            border-top: 1px solid #333333;
            border-left: 1px solid #333333;
            height: 55px;
        }
        .tableBoxItem .itemSpec .spec {
            width: 100%;
            text-align: center;
            height: 50%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItem .itemSpec .spec .specItem {
            width: 33.33%;
            height: 100%;
            line-height: 25px;
        }
        .tableBoxItem .itemSpec .spec_ {
            width: 100%;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItem .itemSpec .spec_ .specItem {
            width: 33.33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .tableBoxItem .itemCheckBox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 2px;
        }
        .tableBoxItem .itemCheckBoxAct {
            line-height: 16px;
            text-align: center;
            font-size: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 2px;
            background: #409eff;
            color: #fff;
        }
        .tableBoxItem .itemCheckBox:hover {
            border: 1px solid #409eff;
        }



        .topBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        .secItem {
            width: 100%;
            display: flex;
            flex-direction: row;
            //align-items: center;
            justify-content: left;
            border-bottom: 1px solid #333333;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .secItem1 {
            width: 100%;
            border-bottom: 1px solid #333333;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .chooseBox {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            border: 1px solid #333;
            font-size: 12px;
            margin: 0 5px;
        }
        .rowBox {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .writeArea {
            display: inline-block;
            width: 150px;
            border-bottom: 1px solid #333333;
            padding-bottom: 2px;
        }
        .writeAreaCenter {
            display: inline-block;
            width: 150px;
            border-bottom: 1px solid #333333;
            padding-bottom: 2px;
            text-align: center;
        }
        .writeAreaSort {
            display: inline-block;
            width: 35px;
            border-bottom: 1px solid #333333;
            //padding-bottom: 2px;
            text-align: center;
        }
        .marginSmall {
            margin: 0 5px;
        }
        .marginNor {
            margin: 0 10px;
        }
        .marginBig {
            margin: 0 20px;
        }
        .marginB {
            margin-bottom: 10px;
        }
        .marginR_B {
            margin-right: 40px;
        }
        .subTable {

        }
        .tableBar {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: left;
            height: 35px;
        }
        .barItem {
            height: 100%;
            width: 33.33%;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #333333;
            border-left: 1px solid #333333;
        }
        .borderR {
            border-right: 1px solid #333333;
        }
        .borderB {
            border-bottom: 1px solid #333333;
        }
    </style>
</head>
<body>
<div class="hisSec">
    <div class="hisSecInner">
        <div class="topBar">
            <div class="font_2">姓名：金长存</div>
            <div class="font_2">病案号：12345678</div>
        </div>

<!--        <div class="tableBox">
            <div class="tableBoxInner">
                <div class="tableBoxItemHeader font_1">
                    <div class="item itemDate">手术操作日期</div>
                    <div class="item itemSurgeryLevel">手术级别</div>
                    <div class="item itemSurgeryName">手术及操作名称</div>
                    <div class="itemSpec">
                        <div class="spec" style="width: 100%;border-bottom: 1px solid #333333;">手术及操作医师</div>
                        <div class="spec">
                            <div class="specItem">术者</div>
                            <div class="specItem" style="border-left: 1px solid #333333;">Ⅰ助</div>
                            <div class="specItem" style="border-left: 1px solid #333333;">Ⅱ助</div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">切口愈合等级</div>
                    <div class="item itemCutLevel">麻醉方式</div>
                    <div class="item itemCutLevel">麻醉医师</div>
                    <div class="item itemCutLevel">麻醉分级</div>
                    <div class="item itemTime borderRight">手术时长(H)</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">5</div>
                    <div class="item itemSurgeryName">腰椎间盘切除，椎管减压，植骨融合内固定术</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                牛粪
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                渣渣辉
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                长存
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">1</div>
                    <div class="item itemSurgeryName">PICC管去除</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                牛粪
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                渣渣辉
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                长存
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">1</div>
                    <div class="item itemSurgeryName">经外周静脉穿刺中心静脉置管技术</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                王丽丽
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">

                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">

                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_2">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_2 borderBottom">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
            </div>
        </div>-->
        <div class="tableBox">
            <div class="tableBoxInner">
                <div class="tableBoxItemHeader font_4">
                    <div class="item itemDate">手术操作日期</div>
                    <div class="item itemSurgeryLevel">手术级别</div>
                    <div class="item itemSurgeryName">手术及操作名称</div>
                    <div class="itemSpec">
                        <div class="spec" style="width: 100%;border-bottom: 1px solid #333333;">手术及操作医师</div>
                        <div class="spec">
                            <div class="specItem">术者</div>
                            <div class="specItem" style="border-left: 1px solid #333333;">Ⅰ助</div>
                            <div class="specItem" style="border-left: 1px solid #333333;">Ⅱ助</div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">切口愈合等级</div>
                    <div class="item itemCutLevel1">麻醉方式</div>
                    <div class="item itemCutLevel">麻醉医师</div>
                    <div class="item itemCutLevel2">麻醉分级</div>
                    <div class="item itemTime borderRight">手术时长(H)</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">5</div>
                    <div class="item itemSurgeryName">腰椎间盘切除，椎管减压，植骨融合内固定术</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                牛粪
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                渣渣辉
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                长存
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel1">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel2">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">1</div>
                    <div class="item itemSurgeryName">PICC管去除</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                牛粪
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                渣渣辉
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                长存
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel1">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel2">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">2023-11-6</div>
                    <div class="item itemSurgeryLevel">1</div>
                    <div class="item itemSurgeryName">经外周静脉穿刺中心静脉置管技术</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                王丽丽
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">

                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">

                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">1/甲</div>
                    <div class="item itemCutLevel1">静吸复合麻醉</div>
                    <div class="item itemCutLevel">马本慧</div>
                    <div class="item itemCutLevel2">2</div>
                    <div class="item itemTime borderRight">2.35</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_4">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
                <div class="tableBoxItem font_4 borderBottom">
                    <div class="item itemDate">—</div>
                    <div class="item itemSurgeryLevel">—</div>
                    <div class="item itemSurgeryName">—</div>
                    <div class="itemSpec">
                        <div class="spec_">
                            <div class="specItem">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                            <div class="specItem" style="border-left: 1px solid #333333;">
                                —
                            </div>
                        </div>
                    </div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel1">—</div>
                    <div class="item itemCutLevel">—</div>
                    <div class="item itemCutLevel2">—</div>
                    <div class="item itemTime borderRight">—</div>
                </div>
            </div>
        </div>
        <div class="secItem">
            <div class="font_1">手术方式</div>
            <div class="chooseBox font_2">1</div>
            <div class="rowBox">
                <div style="margin: 0 5px;" class="font_2">1.择期手术</div>
                <div style="margin: 0 5px;" class="font_2">2.限期手术</div>
                <div style="margin: 0 5px;" class="font_2">3.急诊手术</div>
            </div>
        </div>
        <div class="secItem">
            <div class="font_1">离院方式</div>
            <div class="chooseBox font_2">1</div>
            <div>
                <div class="marginB rowBox">
                    <div class="marginSmall font_2">1.医嘱离院</div>
                    <div class="marginSmall font_2">2.医嘱转院，拟接受医疗结构名称 <span class="writeArea">—</span> </div>
                </div>
                <div class="marginB rowBox">
                    <div class="marginSmall font_2">3.医嘱转让社区卫生服务机构、乡镇卫生院，拟接受医疗结构名称<span class="writeAreaCenter">—</span></div>
                </div>
                <div class="marginB rowBox">
                    <div class="marginSmall font_2">4.非医嘱离院</div>
                    <div class="marginSmall font_2">5.死亡</div>
                    <div class="marginSmall font_2">6.其他</div>
                </div>
            </div>

        </div>
        <div class="secItem">
            <div class="font_1">是否有出院31天内再住院计划</div>
            <div class="chooseBox font_2">1</div>
            <div class="rowBox">
                <div class="marginSmall font_2">1.无</div>
                <div class="marginSmall font_2">2.有</div>
                <div style="margin: 0 5px 0 15px;" class="font_2">目的：<span class="writeAreaCenter">—</span></div>
            </div>
        </div>
        <div class="secItem">
            <div class="font_1">颅脑损伤患者昏迷时间：</div>
            <div class="rowBox">
                <div class="marginSmall font_2">入院前：<span class="writeAreaSort">—</span> 天 <span class="writeAreaSort">—</span>小时<span class="writeAreaSort">—</span>分钟</div>
                <div style="margin: 0 5px 0 60px" class="font_2">入院后：<span class="writeAreaSort">—</span> 天 <span class="writeAreaSort">—</span>小时<span class="writeAreaSort">—</span>分钟</div>
            </div>
        </div>
        <div class="secItem1">
            <div class="rowBox" style="margin-bottom: 10px;">
                <div class="font_1">肿瘤分期:</div>
                <div class="marginSmall font_2">C</div><div class="chooseBox font_2"></div>
                <div class="marginSmall font_2">P</div><div class="chooseBox font_2"></div>

                <div class="marginSmall font_2">T</div><span class="writeAreaSort">—</span>
                <div class="marginSmall font_2">N</div><span class="writeAreaSort">—</span>
                <div class="marginSmall font_2">M</div><span class="writeAreaSort marginR_B">—</span>
                <div class="marginSmall font_2">判断依据：</div><span class="writeAreaCenter">—</span>
            </div>
            <div class="rowBox">
                <div class="chooseBox font_2">-</div>
                <div class="marginSmall font_3">0. 0期</div>
                <div class="marginSmall font_3">1. 1期</div>
                <div class="marginSmall font_3">2. 2期</div>
                <div class="marginSmall font_3">3. 3期</div>
                <div class="marginSmall font_3">4. 4期</div>
                <div class="marginSmall font_3 marginR_B">9. 不详</div>
                <div class="marginSmall font_3">分化程度：<span class="writeAreaCenter">—</span></div>

            </div>
        </div>
        <div class="secItem">
            <div class="font_1">临床路径：进入路径</div>
            <div class="chooseBox font_2">1</div>
            <div class="rowBox">
                <div class="marginSmall font_2">1.是</div>
                <div class="marginSmall font_2">2.否</div>
                <div style="margin: 0 5px 0 15px;" class="font_1">变异：</div>
                <div class="chooseBox font_2">1</div>
                <div class="marginSmall font_2">1.有</div>
                <div class="marginSmall font_2">2.无</div>
                <div style="margin: 0 5px 0 15px;" class="font_1">退出路径：</div>
                <div class="chooseBox font_2">1</div>
                <div class="marginSmall font_2">1.是</div>
                <div class="marginSmall font_2">2.否</div>
            </div>
        </div>

        <div class="secItem">
            <div class="font_1">护理级别</div>
            <div>
                <div class="marginB rowBox">
                    <div class="marginSmall font_2">
                        <div class="rowBox">
                            <div class="marginSmall font_2 marginR_B">
                                特级护理：<span class="writeAreaSort">—</span> 小时
                            </div>
                            <div class="marginSmall font_2 marginR_B">
                                一级护理：<span class="writeAreaSort">—</span> 小时
                            </div>
                        </div>
                    </div>
                </div>
                <div class="marginB rowBox">
                    <div class="marginSmall font_2">
                        <div class="rowBox">
                            <div class="marginSmall font_2 marginR_B">
                                二级护理：<span class="writeAreaSort">—</span> 小时
                            </div>
                            <div class="marginSmall font_2 marginR_B">
                                三级护理：<span class="writeAreaSort">—</span> 小时
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="secItem">
            <div class="font_1">呼吸机使用：</div>
            <div class="chooseBox font_2">0</div>
            <div class="rowBox">
                <div class="marginSmall font_2">0.未使用</div>
                <div class="marginSmall font_2">1.无创</div>
                <div class="marginSmall font_2">2.有创</div>
                <div class="marginSmall font_2 marginR_B">3.无创+有创</div>
                <div class="marginSmall font_1 ">
                    有创呼吸机使用时间（术中除外）：<span class="writeAreaSort">—</span> 小时
                </div>
            </div>
        </div>

        <div class="subTable">
            <div class="tableBar">
                <div class="font_1 barItem">重症监护室名称</div>
                <div class="font_1 barItem">进重症监护室时间（年月日时分）</div>
                <div class="font_1 barItem borderR">出重症监护室时间（年月日时分）</div>
            </div>
            <div class="tableBar">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
            <div class="tableBar">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
            <div class="tableBar">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
            <div class="tableBar">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
            <div class="tableBar">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
            <div class="tableBar borderB">
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem">—</div>
                <div class="font_3 barItem borderR">—</div>
            </div>
        </div>

    </div>
</div>
</body>
</html>`

  console.log(JSON.stringify(html))
}


</script>

<style lang="scss">
.medicalSec {
  .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
    width: 100%;
  }
  .el-table td.el-table__cell div {
    width: 100%;
  }
}

</style>
<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
  display: none !important;
}
.borderBottom {
  border-bottom: 1px solid #ebeef5;
}

.subTitle {
  color: #000410;
}

.thirdItem {
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px 10px 5px 10px;
  margin-bottom: 20px;
  .thirdItemTitle {
    font-weight: bold;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
}
.tableItemCheck {
  margin: 0 auto;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid #ccc;
}
.tableBox {
  margin: 10px 0;
  .tableBoxInner {
    .borderRight {
      border-right: 1px solid #ebeef5;
    }

    .tableBoxItemHeader {
      background: #f8f8f9;
      color: #515a6e;
      font-weight: bold;
      font-size: 13px;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 80px;
      .item {
        white-space: wrap;
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        line-height: 65px;
        box-sizing: border-box;
        padding: 10px;
        height: 100%;
        text-align: center;
      }
      .itemIndex {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 3.5%;
      }
      .chooseAllBtn {
        width: 18px;
        height: 18px;
      }
      .itemDate {
        width: 12%;
      }
      .itemSurgeryLevel {
        width: 14%;
      }
      .itemSurgeryName {
        width: 20%;
      }
      .itemCutLevel {
        width: 8%;
      }
      .itemTime {
        width: 7%;
      }
      .itemSpec {
        width: 20%;
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        height: 80px;
        .spec {
          width: 100%;
          text-align: center;
          height: 50%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .specItem {
            width: 33.33%;
            height: 100%;
            line-height: 39px;
          }
        }
        .spec_ {
          width: 100%;
          text-align: center;
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .specItem {
            width: 33.33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .itemCheckBox {
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
      .itemCheckBoxAct {
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 2px;
        background: #409eff;
        color: #fff;
      }
      .itemCheckBox:hover {
        border: 1px solid #409eff;
      }
    }
    .tableBoxItem {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 50px;
      .item {
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        //line-height: 40px;
        box-sizing: border-box;
        padding: 10px;
        height: 100%;
        text-align: center;
      }
      .itemIndex {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 3.5%;
      }
      .itemDate {
        width: 12%;
      }
      .itemSurgeryLevel {
        width: 14%;
      }
      .itemSurgeryName {
        width: 20%;
      }
      .itemCutLevel {
        width: 8%;
      }
      .itemTime {
        width: 7%;
      }
      .itemSpec {
        width: 20%;
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        height: 50px;
        .spec {
          width: 100%;
          text-align: center;
          height: 50%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .specItem {
            width: 33.33%;
            height: 100%;
            line-height: 39px;
          }
        }
        .spec_ {
          width: 100%;
          text-align: center;
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .specItem {
            width: 33.33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .itemCheckBox {
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
      .itemCheckBoxAct {
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 2px;
        background: #409eff;
        color: #fff;
      }
      .itemCheckBox:hover {
        border: 1px solid #409eff;
      }
    }
  }
}
.subTable {
  width: 100%;
  margin-bottom: 20px;
  .subTableHeader {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    font-size: 16px;
    color: #515a6e;
    background: #f8f8f9;
  }
  .subTableItem1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    height: 60px;
    box-sizing: border-box;
    background: #f8f8f9;
    font-weight: bold;
    color: #515a6e;
    font-size: 13px;
  }
  .subTableItem {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    height: 60px;
    box-sizing: border-box;
  }
  .subItemCheckbox {
    width: 4%;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    padding: 5px 10px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .subItemCheckboxAct {
    background: #409eff;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
  }
  .subChooseAll {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
  }
  .subChooseAll:hover {
    border: 1px solid #409eff;
  }
  .subItem1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    width: 51%;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
  }
  .subItem2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    width: 15%;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
  }
}
.medicine-title {
  font-size: 16px;
  font-weight: 600;
  min-width: 280px;
  display: inline-block;
}

.total-amount {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
  white-space: nowrap;
}

.medicine-info {
  font-size: 15px;
  font-weight: 600;
  color: #606266;
  white-space: nowrap;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 调整element组件默认间距 */
// .el-select,
// .el-input-number {
//   margin-right: 0 !important;
// }

.el-input-number .el-input__inner {
  text-align: center;
}
.el-table__cell .el-form-item--default {
  margin-bottom: 0px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  //margin-bottom: 15px;
}

.form-item {
  flex: 1;
  min-width: 200px;
  margin-right: 15px;
  margin-bottom: 8px;
}

.form-item.full-width {
  flex: 0 0 100%;
  min-width: 100%;
}
.form-item-specLabel {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.specLabelInner {
  margin: 0 8px;
  width: 60px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}
</style>