<template>
  <div style="width: 100%" class="medicalSec">
    <div style="margin-bottom: 5px;margin-top: 20px;">
      <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">
              <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)">
              <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 class="form-row">
      <div class="form-item">
        <label>手术方式:</label>
          <el-select v-model="formData['surgeryType']">
            <el-option v-for="(item,index) in formData['surgeryTypeArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
          </el-select>
      </div>
      <div class="form-item">
        <label>离院方式:</label>
        <el-select v-model="formData['leaveType']">
          <el-option v-for="(item,index) in formData['leaveTypeArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>是否有出院31天内再住院计划:</label>
        <el-select v-model="formData['isPlan']">
          <el-option v-for="(item,index) in formData['isPlanArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>目的:</label>
        <el-input v-model="formData['purpose']"></el-input>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>颅脑损伤患者昏迷时间-入院前:</label>
        <el-input type="date" v-model="formData['comaDurationTime_before']" />
      </div>
      <div class="form-item">
        <label>入院后:</label>
        <el-input type="date" v-model="formData['comaDurationTime_after']" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>肿瘤分期:</label>
        <el-select v-model="formData['tumorStaging']">
          <el-option v-for="(item,index) in formData['tumorStagingArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item" style="flex: 0">
        <label>T:</label>
        <label class="form-item-specLabel"><div class="specLabelInner" style="width: 80px;margin: 0 8px 0 0;"><el-input v-model="formData['tumor_T']"></el-input></div> </label>
      </div>
      <div class="form-item" style="flex: 0">
        <label>N:</label>
        <label class="form-item-specLabel"><div class="specLabelInner" style="width: 80px;margin: 0 8px 0 0;"><el-input v-model="formData['tumor_N']"></el-input></div> </label>
      </div>
      <div class="form-item" style="flex: 0">
        <label>M:</label>
        <label class="form-item-specLabel"><div class="specLabelInner" style="width: 80px;margin: 0 8px 0 0;"><el-input v-model="formData['tumor_M']"></el-input></div> </label>
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>判断依据:</label>
        <el-select v-model="formData['judgmentBase']">
          <el-option v-for="(item,index) in formData['judgmentBaseArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>分化程度:</label>
        <el-input type="date" v-model="formData['degreeDifferentiation']" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>临床路径-进入路径：</label>
        <el-select v-model="formData['enterPath']">
          <el-option v-for="(item,index) in formData['enterPathArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>变异:</label>
        <el-select v-model="formData['mutation']">
          <el-option v-for="(item,index) in formData['mutationArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>退出路径：</label>
        <el-select v-model="formData['outPath']">
          <el-option v-for="(item,index) in formData['outPathArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item">
      </div>
    </div>
    <div class="form-row" styLe="margin: 0;">
      <div class="form-item" styLe="margin: 0;">
        <label>护理级别：</label>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item" style="flex: 0">
        <label class="form-item-specLabel">特级护理 <div class="specLabelInner"><el-input v-model="formData['nursingLevel_spec']"></el-input></div> 小时</label>
      </div>
      <div class="form-item" style="flex: 0">
        <label class="form-item-specLabel">1级护理 <div class="specLabelInner"><el-input v-model="formData['nursingLevel_1']"></el-input></div> 小时</label>

      </div>
      <div class="form-item" style="flex: 0">
        <label class="form-item-specLabel">2级护理 <div class="specLabelInner"><el-input v-model="formData['nursingLevel_2']"></el-input></div> 小时</label>
      </div>
      <div class="form-item" style="flex: 0">
        <label class="form-item-specLabel">3级护理 <div class="specLabelInner"><el-input v-model="formData['nursingLevel_3']"></el-input></div> 小时</label>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>呼吸机使用:</label>
        <el-select v-model="formData['ventilatorUse']">
          <el-option v-for="(item,index) in formData['ventilatorUseArr']" :key="index" :value="item['value']" :label="item['title']"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>有创呼吸机使用时间（小时）:</label>
        <el-input v-model="formData['ventilatorUseTime']"></el-input>
      </div>
    </div>
  </div>
</template>

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

let chooseData = reactive([])//表格中选中的数据 TODO
const tableData_top = reactive([])
const tableData_sub = ref([
  {

  },
  {

  }
])
let isChooseAll = ref(false);
const formData = ref({
  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 },
];

// 新增
const addItem = () => {
  let data = {
    //手术操作日期   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: '',

    //手术时长


    //手术方式


    //离院方式
    dscg_way: '',

    //是否有出院31天内再住院计划-----不确定
    days_rinp_flag_31: '',

    //目的
    days_rinp_pup_31: '',

    //颅脑损伤患者昏迷时间 入院前
    brn_damg_bfadm_coma_dura: '',
    //颅脑损伤患者昏迷时间 入院后
    brn_damg_afadm_coma_dura: '',

    //肿瘤分期
    //T
    //N
    //M
    //判断依据
    //分化程度  bkup_deg_code
    bkup_deg: '',

    //临床路径-进入路径
    //变异
    //退出路径

    //护理级别
    //特级护理
    spga_nurscare_days: '',
    //1级护理
    lv1_nurscare_days: '',
    //2级护理
    scd_nurscare_days: '',
    //3级护理
    lv3_nurscare_days: '',

    //呼吸机使用  vent_used_days  vent_used_h_cnt  vent_used_m_cnt
    vent_used_dura: '',
    //有创呼吸机使用时间













    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
  })

}
const checkItem = (e) => {
  chooseData = []
  e['isChoose'] = !e['isChoose']
  tableData_top.map((d) => {
    if (d['isChoose']) {
      chooseData.push(d)
    }
  })
}

const chooseAll = () => {
  isChooseAll.value = !isChooseAll.value

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

      checkItem(d)
    })
  }

}
//删除方法
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 msgSuccess = (msg) => {
  ElMessage({
    message: msg,
    type: 'success',
  })
}

</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;
}
.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;
    }
    .borderBottom {
      border-bottom: 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;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: 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;
      }
    }
  }
}
.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>