<template>
    <emr-control-rule/>
    <div style="color:#000;height: 100%;width: 100%;min-width: 1200px">
        <div ref="yzHeader">
            <huan-zhe-xin-xi
                    :huan-zhe-xin-xi="patientInfo"/>
        </div>
        <div class="yz__main"
             :style="{height:`calc(100vh - ${yzHeaderHeight}px)`}">
            <!--            v-if="!returnToTheConsultation"-->
            <div style="width: 158px" v-if="!returnToTheConsultation">
                <patient-list :height="windowSize.h  - (yzHeaderHeight  - 30 )  "/>
            </div>
            <div>
                <yz-tag :patient-info="patientInfo"/>
                <el-scrollbar
                        :style="{width: 'calc(100vw - 160px)',
                                 height:`calc(100vh - (${yzHeaderHeight}px + 27px))`
                                }">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component :is="Component"/>
                        </keep-alive>
                    </router-view>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script name="Home" setup>
import store from '@/store'
import {computed, ref} from "vue";
import HuanZheXinXi from "@/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue";
import {
    huanZheXinXi as patientInfo,
    jcTree,
    jyTree, yzHeaderSize,
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import PatientList from "@/components/zhu-yuan-yi-sheng/public/PatientList";
import {getJyJcZdTree} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import EmrControlRule from "@/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/EmrControlRuleDialog.vue";
import YzTag from "@/components/zhu-yuan-yi-sheng/YzTag.vue";
import {useElementSize} from "@vueuse/core";
import router from "@/router";
import {shortcutTrigger, xcEvent} from "@/utils/xckeydown";
import {initWebSocket} from "@/utils/websocket";
import {uuid} from "@/utils/getUuid";


const windowSize = computed(() => {
    return store.state.app.windowSize
})

const yzHeader = ref(null)
const {height: yzHeaderHeight} = useElementSize(yzHeader)

let keyWatch = null
let shortcutKeyRegistration = {
    'F2': () => {
        router.push('/')
    }
}

onDeactivated(() => {
    if (keyWatch != null) {
        keyWatch()
    }
})

const returnToTheConsultation = ref(true)


onActivated(() => {
    returnToTheConsultation.value = !!router.currentRoute.value.params.consultation;
    keyWatch = watch(() => xcEvent.value, () => {
        shortcutTrigger(xcEvent.value, shortcutKeyRegistration)
    })
})

watch(() => yzHeaderHeight.value, () => {
    yzHeaderSize.value = yzHeaderHeight.value
}, {immediate: true})

const initSocket = () => {
    const sid = store.getters['user/sid']
    if (sid && sid !== 'undefined') {
        initWebSocket(sid + uuid(8, 62))
    } else {
        router.push('/login')
    }
}


onMounted(async () => {
    if (store.getters['user/token']) {
        initSocket()
    }
    await nextTick()
    getJyJcZdTree().then((res) => {
        jyTree.value = res.jy
        jcTree.value = res.jc
    })
})

</script>

<style lang="scss" scoped>

.yz__main {
  display: flex;
}

:deep(el-tabs el-tabs--top demo-tabs) {
  background-color: white;
}

.tabs {
  background-color: #e5e7eb;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 3px;

}

.tab-item {
  line-height: 30px;
  text-align: center;

  &:hover span {
    color: #0a84fd;
    cursor: pointer;
  }

}

</style>
