<template>
  <page-layer>
    <template #header>
      <el-date-picker type="daterange"
                      v-model="dateRange"
                      :shortcuts="shortcuts"
                      end-placeholder="结束日期"
                      range-separator="至"
                      start-placeholder="开始日期"
                      style="width: 200px">
      </el-date-picker>
      &nbsp;&nbsp;住院号：
      <el-input style="width: 90px" v-model="queryParams.patNo"></el-input>
      &nbsp;&nbsp;病房：
      <el-select style="width: 110px" v-model="queryParams.ward" clearable filterable>
        <el-option v-for="item in wardList" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      &nbsp;&nbsp;状态：
      <el-select style="width: 60px" v-model="queryParams.status">
        <el-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-divider direction="vertical" />
      <el-button icon="Search" type="primary" @click="querySurgeryList">查询</el-button>
      <el-button icon="Upload" type="success" @click="saveRecord">保存</el-button>
      <el-divider direction="vertical" />
      <el-button icon="Document" type="primary">护理记录单</el-button>
    </template>
    <template #aside>
      <el-table :data="surgeryList" :height="window.h - 10" stripe @row-click="handleClickSurgeryRow">
        <el-table-column label="住院号" prop="patNo" width="60"></el-table-column>
        <el-table-column label="姓名" prop="patName" width="50"></el-table-column>
        <el-table-column label="病房" prop="wardName" width="70"></el-table-column>
        <el-table-column label="手术" prop="opName"></el-table-column>
      </el-table>
    </template>
    <template #main>
      <div style="display: flex">
        <div>
          <div class="flex w100p need-margin line-bottom">
            <div>
              手术编号：{{currentSurgery.recordId}}
            </div>
            <div>
              住院号：{{currentSurgery.inpatientNo}}
            </div>
            <div>
              姓名：{{currentSurgery.patientName}}
            </div>
            <div>
              病房：{{currentSurgery.wardName}}
            </div>
            <div>
              手术次数：{{currentSurgery.opTimes}}
            </div>
          </div>
          <div class="flex w100p need-margin">
            <div>
              是否急诊：
              <el-select v-model="currentSurgery.urgentClinicFlag" style="width: 75px">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </div>
            <div>
              手术室号：
              <el-select v-model="currentSurgery.roomCode" style="width: 80px">
                <el-option v-for="item in allRooms" :value="item.code" :label="item.name" :disabled="item.statusFlag === 2"></el-option>
              </el-select>
            </div>
            <div>
              申请医生：
              <el-input v-model="currentSurgery.applyDocName" style="width: 80px" readonly @click="beforeSearch('applyDoc', 'physician')"></el-input>
            </div>
          </div>
          <div class="flex w100p">
            <div>
              手术名称：
              <el-input v-model="currentSurgery.opCode" style="width: 120px" readonly @click="beforeSearch('opCode', 'surgery')"></el-input>
              <el-input v-model="currentSurgery.opName" style="width: 300px" readonly @click="beforeSearch('opCode', 'surgery')"></el-input>
            </div>
          </div>
          <div class="flex w100p">
            <div>
              麻醉方法：
              <el-select v-model="currentSurgery.hocusCode" style="width: 300px" filterable>
                <el-option v-for="item in anstWays" :value="item.code" :label="item.name"></el-option>
              </el-select>
            </div>
          </div>
          <div class="flex w100p">
            <div>
              术前诊断：
              <el-input v-model="currentSurgery.diagBeforeCode" style="width: 120px" readonly @click="beforeSearch('diagBeforeCode','icd10')"></el-input>
              <el-input v-model="currentSurgery.diagBeforeOp" style="width: 300px" readonly @click="beforeSearch('diagBeforeCode','icd10')"></el-input>
            </div>
          </div>
          <div class="flex w100p">
            <div>
              术后诊断：
              <el-input v-model="currentSurgery.diagAfterCode" style="width: 120px" readonly @click="beforeSearch('diagAfterCode','icd10')"></el-input>
              <el-input v-model="currentSurgery.diagAfterOp" style="width: 300px" readonly @click="beforeSearch('diagAfterCode','icd10')"></el-input>
            </div>
          </div>
          <div class="flex w100p">
            <div style="width: 280px">
              手术开始时间：
              <el-date-picker v-model="currentSurgery.opStartDate" type="datetime" style="width: 160px"></el-date-picker>
            </div>
            <div>
              手术结束时间：
              <el-date-picker v-model="currentSurgery.opEndDate" type="datetime" style="width: 160px"></el-date-picker>
            </div>
          </div>
          <div class="flex w100p">
            <div style="width: 280px">
              麻醉开始时间：
              <el-date-picker v-model="currentSurgery.anstStartDate" type="datetime" style="width: 160px"></el-date-picker>
            </div>
            <div>
              麻醉结束时间：
              <el-date-picker v-model="currentSurgery.anstEndDate" type="datetime" style="width: 160px"></el-date-picker>
            </div>
          </div>
          <div class="flex w100p need-margin">
            <div>
              手术等级：
              <el-select v-model="currentSurgery.opScale" style="width: 90px">
                <el-option label="一级手术" value="4"></el-option>
                <el-option label="二级手术" value="3"></el-option>
                <el-option label="三级手术" value="2"></el-option>
                <el-option label="四级手术" value="1"></el-option>
              </el-select>
            </div>
            <div>
              手术部位：
              <el-select v-model="currentSurgery.partCode" style="width: 80px" filterable>
                <el-option v-for="item in srgyParts" :value="item.code" :label="item.name"></el-option>
              </el-select>
            </div>
            <div>
              手术体位：
              <el-select v-model="currentSurgery.bodyCode" style="width: 80px">
                <el-option value="0" label="仰卧位"></el-option>
              </el-select>
            </div>
          </div>
          <div class="flex w100p need-margin">
            <div>
              输血量：
              <el-input v-model="currentSurgery.bloodAmount" style="width: 60px" type="number"></el-input>
              毫升
            </div>
            <div>
              血型：
              <el-select v-model="currentSurgery.bloodType" style="width: 80px">
                <el-option label="A" value="1"></el-option>
                <el-option label="B" value="2"></el-option>
                <el-option label="O" value="3"></el-option>
                <el-option label="AB" value="4"></el-option>
                <el-option label="不详" value="5"></el-option>
                <el-option label="未查" value="6"></el-option>
              </el-select>
            </div>
            <div>
              Hbsag：
              <el-select v-model="currentSurgery.hbsag" style="width: 80px">
                <el-option label="未查" value="0"></el-option>
                <el-option label="阴性" value="1"></el-option>
                <el-option label="阳性" value="2"></el-option>
                <el-option label="不详" value="3"></el-option>
              </el-select>
            </div>
          </div>
          <div class="flex w100p need-margin">
            <div>
              是否感染：
              <el-radio-group v-model="currentSurgery.infectionFlag">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </div>
            <div>
              是否隔离：
              <el-radio-group v-model="currentSurgery.isolationIndicator">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="flex w100p">
            备注说明：
            <el-input v-model="currentSurgery.remark" style="width: 400px"></el-input>
          </div>
        </div>
        <div style="width: 300px; margin-left:32px;">
          <div class="flex vertical-center">
            主刀医生：
            <el-input v-model="currentSurgery.doctorZdName" style="width: 100px" @click="beforeSearch('doctorZd', 'physician')"></el-input>
          </div>
          <div class="flex vertical-center">
            一助医生：
            <el-input v-model="currentSurgery.doctor1Name" style="width: 100px" @click="beforeSearch('doctor1', 'physician')"></el-input>
          </div>
          <div class="flex vertical-center">
            二助医生：
            <el-input v-model="currentSurgery.doctor2Name" style="width: 100px" @click="beforeSearch('doctor2', 'physician')"></el-input>
          </div>
          <div class="flex vertical-center">
            三助医生：
            <el-input v-model="currentSurgery.doctor3Name" style="width: 100px" @click="beforeSearch('doctor3', 'physician')"></el-input>
          </div>
          <div class="flex vertical-center">
            麻醉医生：
            <el-input v-model="currentSurgery.doctorMzYsName" style="width: 100px" @click="beforeSearch('doctorMzYs', 'physician')"></el-input>
          </div>
          <div class="flex vertical-center">
            巡回护士：
            <el-select v-model="currentSurgery.nurseXh" filterable style="width: 100px">
              <el-option v-for="item in allStaffs" :value="item.code" :label="item.name"></el-option>
            </el-select>
          </div>
          <div class="flex vertical-center">
            器械护士：
            <el-select v-model="currentSurgery.nurseQx" filterable style="width: 100px">
              <el-option v-for="item in allStaffs" :value="item.code" :label="item.name"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </template>
  </page-layer>
  <search v-if="showSearch"
          :title="titleOfSearch"
          :target="searchTarget"
          :show-emp-dept="searchTarget === 'physician'"
          @close="showSearch = false"
          @click-item="handleClickSearchResult">
  </search>
</template>

<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import Search from '@/components/search/Index.vue'
import store from "@/store";
import {shortcuts} from '@/data/shortcuts.js'
import {listIsBlank} from "@/utils/blank-utils";
import {ElMessage} from "element-plus";
import {formatDatetime, getDateRangeFormatDate} from "@/utils/date";
import {
  fetchBriefOpRecordList,
  fetchSurgeryRecord,
  getDicList,
  saveSurgeryRecord
} from '@/api/surgical-management/surgery-record'

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

const dateRange = ref([])
const wardList = ref([])
const allRooms = ref([])
const anstWays = ref([])
const srgyParts = ref([])
const allStaffs = ref([])
const queryParams = reactive({
  patNo: null,
  ward: null,
  status: '2',
})

const surgeryList = ref([])
const statusList = [
  { code: '2', name: '安排' },
  { code: '3', name: '完成' },
]

const querySurgeryList = () => {
  if (listIsBlank(dateRange.value)) {
    ElMessage.error('请先输入日期')
    return
  }
  let dates = getDateRangeFormatDate(dateRange.value)
  queryParams.startTime = dates.startTime
  queryParams.endTime = dates.endTime
  fetchBriefOpRecordList(queryParams).then(res => {
    surgeryList.value = res
  })
}

const currentSurgery = ref({})
const handleClickSurgeryRow = (row) => {
  fetchSurgeryRecord(row.recordId).then(res => {
    currentSurgery.value = res
  })
}

const showSearch = ref(false)
const titleOfSearch = ref('')
const searchTarget = ref('')
const targetCodeKey = ref('')
const targetNameKey = ref('')

const beforeSearch = (key, target) => {
  searchTarget.value = target
  targetCodeKey.value = key
  switch (key) {
    case 'applyDoc':
      targetNameKey.value = 'applyDocName'
      titleOfSearch.value = '申请医生'
      break
    case 'opCode':
      targetNameKey.value = 'opName'
      titleOfSearch.value = '手术名称'
      break
    case 'diagBeforeCode':
      targetNameKey.value = 'diagBeforeOp'
      titleOfSearch.value = '术前诊断'
      break
    case 'diagAfterCode':
      targetNameKey.value = 'diagAfterOp'
      titleOfSearch.value = '术后诊断'
      break
    case 'doctorZd':
      targetNameKey.value = 'doctorZdName'
      titleOfSearch.value = '主刀医生'
      break
    case 'doctor1':
      targetNameKey.value = 'doctor1Name'
      titleOfSearch.value = '一助医生'
      break
    case 'doctor2':
      targetNameKey.value = 'doctor2Name'
      titleOfSearch.value = '二助医生'
      break
    case 'doctor3':
      targetNameKey.value = 'doctor3Name'
      titleOfSearch.value = '三助医生'
      break
    case 'doctorMzYs':
      targetNameKey.value = 'doctorMzYsName'
      titleOfSearch.value = '麻醉医生'
      break
  }
  showSearch.value = true
}

const handleClickSearchResult = (val) => {
  currentSurgery.value[targetCodeKey.value] = val.code
  currentSurgery.value[targetNameKey.value] = val.name
  showSearch.value = false
}

const saveRecord = () => {
  currentSurgery.value.opStartDate = formatDatetime(currentSurgery.value.opStartDate)
  currentSurgery.value.opEndDate = formatDatetime(currentSurgery.value.opEndDate)
  currentSurgery.value.anstStartDate = formatDatetime(currentSurgery.value.anstStartDate)
  currentSurgery.value.anstEndDate = formatDatetime(currentSurgery.value.anstEndDate)

  saveSurgeryRecord(currentSurgery.value).then(res => {
    ElMessage.success({
      message: res,
      type: 'success',
      duration: 2500,
      showClose: true
    })
  })
}

onMounted(() => {
  dateRange.value = [shortcuts[0].value[0], shortcuts[0].value[1]]
  getDicList().then(res => {
    wardList.value = res.allWards
    allRooms.value = res.allRooms
    anstWays.value = res.anstWays
    srgyParts.value = res.srgyParts
    allStaffs.value = res.allStaffs
  })
  querySurgeryList()
})
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  flex-wrap: nowrap;
  padding: 8px 0 8px 12px;
  color: black;
  border-left: 1px solid darkred;
  .w30p {
    width: 30%;
  }
  .w35p {
    width: 35%;
  }
}
.vertical-center {
  align-items: center;
}
.line-bottom {
  border-bottom: 1px solid black;
}
.need-margin > div {
  margin-right: 24px;
}
.w100p {
  width: 100%;
}
:deep(.flex .el-input__inner) {
  color: darkblue;
}
</style>