<template>
  <div style="width: 100%">
    <div style="margin-bottom: 5px">
      <el-button type="primary" @click="handleAddPrescription()" :disabled="false">
        新增
      </el-button>
      <el-button type="danger" plain @click="handleDelete()" :disabled="false"> 删除 </el-button>
    </div>
    <el-table
      max-height="650"
      ref="prescriptionRef"
      :data="prescriptionList"
      row-key="uniqueKey"
      border
      @row-dblclick="clickRowDb"
      :expand-row-keys="expandOrder"
    >
      <el-table-column label="手术操作日期" align="center" prop="productName" width="400">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.occurrenceTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="手术操作日期"
            :default-time="defaultTime"
          />
        </template>
      </el-table-column>
      <el-table-column label="手术级别" align="center" prop="" width="90">
        <template #default="scope">
          <el-select v-model="scope.row.operationLevel" placeholder="请选择手术级别">
            <el-option
              v-for="item in operationLevelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="手术及操作名称" align="center" prop="">
        <template #default="scope">
          <el-select
            v-model="scope.row.operationName"
            placeholder="请选择手术及操作名称"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in operationNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="手术及操作医师">
        <el-table-column
          prop="name"
          label="术者">
          <template #default="scope">
            <el-select
              v-model="scope.row.operationDoctor"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in operationDoctorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="nameFirst"
          label="Ⅰ助">
          <template v-slot="scope">
            <el-select
              v-model="scope.row.nameFirst"
              style="width: 100%"
            >
              <el-option
                v-for="item in operationDoctorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="nameFirst"
          label="Ⅱ助">
          <template v-slot="scope">
            <el-select
              v-model="scope.row.nameSecond"
              style="width: 100%"
            >
              <el-option
                v-for="item in operationDoctorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="form-row">
      <div class="form-item">
        <label>手术方式:</label>
        <el-select v-model="formData.surgeryType">
          <el-option value="" label="请选择"></el-option>
          <el-option value="1" label="择期手术"></el-option>
          <el-option value="2" label="限期手术"></el-option>
          <el-option value="3" label="急诊手术"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>离院方式:</label>
        <el-select v-model="formData.surgeryType">
          <el-option value="" label="请选择"></el-option>
          <el-option value="1" label="医嘱离院"></el-option>
          <el-option value="2" label="医嘱转院"></el-option>
          <el-option value="3" label="医嘱转社区卫生服务机构"></el-option>
          <el-option value="4" label="非医嘱离院"></el-option>
          <el-option value="5" label="死亡"></el-option>
          <el-option value="9" label="其他"></el-option>
        </el-select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <label>是否有出院31天内再住院计划:</label>
        <el-select v-model="formData.hospitalizationPlan">
          <el-option value="" label="请选择"></el-option>
          <el-option value="1" label="无"></el-option>
          <el-option value="2" label="有"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>目的:</label>
        <el-input v-model="formData.purpose"></el-input>
      </div>
    </div>
  </div>
</template>
      
<script setup>
import { getCurrentInstance, nextTick, ref, watch } from 'vue';

const emit = defineEmits(['selectDiagnosis']);
const prescriptionList = ref([]);
const form = ref({
  prescriptionList: prescriptionList.value,
});
const adviceQueryParams = ref({});
const rowIndex = ref(-1);
const nextId = ref(1);
const operationLevelList = [
  { name: '一级', id: 1 },
  { name: '二级', id: 2 },
  { name: '三级', id: 3 },
];
const operationDoctorList = ref([]);
const formData = ref({});
const props = defineProps({
  
});
const isAdding = ref(false);
const prescriptionRef = ref();
const expandOrder = ref([]); //目前的展开行
const { proxy } = getCurrentInstance();
const requiredProps = ref([]); // 存储必填项 prop 顺序
const handleSaveDisabled = ref(false)  //签发状态
watch(
  () => expandOrder.value,
  (newValue) => {
     console.log(newValue,"监听·")
    if (newValue.length > 0) {
      nextTick(() => {
       
        const index = prescriptionList.value.findIndex((row) => row.uniqueKey === newValue[0]);
        const items = proxy.$refs['formRef' + index]?.$el?.querySelectorAll('[data-prop]');
        requiredProps.value = Array.from(items).map((item) => item.dataset.prop);
      });
    } else {
      requiredProps.value = {};
    }
  }
);
watch(
  () => prescriptionList.value,
  (newValue) => {
    console.log(prescriptionList.value,"prescriptionList.value")
    if(newValue&&newValue.length>0){
      let saveList = prescriptionList.value.filter((item) => {
        return item.statusEnum == 1&&(Number(item.bizRequestFlag)==1||!item.bizRequestFlag)
      })
      prescriptionList.value.map(k=>{
        k.check = false
      })
       console.log(saveList,"prescriptionList.value")
      if (saveList.length == 0) {
        handleSaveDisabled.value = true
      }else{
        handleSaveDisabled.value = false
      }
    }
  },
  { immediate: true }
);

// 新增
function handleAddPrescription() {
  if (isAdding.value) {
    proxy.$modal.msgWarning('请先保存');
    return;
  }
  isAdding.value = true;
  // 在数组最前方添加一行，让新增行显示在最上边
  prescriptionList.value.unshift({
    uniqueKey: nextId.value++,
    showPopover: false,
    check: false,
    isEdit: true,
    statusEnum: 1,
  });
  nextTick(() => {
    proxy.$refs['adviceRef0'].focus();
  });
}

// 行双击打开编辑块，仅待发送的可编辑
function clickRowDb(row) {
  if (row.statusEnum == 1) {
    row = { ...row, ...JSON.parse(row.contentJson) };
    row.isEdit = true;
    const index = prescriptionList.value.findIndex((item) => item.uniqueKey === row.uniqueKey);
    prescriptionList.value[index] = row;
    console.log(prescriptionList.value,"prescriptionList.value")
    expandOrder.value = [row.uniqueKey];
  }
}

function handleDelete() {
  let deleteList = prescriptionList.value
    .filter((item) => {
      return item.check && item.statusEnum == 1;
    })
    .map((item) => {
      return {
        requestId: item.requestId,
        dbOpType: '3',
        adviceType: item.adviceType,
      };
    });
  if (deleteList.length == 0) {
    proxy.$modal.msgWarning('请选择要删除的项目');
    return;
  }
  expandOrder.value = [];
  isAdding.value = false;
  adviceQueryParams.value.adviceType = undefined;
}

</script>
    
<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
  display: none !important;
}
.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%;
}

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