<template>
  <el-popover :width="0">
    <template #reference>
      <el-button>
        辅助工具
      </el-button>
    </template>
    <template #default>
      <template v-for="(value , key) in drawerRange">
        <el-divider>
          {{ key }}
        </el-divider>
        <div class="div_container">
          <div v-for="item in value" @click="handelClick(item)">
            {{ item.name }}
          </div>
        </div>
      </template>
    </template>
  </el-popover>
  <el-drawer
      v-model="drawer"
      direction="btt"
      append-to-body
      @opened="handleDrawerOpened"
      modal-class="change_padding"
      @closed="currentComp = ''"
      destroy-on-close
      size="100%"
      :with-header="false">
    <el-button class="close_but"
               type="danger"
               :style="{zIndex: zIndex}"
               icon="Close"
               @click="drawer =false">
      关闭
    </el-button>

    <Component :is="currentComp"/>
  </el-drawer>
</template>

<script setup lang="ts">
import EmrOrderList from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrOrderList.vue";
import {onMounted, ref, h, computed} from 'vue'
import EmrYzTemperature from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrYzTemperature.vue";
import {patInfo} from './emr-tools-store'
import EmrInspect from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrInspect.vue";
import {getServerDateApi} from "@/api/public-api";
import {formatDate} from "@/utils/date";
import InspectionReportIndex from "@/views/examination/InspectionReportIndex.vue";
import EmrGroupConsultation from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrGroupConsultation.vue";
import EmrOperation from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrOperation.vue";
import EmrHerbs from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrHerbs.vue";
import {
  emrMitt
} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
import {xcMessage} from "@/utils/xiaochan-element-plus";
import EmrElectrocardiogram from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrElectrocardiogram.vue";
import PimsWebView from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/PimsWebView.vue";
import FluorescenceTest
  from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/fluorescence-test/FluorescenceTest.vue";
import EmrTestV2 from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrTestV2/EmrTestV2.vue";
import {useZIndex} from "element-plus";
import {openPatientImage} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import BloodSugar from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/BloodSugar.vue";
import NreTable from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/NreTable.vue";

const props = defineProps({
  patInfo: {
    type: Object
  },
  emrData: {
    type: Object
  }
})

const emits = defineEmits(['toFillInData'])

const end = ref('')
const start = ref('')

const drawer = ref(false)


const toFillInData = (data) => {
  emits('toFillInData', data)
}

const index = ref(-1)
const open = (val) => {
  localStorage.removeItem('clipBoardData');
  drawer.value = true
  index.value = val
}

const close = () => {
  drawer.value = false
  index.value = -1
}

let emrChannel = new BroadcastChannel('emrChannel')
const emrChannelClick = (name) => {
  let str = {
    name,
    data: props.patInfo
  }
  let patInfoStr = JSON.stringify(str)
  if (emrMitt.emit('患者病区判断')) {
    emrChannel.postMessage(patInfoStr)
  } else {
    xcMessage.error('当前患者不存在您的病区，无法进行该操作。')
  }
}

const zIndex = ref(useZIndex().nextZIndex())
const handleDrawerOpened = () => {
  zIndex.value = useZIndex().nextZIndex()
}

function openWindow() {
  openPatientImage(patInfo.value.inpatientNo)
}

const propsPatientInfo = computed(() => {
  return {
    patNo: patInfo.value.inpatientNo,
    times: patInfo.value.admissTimes,
    onClose: close
  }
})

const drawerRange: {
  [key: string]: {
    name: string,
    comp?: () => any,
    click?: () => any
  }[]
} = {
  "查询": [
    {
      name: '检验',
      comp: () => {
        return h(InspectionReportIndex, {...propsPatientInfo.value, start: start.value, end: end.value})
      }
    },
    {
      name: '病理',
      comp: () => {
        return h(PimsWebView, {...propsPatientInfo.value})
      }
    }, {
      name: '荧光',
      comp: () => {
        return h('div', {style: {width: '100%', height: '100%'}},
            h(FluorescenceTest, {
              ...propsPatientInfo.value,
              showCopy: true
            }))
      }
    }, {
      name: '影像',
      click: () => {
        openWindow()
      }
    }, {
      name: '草药',
      comp: () => {
        return h(EmrHerbs, {...propsPatientInfo.value})
      }
    }, {
      name: '心电',
      comp: () => {
        return h(EmrElectrocardiogram, {...propsPatientInfo.value})
      }
    },
    // {
    //   name: '血糖',
    //   comp: () => {
    //     return h(BloodSugarQuery, {...propsPatientInfo.value})
    //   }
    // },
    {
      name: '血糖',
      comp: () => {
        return h(BloodSugar, {...propsPatientInfo.value})
      }
    }, {
      name: '麻醉',
      comp: () => {
        return h('iframe', {
          class: 'iframe_max_border0',
          src: `http://172.16.32.181/interface/patient/doc.html?admissionNum=${propsPatientInfo.value.patNo}&admissionTimes=${propsPatientInfo.value.times}`
        })
      }
    }
    ,
    {
      name: '护理',
      comp: () => {
        return h('iframe', {
          class: 'iframe_max_border0',
          src: `http://172.16.32.181/interface/patient/doc.html?admissionNum=${propsPatientInfo.value.patNo}&admissionTimes=${propsPatientInfo.value.times}`
        })
      }
    }
  ],
  "引用": [
    {
      name: '医嘱',
      comp: () => {
        return h(EmrOrderList, {...propsPatientInfo.value})
      }
    },
    {
      name: '检查',
      comp: () => {
        return h(EmrInspect, {...propsPatientInfo.value})
      }
    }, {
      name: '检验',
      comp: () => {
        return h(EmrTestV2, {...propsPatientInfo.value, isEmr: true})
      }
    },
    {
      name: '护理',
      comp: () => h(EmrYzTemperature, {...propsPatientInfo.value})
    },
    {
      name: '会诊',
      comp: () => h(EmrGroupConsultation, {...propsPatientInfo.value})
    },
    {
      name: '手术',
      comp: () => h(EmrOperation, {...propsPatientInfo.value, onToFillInData: toFillInData})
    },
    {
      name: '营养',
      comp: () => h(NreTable, {
        ...propsPatientInfo.value,
        defaultValue: [start.value, end.value],
        quote: (data) => {
          emrMitt.emit('dataSourcePadding', data)
          close()
        }
      })
    }
  ],
}


function handelClick(item) {
  if (item.click) {
    item.click()
  } else {
    setComp(item.comp)
  }
}

const currentComp = ref('')

const setComp = (comp) => {
  currentComp.value = comp
  drawer.value = true
}

onMounted(async () => {
  patInfo.value = props.patInfo
  start.value = formatDate(props.patInfo.admissDate)
  end.value = formatDate(await getServerDateApi())
  emrMitt.on('openTools', (val) => {
    open(val)
  })
})

</script>

<style lang="scss">
.change_padding {
  .el-drawer__body {
    padding: 5px !important;
  }
}

.close_but {
  position: absolute;
  top: 0.13rem;
  right: 0.07rem;
}

.div_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  width: max-content;

  div {
    width: 50px;
    border: 1px solid #000;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    user-select: none;
    cursor: pointer;
  }

}
</style>
