<template>
  <el-dialog v-model="dialogVisible" title="危急值上报详情" width="1000px" style="height: 720px">
    <div class="modal">
      <div class="modal-content">
        <div class="left-side">
          <!-- 左边的内容 -->
          <el-timeline style="max-width: 600px">
            <el-timeline-item :timestamp="formattedDate(warintinfo?.reportDate)" placement="top">
              <span>危急值上报</span>
            </el-timeline-item>
            <el-timeline-item
              :timestamp="new Date(conreadDateTime).toLocaleString().replace(/\//g, '-')"
              placement="top"
            >
              <span>检查端收到提醒</span>
            </el-timeline-item>
            <el-timeline-item
              :timestamp="formData.checkDateTime"
              placement="top"
              v-if="isshowwjztime"
            >
              <span>检查端确认危急值</span>
            </el-timeline-item>
            <el-timeline-item
              :timestamp="formData.checkDateTime"
              placement="top"
              v-if="isshowwjztime"
            >
              <span>检查端发送确认回执</span>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="right-side">
          <!-- 基础信息 -->
          <div class="info-section">
            <div class="section-title">基础信息</div>
            <el-form label-width="80px">
              <el-row :gutter="24">
                <el-col :span="9">
                  <el-form-item label="检查日期:" label-width="80">
                    <el-input
                      style="width: 160px"
                      :value="formatDate(rowinfo.examDate, 'YYYY-MM-DD HH:mm:ss')"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="姓名:" label-width="60">
                    <el-input :value="rowinfo.pname" style="width: 100px" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="性别:" label-width="50">
                    <el-input :value="rowinfo.gender" style="width: 100px" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="检查编号:">
                    <el-input :value="rowinfo.examId" style="width: 160px" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="检查机构:" label-width="30">
                    <el-input :value="rowinfo.orgName" style="width: 200px" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 上报信息 -->
          <div class="info-section">
            <div class="section-title">上报信息</div>
            <el-form label-width="80px">
              <el-row :gutter="24">
                <el-col :span="9">
                  <el-form-item label="上报机构:" label-width="100">
                    <el-input :value="warintinfo.reportorgName" style="width: 160px" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="7" style="padding: 0px">
                  <el-form-item label="上报医生:">
                    <el-input :value="warintinfo.reportDoctor" style="width: 100px" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上报时间:" label-width="50">
                    <el-input
                      style="width: 160px"
                      :value="formatDate(warintinfo.reportDate, 'YYYY-MM-DD HH:mm:ss')"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="危急值内容:" label-width="100px">
                <el-input v-model="warintinfo.warningContent" type="textarea" rows="3" />
              </el-form-item>
              <el-form-item label="备注:" label-width="100px">
                <el-input v-model="warintinfo.remark" type="textarea" rows="2" />
              </el-form-item>
            </el-form>
          </div>

          <!-- 处理信息 -->
          <div class="info-section">
            <div class="section-title">处理信息</div>
            <el-form label-width="80px">
              <el-row :gutter="24">
                <el-col :span="7">
                  <el-form-item label="接报医生:">
                    <el-input v-model="receivename" />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="处理医生:">
                    <el-input v-model="dealname" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="确认时间:">
                    <el-date-picker
                      v-model="formData.checkDateTime"
                      type="datetime"
                      placeholder="检查时间"
                      style="width: 190px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="备注:">
                <el-input v-model="warintinfo.readremark" type="textarea" rows="2" disabledz />
              </el-form-item>
            </el-form>
          </div>
          <el-form-item>
            <el-button type="primary" @click="save" :disabled="issaveshow">确认</el-button>
            <el-button @click="() => (dialogVisible = false)">取消</el-button>
          </el-form-item>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
import { WarningApi, WarningVO } from '@/api/system/warning'
import { formatDate, getNowDateTime } from '@/utils/formatTime'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const warintinfo = ref()
const rowinfo = ref() //外面传递的患者信息
const conreadDateTime = ref() //检查段收到时间
const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
const issaveshow = ref(false) //是否显示保存按钮
const receivename = ref() //接受医生
const dealname = ref() //处理医生
const isshowwjztime = ref(false) //是否显示确认危急值时间
const opendiag = async (row) => {
  //赋值传递过来的患者数据
  rowinfo.value = row
  resetForm()
  await getlogininfo() // 使用 ISO 格式的时间字符串

  //查询当前患者的危急值相关信息
  const data = await WarningApi.getexmidororgiddata(rowinfo.value.examId, rowinfo.value.orgId)
  warintinfo.value = data
  //处理时间轴相关
  if (!data.readDateTime) {
    await updatereadDateTime(data.id)
  } else {
    conreadDateTime.value = data.readDateTime
  }
  //确认时间 读取库 没有就当前时间
  if (data.checkDateTime) {
    formData.value.checkDateTime = formattedDate(data.checkDateTime)
    isshowwjztime.value = true
    issaveshow.value = true
  } else {
    formData.value.checkDateTime = new Date().toLocaleString().replace(/\//g, '-')
    isshowwjztime.value = false
    issaveshow.value = false
  }

  receivename.value = Profilevo.value.nickname
  dealname.value = Profilevo.value.nickname
  dialogVisible.value = true
}
//确认
async function save() {
  formData.value.id = warintinfo.value.id
  formData.value.receiveDoctor = receivename.value
  formData.value.dealDoctor = dealname.value
  formData.value.readremark = warintinfo.value.readremark
  const savedata = formData.value as unknown as WarningVO
  const data = await WarningApi.SaveupdateWarning(savedata)
  if (data) {
    isshowwjztime.value = true
    issaveshow.value = true
    message.alertSuccess('确认成功')
  }
}

//更新检查段收到危急值时间
async function updatereadDateTime(id) {
  conreadDateTime.value = new Date().toLocaleString().replace(/\//g, '-')
  await WarningApi.updateWarningdate(id, conreadDateTime.value, '')
}
//获取当前登录人信息
const getlogininfo = async () => {
  Profilevo.value = await getUserProfile()
}
nextTick(async () => {})

// 创建一个计算属性来转换时间戳
function formattedDate(timestamp) {
  const date = new Date(timestamp)
  const strdata = formatDate(date, 'YYYY-MM-DD HH:mm:ss')
  return strdata // 转换为本地日期时间字符串
}
const formData = ref({
  id: undefined,
  orgId: undefined,
  examId: undefined,
  regId: undefined,
  reportOrgId: '',
  reportorgName: undefined,
  reportDoctor: '',
  reportDate: undefined,
  warningContent: undefined,
  receiveDoctor: undefined,
  dealDoctor: undefined,
  checkDateTime: '',
  remark: undefined,
  warningProcess: undefined,
  readremark: undefined
})
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    orgId: undefined,
    examId: undefined,
    regId: undefined,
    reportOrgId: '',
    reportorgName: undefined,
    reportDoctor: '',
    reportDate: undefined,
    warningContent: undefined,
    receiveDoctor: undefined,
    dealDoctor: undefined,
    checkDateTime: '',
    remark: undefined,
    warningProcess: undefined,
    readremark: undefined
  }
  //重置一下数据
  warintinfo.value = ''
}
defineExpose({ opendiag }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
/**  */
defineOptions({ name: 'ECGReport' })
</script>

<style lang="css" scoped>
.modal {
  width: 950px;
  height: 650px;

  display: flex;
  justify-content: center;
}

.modal-content {
  display: flex;
  width: 100%; /* 可以根据需要调整宽度 */
}

.left-side {
  flex: 1; /* 左边div占据剩余空间的比例 */
}

.right-side {
  flex: 3;

  background-color: #fff;
}

.info-section {
  margin-bottom: 10px;
  padding: 2px;
  border: 1px solid #d7d7d7;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d7d7d7;
}
</style>
