<template>
<div class="inHospitalDispensing-container">
  <div class="inHospitalDispensing-container-top">
    <el-space>
      <el-radio-group v-model="searchForm.status" @change="search">
        <el-radio-button label="待发药" value="1" />
        <el-radio-button label="待退药" value="2" />
      </el-radio-group>
      <el-select v-model="searchForm.window" 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-select v-model="searchForm.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>
      <el-date-picker
        v-model="searchForm.dateRange"
        type="daterange"
          range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-space>
    
  </div>
  <div class="inHospitalDispensing-container-bottom">
    <div class="inHospitalDispensing-container-bottom-left">
      <el-tree
      ref="treeRef"
      style="max-width: 600px"
      default-expand-all
      :data="treedata"
      show-checkbox
      node-key="id"
      @node-click="handleNodeClick"
      />
    </div>
    <div class="inHospitalDispensing-container-bottom-right">
      <div class="inHospitalDispensing-container-bottom-right-top">
        <el-radio-group v-model="isAll">
          <el-radio-button label="汇总" value="1" />
          <el-radio-button label="明细" value="2" />
        </el-radio-group>
        <el-button type="primary" @click="handleSearch">发药</el-button>
      </div>
      <div class="inHospitalDispensing-container-bottom-right-bottom">
        <el-table :data="tableData" style="width: 100% " height="100%" v-if="isAll==1">
          <el-table-column prop="drugGoodsName" label="名称" width="180" />
          <el-table-column prop="drugSpec" label="规格" width="180" />
          <el-table-column prop="drugSpec" label="总量" width="180" />
          <el-table-column prop="stockPlaceName" label="位置" width="180" />
          <el-table-column prop="manufactureName" label="厂家" width="180" />
          <el-table-column prop="drugGoodsCode" label="编码" width="180" />
          <el-table-column prop="drugFormName" label="剂型" width="180" />
          <el-table-column prop="packageNum" label="包装数量" width="180" />
          <el-table-column prop="maxUnit" label="包装单位" width="180" />
        </el-table>
        <el-table :data="tableDataDetails" style="width: 100%" height="100%" v-if="isAll==2">
          <el-table-column prop="receiveOrgName" label="科室" width="180" />
          <el-table-column prop="patBed" label="床号" width="180" />
          <el-table-column prop="patName" label="姓名" width="180" />
          <el-table-column prop="drugGoodsName" label="名称" width="180" />
          <el-table-column prop="drugSpec" label="规格" width="180" />
          <el-table-column prop="applyNumStr" label="数量" width="180" />
          <el-table-column prop="manufactureName" label="厂家" width="180" />
          <el-table-column prop="dosageAndUnit" label="每次剂量" width="180" />
          <el-table-column prop="usageName" label="用法" width="180" />
          <el-table-column prop="salePrice" label="单价" width="180" />
          <el-table-column prop="salePriceAmount" label="金额" width="180" />
          <el-table-column prop="stockPlaceName" label="位置" width="180" />
          <el-table-column prop="drugGoodsCode" label="编码" width="180" />
          <el-table-column prop="drugFormName" label="剂型" width="180" />
          <el-table-column prop="packageNum" label="包装数量" width="180" />
          <el-table-column prop="maxUnit" label="包装单位" width="180" />
          <el-table-column prop="purchasePrice" label="购入价" width="180" />
        </el-table>
      </div>
    </div>
  </div>
</div>
</template>
<script setup lang='ts'>
import { getCurrentInstance, onBeforeMount, onMounted, reactive,ref } from 'vue'
// const { proxy } = getCurrentInstance();
const emits = defineEmits([])
const props = defineProps({
 
})
const state = reactive({
 
})
// 1111
const searchForm=reactive({
  status:'1',
  type: '0',
  dateRange: [new Date(), new Date()],
  window: '0',
})
const handleSearch = () => {
  console.log(searchForm)
  treedata.value = [{
    label: '内科',
    id: 1,
    children: [
      {
        label: '唐僧',
        id: 11
      },
    ],
  }]

  tableDataDetails.value=[ {
  patName: '唐僧',
  patBed: '1-3',
  receiveOrgName: '心内科',
  drugGoodsName: '维生素E软胶囊',
  drugSpec: '50mg*60粒/瓶',
  applyNumStr: '1瓶',
  manufactureName: '浙江医药股份有限公司新昌制药厂',
  dosage: '50',
  dosageUnitName: 'mg',
  usageName: '口服',
  salePrice: 19,
  salePriceAmount: 19.0000,
  stockPlaceName: null,
  drugGoodsCode: '331408',
  drugFormName: '软胶囊',
  packageNum: 60,
  maxUnit: '瓶',
  purchasePrice: 19,
  }
    ]

    tableData.value=[ {
    patName: '唐僧',
    patBed: '1-3',
    receiveOrgName: '心内科',
    drugGoodsName: '维生素E软胶囊',
    drugSpec: '50mg*60粒/瓶',
    applyNumStr: '1瓶',
    manufactureName: '浙江医药股份有限公司新昌制药厂',
    dosage: '50',
    dosageUnitName: 'mg',
    usageName: '口服',
    salePrice: 19,
    salePriceAmount: 19.0000,
    stockPlaceName: null,
    drugGoodsCode: '331408',
    drugFormName: '软胶囊',
    packageNum: 60,
    maxUnit: '瓶',
    purchasePrice: 19,
  }, {
    patName: '唐僧',
    patBed: '1-3',
    receiveOrgName: '心内科',
    drugGoodsName: '5%葡萄糖注射液(直立式聚丙烯)',
    drugSpec: '5%*50ml/瓶',
    applyNumStr: '2瓶',
    manufactureName: '湖南科伦制药有限公司',
    dosage: '50',
    dosageUnitName: 'ml',
    usageName: '静脉注射',
    salePrice: 2,
    salePriceAmount: 2.0000,
    stockPlaceName: null,
    drugGoodsCode: '331243',
    drugFormName: '注射液',
    packageNum: 1,
    maxUnit: '瓶',
    purchasePrice: 2,
  }
   ]

}
// 2222
const treedata = ref([
  {
     label: '内科',
    id:1,
    children: [
      {
        label: '唐僧',
        id: 11
      },
    ],
  },
 ])
const treeRef = ref()
const handleNodeClick=(data)=>{
  console.log(data)
  treeRef.value.setCheckedKeys([data.id])
}
//  3333
const isAll = ref('1')
const tableData = ref([
  {
    date: '2023-05-01',
    name: '药品1',
    age: 10,
    gender: '男',
    content: '维生素B12注射液【1ml：0.5mg*1】  ',
  },
])
const tableDataDetails = ref([
  {
    date: '2023-05-01',
    name: '药品1',
    age: 10,
    gender: '男',
    content: '维生素B12注射液【1ml：0.5mg*1】  ',
  },
])
onBeforeMount(() => {
 
})
onMounted(() => {
 
})
defineExpose({ state })
 
</script> 
<style lang="scss" scoped>
.inHospitalDispensing-container{
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .inHospitalDispensing-container-top{
    height: 44px;
    width: 100%;
    padding: 0px 16px;
    flex:none;
    align-items: center;
    display: flex;
  }
  .inHospitalDispensing-container-bottom{
    width: 100%;
    height: 300px;
    flex:auto;
    display: flex;
    .inHospitalDispensing-container-bottom-left{
      width: 300px;
      flex:none
    }
    .inHospitalDispensing-container-bottom-right{
      flex:auto;
      width: calc(100% - 300px);
      padding: 0px 16px;
      .inHospitalDispensing-container-bottom-right-top{
        height: 44px;
        width: calc(100% - 32px);
        padding: 0px 16px;
        align-items: center;
        flex:none;
        display: flex;
        justify-content: space-between;
      }
      .inHospitalDispensing-container-bottom-right-bottom{
        flex:auto;
        height: 100%;
        width: 100%;
        background-color: #fff;
      }
    }
  }
}
</style>