<template>
  <el-container>
    <el-header>
      <el-row :gutter="3" style="width: 100%">
        <el-col :span="5">
          <el-select   filterable v-model="queryParam.wardCode"  style="width: 130px;" size="small" @change="wardChange">
            <el-option v-for="item in ward" :key="item.code" :label="item.name" :value="item.code">
              <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          输入码：<el-input  v-model="queryParam.keyWard" style="width: 150px" clearable placeholder="支持住院号或姓名" >
          <template  #append>
            <el-button icon="Search" @click="queryInfo" title="查询" />
          </template>
        </el-input>
        </el-col>
        <el-col :span="5">
          转科病房：<el-popover :visible="visible" width="400" placement="right-end" trigger="click">
          <template #reference>
            <el-input v-model="queryParam.zkWardCode"    @click="visible = true" style="width: 100px" clearable />
          </template>
          <div style="width: 380px;">
            <div style="text-align: right">
              <el-button title="关闭" icon="CloseBold" @click="visible = false"></el-button>
            </div>
            <el-table :data="zkWard"  @row-click="fetchZkWard"  height="400">
              <el-table-column  property="dept_name" label="科室名称" />
              <el-table-column  property="name" label="病房名称" />
            </el-table>
          </div>
        </el-popover>
        </el-col>
        <el-col :span="5">
          小科室：<el-select   filterable v-model="queryParam.smallWardCode" clearable style="width: 130px;" size="small" >
          <el-option v-for="item in smallWard" :key="item.code" :label="item.name" :value="item.code">
            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="success"  @click="saveData"> 保存</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div :style="divStyle">
        <div style="width: 55%;border: 1px #6b778c solid">
          <div style="margin-left: 20px">
            <el-tag>在院病人列表</el-tag>
          </div>
          <div>
            <el-table :data="zyPatientList"  highlight-current-row style="width: 100%" @row-click="selectZkPatient"  :height="windowHeight-95">
              <el-table-column  property="inpatientNo" label="住院号" />
              <el-table-column  property="bedNo" label="床号" />
              <el-table-column  property="name" label="姓名" />
              <el-table-column  property="fileStatus" label="状态" />
              <el-table-column  property="wardName" label="病房" />
              <el-table-column  property="zkWardName" show-overflow-tooltip label="待转病房" />
              <el-table-column   label="入院日期" width="110" >
                <template #default="scope">
                  {{getFormatDatetime(scope.row.admissDate,'YYYY-MM-DD')}}
                </template>
              </el-table-column>
              <el-table-column  property="admissTimes" label="住院次数" />
            </el-table>
          </div>
        </div>
        <div :style="centerDive" class="centerClass">
          <div >
            <el-button  size="large" icon="DArrowRight"   @click="addRight"/>
          </div>
          <div style="margin-top: 10px">
            <el-button  size="large" icon="DArrowLeft"  @click="addLeft"/>
          </div>
        </div>
        <div style="width: 37% ;border: 1px #6b778c solid">
          <div style="margin-left: 20px">
            <el-tag>待转科病人列表</el-tag>
          </div>
          <div>
            <el-table :data="dZkPatientList" highlight-current-row style="width: 100%" @row-click="cancelZkPatient"  :height="windowHeight-95">
              <el-table-column  property="bedNo" label="床号" />
              <el-table-column  property="inpatientNo" label="住院号" />
              <el-table-column  property="name" label="姓名" />
              <el-table-column  property="admissTimes" label="次数" />
              <el-table-column  property="wardName" label="病房" />
            </el-table>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>


<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getAllWards} from "@/api/zhu-yuan-yi-sheng/resident-doctor";
import {querySmallWard,queryZyWard} from "@/api/medical-advice/medical-common";
import {queryZkPatient,queryZkBedVo,checkZk,saveZkData,createPatientDoor} from "@/api/medical-advice/patient-info";
import {ElMessage,ElMessageBox} from "element-plus";
import {stringIsBlank} from "@/utils/blank-utils"
import { getFormatDatetime } from "@/utils/date";

const windowHeight = window.innerHeight

interface QueryType{
  wardCode:string,
  keyWard:string,
  zkWardCode:string,
  smallWardCode:string,
}
const queryParam  = ref<QueryType>({
  wardCode:'',
  keyWard:'',
  zkWardCode:'',
  smallWardCode:'',

})


//病室
const ward = ref<any>([])
// 转科病房
const zkWard = ref([])
// 小科室
const smallWard = ref([])
const visible = ref<boolean>(false)
// 左边在院病人列表
const zyPatientList=ref([])
//右边待转科病人列表
const dZkPatientList = ref([])

onMounted(()=>{
  getAllWards().then((res:any)=>{
    ward.value =res
    queryParam.value.wardCode = res[0].code
    queryInfo()
  })

  queryZyWard().then((res:any)=>{
    zkWard.value = res
  })

})


const selectionLeftData = ref({})
// 选择在院列表数据
const  selectZkPatient = (row,index)=>{
  selectionLeftData.value = row
}

const selectionRightData = ref({})
// 取消需要转科的人
const cancelZkPatient =(row)=>{
  selectionRightData.value = row
}

const wardChange = ()=>{
  if(dZkPatientList.value.length > 0){
    queryZkBedVo({wardCode:selectionZkWard.value.code}).then((res:any)=>{
      dZkPatientList.value = res
    })
  }
  tempSelectionLeftData.value = []
  queryInfo()
}

const queryInfo =()=>{
  queryZkPatient(queryParam.value).then((res:any)=>{
    zyPatientList.value = res
  })
}

const saveData = () => {
  let param = dZkPatientList.value.filter(item => !stringIsBlank(item.inpatientNo))
  saveZkData(param).then((res: any) => {
    createPatientDoor(param).then((res:any)=>{})
    wardChange()
  })
}

const selectionZkWard = ref({})
const fetchZkWard = (row)=>{
  selectionZkWard.value= row
  queryParam.value.zkWardCode = row.name
  visible.value = false
  queryParam.value.smallWardCode = ''
    querySmallWard({code:row.dept_code}).then((res:any)=>{
       smallWard.value = res
    })
  queryZkBedVo({wardCode:row.code}).then((res:any)=>{
    dZkPatientList.value = res
  })
}

const addRight = ()=>{
  if(stringIsBlank(queryParam.value.wardCode)){
    ElMessage.error('请选择病室')
    return
  }

  if(stringIsBlank(queryParam.value.zkWardCode)){
    ElMessage.error('请选择转科病房')
    return
  }

  if(stringIsBlank(queryParam.value.smallWardCode)){
    ElMessage.error('请选择小科室')
    return
  }
  if(queryParam.value.smallWardCode == selectionLeftData.value.zkWard){
    ElMessage.error('原科室不能与转科室相同')
    return
  }

  ElMessageBox.confirm(
      `确定将病人:${selectionLeftData.value.name}值为转科状态吗?`,
      '',
      {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }
  )
      .then(() => {
        let param = {
          inpatientNo : selectionLeftData.value.inpatientNo,
          admissTimes : selectionLeftData.value.admissTimes,
          wardCode : selectionLeftData.value.ward,
          zkDept : queryParam.value.smallWardCode,
          deptCode: selectionZkWard.value.code,
        }
        checkZk(param).then((res:any)=>{
          // 没有就添加
          if(tempSelectionLeftData.value.findIndex(item=>item.inpatientNo==selectionLeftData.value.inpatientNo)==-1){
            tempSelectionLeftData.value.push(selectionLeftData.value)
          }
          let index = dZkPatientList.value.findIndex(item=>stringIsBlank(item.inpatientNo))
          zyPatientList.value.splice(zyPatientList.value.findIndex(item=>item.inpatientNo==selectionLeftData.value.inpatientNo),1)
          dZkPatientList.value[index].inpatientNo= selectionLeftData.value.inpatientNo
          dZkPatientList.value[index].name= selectionLeftData.value.name
          dZkPatientList.value[index].admissTimes= selectionLeftData.value.admissTimes
          dZkPatientList.value[index].origDept= selectionLeftData.value.ward
          dZkPatientList.value[index].origWard= selectionLeftData.value.zkWard
          dZkPatientList.value[index].origBed= selectionLeftData.value.bedNo
          dZkPatientList.value[index].consultPhysician= selectionLeftData.value.consultPhysician
          dZkPatientList.value[index].deptDirector= selectionLeftData.value.deptDirector
          dZkPatientList.value[index].referPhysician= selectionLeftData.value.referPhysician
          dZkPatientList.value[index].zkDept= queryParam.value.smallWardCode
        })
      })
}

// 左边选择的数据用于取消转科的数据
const tempSelectionLeftData = ref([])

const addLeft=()=>{
  if(stringIsBlank(selectionRightData.value.inpatientNo)){
    ElMessage.error('选择的数据不能为空')
    return
  }
 let temp = tempSelectionLeftData.value[tempSelectionLeftData.value.findIndex(item=>item.inpatientNo==selectionRightData.value.inpatientNo)]
  clearDZkPatientList(dZkPatientList.value.findIndex(item=>item.inpatientNo==selectionRightData.value.inpatientNo))
 zyPatientList.value.splice(0,0,temp)
  zyPatientList.value.sort(function (a, b) {
    let aBedNo = Number(a.bedNo) ? Number(a.bedNo) :100000
    let bBedNo = Number(b.bedNo) ? Number(b.bedNo) :100000
    if(aBedNo >= bBedNo){
      return 1
    }
    return -1
  })
}
// 取消清空左边的数据
function clearDZkPatientList(index){
  dZkPatientList.value[index].inpatientNo= ''
  dZkPatientList.value[index].name= ''
  dZkPatientList.value[index].admissTimes= null
  dZkPatientList.value[index].origDept= ''
  dZkPatientList.value[index].origWard= ''
  dZkPatientList.value[index].origBed= ''
  dZkPatientList.value[index].consultPhysician= ''
  dZkPatientList.value[index].deptDirector= ''
  dZkPatientList.value[index].referPhysician= ''
  dZkPatientList.value[index].zkDept= ''
}

const divStyle = ref<any>({
  width:'100%',
  height:(windowHeight-70)+'px',
  display: 'flex'
})

const centerDive = ref<any>({
  width:'8%',
  padding:`${windowHeight/2-70}px 0`
})

</script>

<style  scoped lang="scss">
.dsd{
  border: 1px red solid;
  display: flex;
  text-align: center;
}
.centerClass{
  text-align: center;
}

</style>