<!--
 * @Author: sjjh
 * @Date: 2025-09-09 13:49:40
 * @Description: 药品发送
-->
<template>
<div class="medicineCollect-container">
 <div class="patientList-container"> 
  <el-input v-model="searchValue" style="width: 240px" placeholder="床号/姓名" />
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    default-expand-all
    :data="data"
    show-checkbox
    node-key="id"
    @node-click="handleNodeClick"
  /></div>
 <div class="medicineList-container">
  <div class="filter-container">
    <el-space>
      <el-select v-model="tableFilterForm.type" placeholder="药品类型" style="width: 240px">
        <el-option key="1" label="西药" value="1"/>
        <el-option key="2" label="中药" value="2"/>
      </el-select>
      <el-select v-model="tableFilterForm.type" placeholder="医嘱类型" style="width: 240px">
        <el-option key="0" label="全部" value="0"/>
        <el-option key="1" label="长期" value="1"/>
        <el-option key="2" label="临时" value="2"/>
      </el-select>
      <span>截止时间</span>
      <el-date-picker
        v-model="tableFilterForm.endTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
      />
      <el-select v-model="tableFilterForm.dept" placeholder="领药科室" style="width: 240px">
        <el-option key="0" label="住院西药房" value="0"/>
        <el-option key="1" label="住院东药房" value="1"/>
        <el-option key="2" label="住院北药房" value="2"/>
        <el-option key="3" label="住院南药房" value="3"/>
      </el-select>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="primary" @click="collectDrug">领药申请</el-button>    
    </el-space>
    <el-space>
     
    </el-space>
  </div>
  <el-table :data="collectTsableData" row-key="id" style="width: 100%; height: 100%" border
        :span-method="arraySpanMethod">
        <el-table-column type="selection" />
        <el-table-column label="类型" prop="name" width="140">
          <template #default="{ row }">
            <span v-if="!row.children">长期/西药</span>
            <template v-else>
              {{ row.name }} 11 床【000000001】 &nbsp; 林俊杰 女/24 重 &nbsp;1级 自费 主诊断 医生：医生甲&nbsp; 预交金：1990.3
            </template>
          </template>
        </el-table-column>

        <el-table-column label="医嘱内容" prop="content" min-width="300px">
          <template #default="{ row }">
            <span v-if="row.children">{{ row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用法" prop="gender">
        </el-table-column>
        <el-table-column label="数量" prop="gender">
        </el-table-column>
        <el-table-column label="金额" prop="gender">
        </el-table-column>
        <el-table-column label="领取科室" prop="gender">
        </el-table-column>
        <el-table-column label="执行时间" prop="gender" min-width="300">
          <template #default="{ row }">
            <template v-if="!row.children">
              <div v-for="item in row.dates" :key="item.id">
                <el-space :size="10">
                    <span>{{ item.date }}</span>
                <span v-for="time in item.times" :key="time.id">

                  <el-checkbox v-model="time.checked" :label="`${time.time}`" border />
                </span>
                </el-space>
              </div>
            </template>
        </template>
        </el-table-column>
      </el-table>
 </div>
</div>
</template>
<script setup >
import { id } from 'element-plus/es/locale/index.mjs';
import { getCurrentInstance, onBeforeMount, onMounted, reactive,ref } from 'vue'
// const { proxy } = getCurrentInstance();
import { ElMessage, ElMessageBox } from 'element-plus'
const emits = defineEmits([])
const props = defineProps({
 
})
const state = reactive({
 
})

 const data =  ref([
  {
     label: '内科',
    id:1,
    children: [
      {
        label: '唐僧',
        id:11
      },
    ],
  },
 ])

const searchValue = ref('')
 const handleNodeClick=(data)=>{
   console.log(data)
   treeRef.value.setCheckedKeys([data.id])
 }

const treeRef = ref()

// ====表格
const tableFilterForm = ref({
  type: '',
  name: '',
})

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  console.log(row, column, rowIndex, columnIndex);
  // 如果是父级行
  if (row.children && row.children.length > 0) {
    if (columnIndex === 0) {
      return [1, 1]
    }
    // 如果是患者列
    if (columnIndex === 1) {
      return [1, 7]
    } else {
      return [1, 0]
    }
  }
  // 如果是子级行，显示其他列
  if (!row.children || row.children.length == 0) {
    return [1, 1]
  }
  // 如果是父级行，隐藏其他列
  return [1, 1]
}
const collectTsableData = ref([
// {
//     id: 1,
//     name: '唐僧',
//     age: 20,
//     gender: '男',

//     children: [
//       {
//         name: '',
//         age: 10,
//         gender: '男',
//         content: '维生素B12注射液【1ml：0.5mg*1】  ',
//         dates: [{
//           date: '05/04',
//           times: [{
//             time: '08:00',
//             nurse: '刘护士',
//             checked: false
//           }, {
//             time: '12:00',
//             nurse: '刘护士',
//             checked: false
//           }]
//         }, {
//           date: '05/05',
//           times: [{
//             time: '08:00',
//             nurse: '刘护士',
//             checked: false
//           }, {
//             time: '12:00',
//             nurse: '刘护士',
//             checked: false
//           }]
//         }]
//       }, {
//         name: '',
//         age: 10,
//         gender: '男',
//         content: '维生素B12注射液【1ml：0.5mg*1】  ',
//         dates: [{
//           date: '05/04',
//           times: [{
//             time: '08:00',
//             nurse: '刘护士',
//             checked: false
//           }, {
//             time: '12:00',
//             nurse: '刘护士',
//             checked: false
//           }]
//         }, {
//           date: '05/05',
//           times: [{
//             time: '08:00',
//             nurse: '刘护士',
//             checked: false
//           }, {
//             time: '12:00',
//             nurse: '刘护士',
//             checked: false
//           }]
//         }]
//       }]
//   },
])

const handleSearch = () => {
    collectTsableData.value=[{
    id: 1,
    name: '唐僧',
    age: 20,
    gender: '男',

    children: [
      {
        name: '',
        age: 10,
        gender: '男',
        content: '维生素B12注射液【1ml：0.5mg*1】  ',
        dates: [{
          date: '05/04',
          times: [{
            time: '08:00',
            nurse: '刘护士',
            checked: false
          }, {
            time: '12:00',
            nurse: '刘护士',
            checked: false
          }]
        }, {
          date: '05/05',
          times: [{
            time: '08:00',
            nurse: '刘护士',
            checked: false
          }, {
            time: '12:00',
            nurse: '刘护士',
            checked: false
          }]
        }]
      }, {
        name: '',
        age: 10,
        gender: '男',
        content: '维生素B12注射液【1ml：0.5mg*1】  ',
        dates: [{
          date: '05/04',
          times: [{
            time: '08:00',
            nurse: '刘护士',
            checked: false
          }, {
            time: '12:00',
            nurse: '刘护士',
            checked: false
          }]
        }, {
          date: '05/05',
          times: [{
            time: '08:00',
            nurse: '刘护士',
            checked: false
          }, {
            time: '12:00',
            nurse: '刘护士',
            checked: false
          }]
        }]
      }]
  },
]
}
// ====collectDrug
const collectDrug=()=>{
  ElMessageBox.confirm(
    '是否确认领药申请？',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '申请成功！',
      })
      collectTsableData.value=[]
    })
    .catch(() => {
    })
}
onBeforeMount(() => {
 
})
onMounted(() => {
 
})
defineExpose({ state })
 
</script> 
<style lang="scss" scoped>
 .medicineCollect-container{
     display: flex;
     height: 100%;
     padding: 8px;
     .patientList-container{
        width: 300px;
        height: 100%;
     }
     .medicineList-container{
        flex: auto;
        .filter-container{
            height: 44px;
        }

     }
 }
</style>