<template>
  <div style="height: 10%;display: flex">
    <el-button @click="copyClick">复制选中的值</el-button>
    <div class="describe">
      <div class="pat-info">
        <div>
          <test-describe front="姓名"
                         :text="inspectionHeader?.ptnt_NAME"/>
        </div>
        <div>
          <test-describe front="性别"
                         :text="filterSex(inspectionHeader?.ptnt_SEX)"/>
        </div>
        <div>
          <test-describe front="年龄"
                         :text="inspectionHeader.ptnt_AGE + filterAgeUnit(inspectionHeader.ptnt_AGE_UNIT) "/>
        </div>
        <div>
          <test-describe front="住院号"
                         :text="inspectionHeader.ptnt_NO"/>
        </div>
        <div>
          <test-describe front="科室"
                         :text="inspectionHeader.dept_NAME"/>
        </div>
        <div>
          <test-describe front="床号"
                         :text="inspectionHeader.ptnt_BED_NO"/>
        </div>
        <div>
          <test-describe front="标本类型"
                         :text="inspectionHeader.smpl_NAME "/>
        </div>
        <div>
          <test-describe front="申请项目"
                         :text="inspectionHeader?.aply_CNTN.substring(0, 13) + inspectionHeader.aply_CNTN.substring(13)"/>
        </div>
      </div>
      <div class="test-date">
        <div>
          <test-describe front="接收时间"
                         :text="inspectionHeader.aply_DATE "/>
        </div>
        <div>
          <test-describe front="检验时间"
                         :text="inspectionHeader.ordr_CREATE_DATE "/>
        </div>
        <div>
          <test-describe front="报告时间"
                         :text="inspectionHeader.audt_TIME "/>
        </div>
        <div>
          <test-describe front="送检医生"
                         :text="inspectionHeader.test_USR_NAME "/>
        </div>
        <div>
          <test-describe front="检验人"
                         :text="inspectionHeader.ordr_USR_NAME "/>
        </div>
        <div>
          <test-describe front="审核人"
                         :text="inspectionHeader.audt_USR_NAME "/>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <div style="display: flex">
          <div class="sidebar">
            <xc-table-v3 :height="height"
                         @row-click="sidebarRow"
                         :data="sidebarList"
                         :columns="sidebarColums"/>
          </div>
          <div class="main">
            <xc-table-v3 :height="height"
                         ref="tableRef"
                         :data="mainList"
                         :columns="mainColums"/>
          </div>
        </div>
      </template>
    </el-auto-resizer>
  </div>
</template>

<script setup name='EmrTest' lang="tsx">
// 查询检验
import {getServerDateApi} from "@/api/public-api";
import {queryInspectionDetail, queryInspectionsIndex} from '@/api/inspections'
import {patInfo} from './emr-tools-store'
import {onMounted, ref} from "vue";
import XcTableV3 from "@/components/xiao-chan/xc-table-v3/XcTableV3.vue";
import {XcColumn} from "@/components/xiao-chan/xc-table-v3/XcColumn";
import {xcMessage} from '@/utils/xiaochan-element-plus'
import TestDescribe from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/test-describe.vue";

const emits = defineEmits(['close'])
const sidebarList = ref()
const mainList = ref()
const tableRef = ref()
const inspectionHeader = ref({
  aply_CNTN: ''
})
const query = async () => {
  const param = {
    type: 1,
    content: patInfo.value.inpatientNo,
    start: patInfo.value.admissDate,
    end: await getServerDateApi(),
  }
  queryInspectionsIndex(param).then((res) => {
    sidebarList.value = res
  })
}

const sidebarColums: XcColumn<any>[] = [
  {title: '名称', key: 'aply_CTNT'}
]

const mainColums: XcColumn<any>[] = [
  {title: '选择', type: 'selection'},
  {title: '名称', key: 'itm_NAME'},
  {title: '结果', key: 'itm_SRC_VALUE'},
  {title: '单位', key: 'itm_UNIT'},
  {title: '说明', key: 'itm_ALERT'},
  {title: '参考值', key: 'range'},
]

const sidebarRow = (row) => {
  tableRef.value.table().clearSelection()
  queryInspectionDetail(row.ordr_ID).then((res) => {
    mainList.value = res.inspectionItems
    inspectionHeader.value = res.inspectionHeader
    console.log(res)
  })
}

const copyClick = () => {
  let temp = tableRef.value.table().getSelectionRows()
  if (temp.length === 0) {
    xcMessage.error('请先选选择数据')
  }
  let data = ''
  temp.forEach(item => {
    data += `${item.itm_NAME}    ${item.itm_VALUE}    ${item.itm_UNIT}     ${item.range}\n`
  })

  let copyData = {
    content: [{type: 'text', data}],
    plainText: data,
  }
  window.localStorage.setItem(
      "clipBoardData",
      JSON.stringify(copyData)
  )
  xcMessage.success('复制成功')
  emits('close')
}

function filterSex(val) {
  switch (val) {
    case '0':
      return '未填'
    case '1':
      return '男'
    case '2':
      return '女'
    case '3':
      return '未知'
  }
  return ''
}

function filterAgeUnit(val) {
  switch (val) {
    case '0':
      return '岁'
    case '1':
      return '月'
    case '2':
      return '天'
    case '3':
      return '时'
  }
  return ''
}

onMounted(() => {
  query()
})

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 90%;
}

.sidebar {
  width: 220px;
}

.main {
  width: 100%;
  height: 100%;
}

.describe {
  width: 100%;
  margin-left: 20px;
  font-size: 12px;

  .pat-info {
    display: flex;

    div {
      padding: 5px;
    }
  }

  .test-date {
    display: flex;

    div {
      padding: 5px;
    }
  }


}
</style>
