<template>
  <emr-dual-screen v-if="isOpenDualScreen"/>
  <div style="color:#000;">
    <div class="yz__header">
      <huan-zhe-xin-xi
          :huan-zhe-xin-xi="patientInfo"/>
    </div>
    <div class="yz__main" style="overflow: auto">
      <div style="width: 158px" v-show="!isOpenDualScreen">
        <patient-list/>
      </div>
      <div ref="mainRef" class="resident_doctor__main"
           :style="{width: isOpenDualScreen ? '50%' : '100%'}">

        <div class="tag">
          <div v-for="(item,index) in pathList"
               :style="currentPagePosition(item.path)"
               @click="item.func? item.func(index) : handleClick(item.path,item.disable)">
              <span>
                {{ item.title }}
              </span>
          </div>
          <div @click="downloadGuide" style="background-color: red;color: white">
            <span>操作指南 {{ fileName }}</span>
          </div>
        </div>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component"/>
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script name="Home" setup>
import store from '@/store'
import {computed, ref, watch} from "vue";
import HuanZheXinXi from "@/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue";
import router from "@/router";
import {
  dualScreenSrc,
  huanZheXinXi as patientInfo,
  isOpenDualScreen,
  jcTree,
  jyTree,
  winsize,
  youWuXuanZheHuanZhe
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import PatientList from "@/components/zhu-yuan-yi-sheng/public/PatientList";
import {getDrgIntelligentGrouping} from "@/api/zhu-yuan-yi-sheng/emr-patient";
import {getJyJcZdTree} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import {ElMessageBox} from "element-plus";
import {getOperationGuide} from "@/api/public-api";
import {xcMessage} from "@/utils/xiaochan-element-plus";
import {isDev} from "@/utils/public";
import EmrDualScreen from "@/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/EmrDualScreen.vue";
import {getEmrUrl} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";

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

const width = store.state.app.windowSize.w - 158 + 'px'

let fileName = $ref('v1.1.0')

const handleClick = (path, disable) => {
  if (disable && !isDev) {
    xcMessage.info('该功能在开发中。。。')
  } else {
    router.push(path);
  }
}

let pathList = $ref([
  {path: '/inpatient/zhuYuanYiSheng/yiZhuLuRu', title: '医嘱录入'},
  {path: '/inpatient/zhuYuanYiSheng/yiZhuLuRu?pattern=takeMedicine', title: '出院带药'},
  {path: '/inpatient/zhuYuanYiSheng/huiZhenShenQing', title: '会诊申请'},
  {path: '/inpatient/zhuYuanYiSheng/jianChaShenQing', title: '检查申请'},
  {path: '/inpatient/zhuYuanYiSheng/jianYanShenQing', title: '检验申请'},
  {path: '/inpatient/zhuYuanYiSheng/shouShuShenQing', title: '查看手术'},
  {path: '/inpatient/zhuYuanYiSheng/caoYaoYiZhu', title: '查看草药医嘱'},
  {
    path: 'dualScreen',
    title: '双屏模式', func: () => {
      if (youWuXuanZheHuanZhe()) return
      isOpenDualScreen.value = !isOpenDualScreen.value
      dualScreenSrc.value = getEmrUrl(patientInfo.value.inpatientNo, patientInfo.value.admissTimes, 1)
    }
  },
  {
    title: '电子病历', func: () => {
      if (patientInfo.value.inpatientNo) {
        let query = {
          patNo: patientInfo.value.inpatientNo,
          times: patientInfo.value.admissTimes,
          state: 1
        };
        let te = JSON.stringify(query)
        let routeData = router.resolve({
          name: 'emrEditor',
          query: {
            pat: window.btoa(te)
          },
        })
        window.open(routeData.href, '_blank');
      } else {
        let routeData = router.resolve({
          name: 'emrEditor',
        })
        window.open(routeData.href, '_blank');
      }
    }
  },
  {
    title: 'DRG 预分组', func: () => {
      if (youWuXuanZheHuanZhe()) return
      getDrgIntelligentGrouping(patientInfo.value.inpatientNo, patientInfo.value.admissTimes).then((res) => {
        window.open(res)
      })
    }
  },
  {
    title: '病历模板', func: () => {
      window.open('http://webhis.thyy.cn:9281/', '_blank')
    },
    disable: true
  }
])

const currentPagePosition = (val) => {
  if (router.currentRoute.value.href === val) {
    return {
      backgroundColor: '#0a84fd',
      color: '#fff'
    }
  }

  if (val === 'download') {
    return {
      backgroundColor: 'red',
      color: '#fff'
    }
  }

  if (val === 'dualScreen') {
    return {
      backgroundColor: '#E6A23C',
      color: '#fff'
    }
  }

}

// 点击下载操作指南，先查询一遍最新的。
const downloadGuide = () => {
  getOperationGuide("住院医生教程").then((res) => {
    fileName = res
    ElMessageBox.confirm('请选择线上预览版本还是下载操作指南', '提示', {
      cancelButtonText: '下载',
      confirmButtonText: '线上预览',
      distinguishCancelAndClose: true
    }).then(() => {
      window.open(`http://webhis.thyy.cn:8080/download/操作指南/住院医生教程/住院医生操作指南 ${fileName}.pdf`, '_blank')
    }).catch((e) => {
      if (e === 'cancel') {
        window.open(`http://webhis.thyy.cn:8080/download/操作指南/住院医生教程/住院医生操作指南 ${fileName}.docx`, '_blank')
      }
    })
  })
}

const mainRef = ref()
onMounted(async () => {
  getOperationGuide("住院医生教程").then((res) => {
    fileName = res
  })
  await nextTick()
  winsize.value.main = mainRef.value.clientWidth
  getJyJcZdTree().then((res) => {
    jyTree.value = res.jy
    jcTree.value = res.jc
  })
})

</script>

<style lang="scss" scoped>

.yz__header {
  position: relative;

  .yz__close {
    position: absolute;
    right: 0;
    border: 1px solid;
  }

}

.yz__main {
  display: flex;

  .tag {
    display: flex;
    width: 100%;

    div {
      padding: 5px;
      border: 1px solid;
      cursor: pointer;
    }

    .download {

    }
  }
}

: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;
  }

}

.main {
  overflow: auto;
}

.resident_doctor__main {
  width: 100%;
  overflow: auto;
  position: relative;

  .doctor_main__setup {
    cursor: pointer;
    position: absolute;
    right: 4px;
    border: 1px solid;
    padding: 5px;
    top: 3px;
    border-radius: 4px;
    background-color: #0a84fd;
    color: white;
  }
}
</style>
