<template>
  <page-layer>
    <template #header>
      <span>时间：</span>
      <el-date-picker v-model="date" type="datetime" style="width: 170px" placeholder="选择日期时间"></el-date-picker>
      <span>住院号：</span>
      <el-input v-model="inpatientNo" @blur="inpatientNo = $event.target.value.trim()" clearable
                placeholder="填写住院号" prefix-icon="Search" style="width: 200px"></el-input>
      <span>住院次数：</span>
      <el-input
          placeholder="只能输入数字"
          v-model="admissTimes"
          clearable
          @blur="admissTimes = $event.target.value.trim()"
          prefix-icon="Search"
          oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          style="width: 200px">
      </el-input>
      <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="success" @click="xinShouZhiYon = true">新手指引</el-button>
    </template>
    <template #main>
      <div class="dataTable">
        <table>
          <tr>
            <td>
              <el-tag>姓名</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.patientName"></el-input>
            </td>
            <td>
              <el-tag>日期</el-tag>
            </td>
            <td>
              <el-input prefix-icon="Date" v-model="returnData.toStringRecDate" disabled></el-input>
            </td>
            <td>
              <el-tag>时间</el-tag>
            </td>
            <td>
              <el-input disabled prefix-icon="Time" v-model="returnData.toStringRecTime"></el-input>
            </td>
            <td>
              <el-tag>体温</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.temperature1"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>心率/脉搏</el-tag>
              <el-tag type="info">次/min</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.pulse1"></el-input>
            </td>
            <td>
              <el-tag>呼吸</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.breathe1"></el-input>
            </td>
            <td>
              <el-tag>Sp02 %</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.spo2"></el-input>
            </td>
            <td>
              <el-tag>意识</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.mind"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>皮肤</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.skin"></el-input>
            </td>
            <td>
              <el-tag>护士签名</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.userid"></el-input>
            </td>
            <td>
              <el-tag>血压</el-tag>
              <el-tag type="info">AM</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.pressure1Am"></el-input>
            </td>
            <td>
              <el-tag>血压</el-tag>
              <el-tag type="info">PM</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.pressure1Pm"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>管道名称</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.tubesName"></el-input>
            </td>
            <td>
              <el-tag>管道情况</el-tag>
            </td>
            <td>
              <el-input disabled v-model="returnData.tubesStatus"></el-input>
            </td>
            <td>
              <el-tag>病情观察</el-tag>
              <br/>
              <el-tag>护理措施及效果</el-tag>
            </td>
            <td colspan="3" rowspan="4">
              <el-input :rows="3" style="width: 96%" disabled type="textarea"
                        v-model="returnData.splicingOtherInfo"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>病区</el-tag>
            </td>
            <td>
              <el-select style="width: 90%" filterable v-model="returnData.ward">
                <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>
            </td>
          </tr>
        </table>
      </div>
      <el-button @click="xiuGai" v-if="xiuGaiFlag" size="small" type="success">修改</el-button>
      <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0, 0, 0, 0.5)"
           v-show="xinShouZhiYon">
        <el-image style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px"
                  :src="huLiJiLvDan"></el-image>
        <el-button style="position: absolute; top: 10px; right: 20px" @click="closeViewer" type="danger">关闭
        </el-button>
      </div>
    </template>
  </page-layer>
</template>

<script>
import {ref} from '@vue/reactivity'
import {formatDatetime} from '@/utils/date'
import {ElMessageBox, ElNotification} from 'element-plus'
import {getWard, modify, queryYzTemperature} from '@/api/yz-data-mod/yz-temperature-modify'
import {onMounted} from 'vue'
import huLiJiLvDan from '@/assets/novice-guide/huLiJiLvDan.png'
import PageLayer from "@/layout/PageLayer";

export default {
  name: 'YzTemperatureModify',
  components: {PageLayer},
  setup() {
    const inpatientNo = ref('')
    const date = ref('')
    const admissTimes = ref('')

    //返回的数据
    const returnData = ref([])

    //获取病室的信息
    const ward = ref([])

    //修改的按钮
    const xiuGaiFlag = ref(false)

    //修改信息
    const xiuGai = () => {
      ElMessageBox.confirm('确定要修改吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            modify(returnData.value).then((res) => {
              returnData.value = []
              xiuGaiFlag.value = false
            })
          })
          .catch(() => {
          })
    }

    onMounted(() => {
      getWard().then((res) => {
        ward.value = res
      })
    })

    const query = () => {
      if (inpatientNo.value && admissTimes.value && date.value) {
        queryYzTemperature(formatDatetime(date.value), inpatientNo.value, admissTimes.value)
            .then((res) => {
              returnData.value = res
              xiuGaiFlag.value = true
            })
            .catch(() => {
              returnData.value = []
              xiuGaiFlag.value = false
            })
      } else {
        ElNotification({
          type: 'error',
          title: '错误',
          message: '必须全部填写',
        })
      }
    }

    //点击查看新手教程
    const xinShouZhiYon = ref(false)

    const closeViewer = () => {
      xinShouZhiYon.value = false
    }

    return {
      query,
      inpatientNo,
      date,
      admissTimes,
      returnData,
      ward,
      xiuGai,
      xiuGaiFlag,
      closeViewer,
      xinShouZhiYon,
      huLiJiLvDan,
    }
  },
}
</script>

<style>
.dataTable table {
  width: 95%;
}

.dataTable table tr td {
  text-align: end;
}

.dataTable table tr {
  line-height: 40px;
}

.dataTable table .el-input {
  width: 90%;
}

.dataTable .el-tag {
  font-size: 9px;
}
</style>
