<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    class="my-custom-close-icon"
    :fullscreen="true"
  >
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="影像" name="first">
        <iframe
          frameborder="0"
          scrolling="no"
          :src="newSrc"
          style="width: 100%; height: 87vh"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="报告单" name="second">
        <!-- 外层 Flex 容器 -->
        <div style="display: flex; height: 100%">
          <!-- 模版区域 -->
          <div style="flex: 1; min-width: 0" class="template-area">
            <el-select
              v-model="fordevicemValue"
              placeholder="请选择模版类别"
              clearable
              @change="handleselectchange"
              @clear="selectclear"
            >
              <el-option label="门诊" value="门诊模版" />
              <el-option label="住院" value="住院模版" />
              <el-option label="体检" value="体检模版" />
            </el-select>

            <el-tabs type="border-card" style="height: 83vh">
              <el-tab-pane label="通用模版">
                <!-- 树 -->
                <el-tree
                  style="min-width: 195px"
                  v-loading="formLoading"
                  class="treeStyle"
                  :check-on-click-node="true"
                  :highlight-current="true"
                  :default-expand-all="true"
                  :data="treeData"
                  :props="treeDefaultProps"
                  node-key="id"
                  :show-checkbox="false"
                  :check-strictly="true"
                  @check="handleTreeNodeClick"
                  ref="selectTree"
                  :expand-on-click-node="false"
                />
              </el-tab-pane>
              <el-tab-pane label="私有模版">
                <!-- 树 -->
                <el-tree
                  style="min-width: 195px"
                  v-loading="formLoading"
                  class="treeStyle"
                  :check-on-click-node="true"
                  :highlight-current="true"
                  :default-expand-all="true"
                  :data="privateData"
                  :props="treeDefaultProps"
                  node-key="id"
                  :show-checkbox="false"
                  :check-strictly="true"
                  @node-click="handleTreeNodeClick"
                  ref="priselectTree"
                  :expand-on-click-node="false"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 用户信息区域 -->
          <div style="flex: 3; min-width: 0" class="user-info-area">
            <label style="font-size: 18px; font-weight: bold; margin-left: 50px">患者信息</label>
            <el-divider />
            <el-form
              :model="applyFormVO"
              label-width="auto"
              style="max-width: 1000px; margin: auto"
              :inline="true"
            >
              <el-row>
                <el-col :span="7">
                  <el-form-item label="检查号" style="font-weight: bold" label-width="110px">
                    <el-input v-model="applyFormVO.examId" style="width: 220px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="姓名" style="font-weight: bold" label-width="130px">
                    <el-input v-model="applyFormVO.pname" style="width: 220px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="性别" style="font-weight: bold" label-width="160px">
                    <el-input v-model="applyFormVO.gender" style="width: 220px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="出生日期" style="font-weight: bold" label-width="110px">
                    <el-date-picker
                      v-model="applyFormVO.birthday"
                      type="date"
                      placeholder="出生日期"
                      size="default"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检查时间" style="font-weight: bold" label-width="130px">
                    <el-date-picker
                      v-model="applyFormVO.examDate"
                      type="datetime"
                      placeholder="检查时间"
                      size="default"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检查项目名称" label-width="160px" style="font-weight: bold">
                    <el-input
                      v-model="applyFormVO.examItemName"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="7">
                  <el-form-item label="申请时间" style="font-weight: bold" label-width="110px">
                    <el-date-picker
                      v-model="applyFormVO.applicationDate"
                      type="datetime"
                      placeholder="检查时间"
                      size="default"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请单号" style="font-weight: bold" label-width="130px">
                    <el-input v-model="applyFormVO.regId" style="width: 220px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="送检科室" style="font-weight: bold" label-width="160px">
                    <el-input
                      v-model="applyFormVO.billDoctorDepartment"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像所见</label>
            <el-divider />
            <el-input
              v-model="sj"
              style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
              :rows="7"
              type="textarea"
              placeholder="影像所见"
            />
            <label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像结论</label>
            <el-divider />
            <el-input
              v-model="zdjl"
              style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
              :rows="7"
              type="textarea"
              placeholder="影像结论"
            />
            <label style="font-size: 18px; font-weight: bold; margin-left: 50px">报告备注</label>
            <el-divider />
            <el-input
              v-model="notes"
              style="
                width: 95%;
                font-size: 19px;
                margin-left: 40px;
                margin-top: 6px;
                margin-bottom: 6px;
              "
              placeholder=""
            />
            <el-divider />

            <el-radio-group
              v-model="radio1"
              size="small"
              class="radio-group-wrapper"
              @dblclick="cancelSelection"
            >
              <el-radio-button label="阴性" value="0" />
              <el-radio-button label="阳性" value="1" />
            </el-radio-group>
            <el-divider />
            <div class="form-row">
              <el-form-item label="诊断医生" class="form-item">
                <el-input v-model="applyFormVO.diagDoctor" style="width: 180px" :disabled="true" />
              </el-form-item>
              <el-form-item label="审核医生" class="form-item">
                <el-input
                  v-model="applyFormVO.reviewDoctor"
                  style="width: 180px"
                  :disabled="true"
                />
              </el-form-item>

              <el-form-item label="报告状态" class="form-item">
                <el-input
                  v-model="applyFormVO.reportstatus"
                  style="width: 180px"
                  :disabled="true"
                />
              </el-form-item>
            </div>

            <div style="position: absolute; bottom: 0; right: 0">
              <el-button
                type="success"
                plain
                style="width: 80px; float: right; margin-right: 15px; margin-top: 13px"
                @click="save"
                :disabled="savedisabled"
                >保存</el-button
              >
              <!--   v-show="examinedisabled" -->
              <el-button
                type="primary"
                plain
                v-show="examinedisabled"
                style="width: 80px; float: right; margin-right: 15px; margin-top: 13px"
                @click="examine"
                >审核</el-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <!-- </Dialog> -->
  <!--  弹窗-->
  <el-dialog v-model="dialogTableVisible" title="选择结论添加方式" width="320" align-center>
    <div>
      <el-button @click="handleButtonClick('覆盖')" type="primary" style="font-size: 20px"
        >覆盖</el-button
      >
      <el-button @click="handleButtonClick('追加')" type="success" style="font-size: 20px"
        >追加</el-button
      >
      <el-button @click="dialogTableVisible = false" type="info" style="font-size: 20px"
        >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ApplyformApi, ApplyformVO, UPFJApplyformVO } from '@/api/applyregistration/applyform'
import { ultrasoniccomApi, updateexamineimageVO } from '@/api/ultrasoniccom'

import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'

/** dicom */
defineOptions({ name: 'DicomViewForm' })

const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const upFJApplyformVO = ref<UPFJApplyformVO[]>([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const examineFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)
const savedisabled = ref(true) //保存按钮是否可用
const examinedisabled = ref(false) //审核按钮是否可见
const isImageLoaded = ref(false) //是否展示图片清除按钮
const isImageLoaded2 = ref(false) //是否展示图片清除按钮
const isImageLoaded3 = ref(false) //是否展示图片清除按钮

//点击节点更新使用时间
const clickuptime = async (pid: string) => {
  await ultrasoniccomApi.upreporttemplatetime(pid)
}

// 是否弹窗
const dialogTableVisible = ref(false)
//表示自定义弹窗点击的按钮名称
const btncleckname = ref()
//自定义弹窗点击方法 获取按钮名称
const handleButtonClick = (buttonName) => {
  if (buttonName == '覆盖') {
    zdjl.value = strzdjl
    sj.value = strsj
  } else if (buttonName == '追加') {
    let lszdjl: string = zdjl.value
    let lssj: string = sj.value
    zdjl.value = lszdjl + strzdjl
    sj.value = lssj + strsj
  }
  dialogTableVisible.value = false
  console.log('获取到父节点' + pid)
  clickuptime(pid)
}

//调用删除or更新标识实体集合
const updateexamineimage = ref<updateexamineimageVO[]>([])

//备注
const notes = ref()
//保存
const save = async () => {
  try {
    // 二次确认
    await message.delConfirm('是否进行保存', '确认')
    let timesta = new Date()
    var localDateTime = new Date(timesta.getTime()).toISOString() // 转换为ISO格式的字符串
    localDateTime = localDateTime.slice(0, localDateTime.length - 1)
    console.log('当前时间' + localDateTime)
    examineFormVO.value.id = ID.toString()
    examineFormVO.value.examDescription = sj.value
    examineFormVO.value.diagResults = zdjl.value
    examineFormVO.value.notes = notes.value
    examineFormVO.value.diagFlag = radio1.value
    examineFormVO.value.diagDoctor = Profilevo.value.username
    // examineFormVO.value.reviewDoctor = Profilevo.value.username
    examineFormVO.value.reportstatus = '已分析'
    // examineFormVO.value.diagDate=localDateTime
    // examineFormVO.value.reviewDate=dateTime

    const response = await PatientexamlistApi.examineupdatelist(examineFormVO.value)
    // 根据code判断接口调用是否成功
    if (response) {
      message.alertSuccess('保存成功')
      // 接口调用成功，可以根据需要处理返回的data数据
      console.log('接口调用成功')
      console.log('data:', response.data)
      //查询患者信息 根据ID
      getPatientexamlist(ID)
      //处理选择的图片
      isImageLoaded.value = false
      isImageLoaded2.value = false
      isImageLoaded3.value = false
      emit('success')
    } else {
      // 接口调用失败，根据具体情况处理错误
      console.error('接口调用失败:', response.msg)
    }
  } catch (error) {
    // 处理异常情况，例如接口调用失败或其他错误
    console.error('接口调用失败:', error)
  }
}
// 审核
const examine = async () => {
  if (applyFormVO.value.reportstatus === '已分析') {
    const response = await PatientexamlistApi.examine(ID.toString())
    if (response) {
      message.alertSuccess('审核成功')

      //查询患者信息 根据ID
      getPatientexamlist(ID)
      emit('success')
    }
  } else if (applyFormVO.value.reportstatus === '已审核') {
    message.warning('已经审核,无需再次审核')
    return
  } else {
    message.warning('请先进行保存')
    return
  }
}

// 计算年龄
const age = ref()
const calculateAge = (birthdate) => {
  if (!birthdate) {
    age.value = null
    return
  }

  const today = new Date()
  const birth = new Date(birthdate)

  let yearsDiff = today.getFullYear() - birth.getFullYear()

  // Check if the birthday hasn't occurred yet this year
  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate())

  if (!hasBirthdayPassed) {
    yearsDiff--
  }

  age.value = yearsDiff
}

//基本信息
const applyFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)
//下拉模版类别
const fordevicemValue = ref('')
//下拉清除
const selectclear = async () => {
  //选择模版后 刷新接口
  //通用
  const dd = await ultrasoniccomApi.getreporttemplatelist('', '', '')
  treeData.value = dd

  const pridate = await ultrasoniccomApi.getreporttemplatelist('', '', '1')
  privateData.value = pridate
}
const fordevicemData = ref<any[]>([])

const formRules = reactive({})
const formRef = ref() // 表单 Ref
//用户信息的table页
const activeName = ref('first')

//阴性阳性
const radio1 = ref('')
const cancelSelection = () => {
  radio1.value = ''
}
//诊断结论
const zdjl = ref('')
//所见
const sj = ref('')

//树相关
const selectTree = ref()
// 通用树数据
const treeData = ref([])
// 私有树数据
const privateData = ref([])
// 树配置项
const treeDefaultProps = {
  children: 'children',
  label: 'tempname'
}
//当前选中节点的值
let strzdjl: string = ''
let strsj: string = ''
let pid: string = '' //当前节点的父id
// 树节点选中事件
const handleTreeNodeClick = async (data) => {
  strzdjl = data.diagResults
  strsj = data.examDescription
  pid = data.pid
  console.log('父节点' + data.pid)
  dialogTableVisible.value = true
}
//下拉选择事件
const handleselectchange = async () => {
  console.log(fordevicemValue.value)

  if (fordevicemValue.value) {
    //选择模版后 刷新接口
    //通用
    const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
    treeData.value = dd

    const pridate = await ultrasoniccomApi.getreporttemplatelist(
      '',
      String(fordevicemValue.value),
      '1'
    )
    privateData.value = pridate
  }
}
//患者主键
let ID: number
//orgid
const orgId = ref('')

//regid
const regId = ref('')
//内嵌网页加载增加时间戳 防止缓存
const newSrc=ref('');

/** 打开弹窗 */
const open = async (id: number, orgid: string, regid: string) => {
  resetForm()
  const Src = `/public/dicom/dicomViewPc1.html?t=${new Date().getTime()}`;
  newSrc.value=Src

  console.log('orgid' + orgid)
  console.log('regid' + regid)
  console.log('id' + id)
  orgId.value = orgid
  regId.value = regid
  ID = id
  dialogVisible.value = true
  dialogTitle.value = '书写报告(影像)'
  // 提交请求
  formLoading.value = true
  try {
    //通用
    const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
    treeData.value = dd
    console.log('返回值1' + dd)
    console.log('返回值2' + treeData.value)
    //私有
    const pridate = await ultrasoniccomApi.getreporttemplatelist(
      '',
      String(fordevicemValue.value),
      '1'
    )
    privateData.value = pridate
    //查询患者信息 根据ID
    getPatientexamlist(id)
    //给打开的内嵌html 传递参数
    var localData = {
      regid: regid, // 这里的 'someNumber' 应该替换为实际的数值
      orgId: orgid // 这里的 'someOrgId' 应该替换为实际的组织ID
    }
    // 将对象转换为JSON字符串
     var localStorageData = JSON.stringify(localData);
    localStorage.setItem('data', localStorageData)
    //获取登录人信息
    getlogininfo()
  } finally {
    formLoading.value = false
  }
}
//查询患者信息 根据ID
const getPatientexamlist = async (id: number) => {
  const data = await PatientexamlistApi.getPatientexamlist(id)
  applyFormVO.value = data
  //阳性阴性 赋值
  radio1.value = applyFormVO.value.diagFlag
  zdjl.value = applyFormVO.value.diagResults
  sj.value = applyFormVO.value.examDescription
  notes.value = applyFormVO.value.notes
  calculateAge(applyFormVO.value.birthday)

  if (applyFormVO.value.reportstatus == '已分检' || applyFormVO.value.reportstatus == '待分析') {
    savedisabled.value = false
  } else {
    savedisabled.value = true
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
//打印方法  暂时不需要  使用v-print
const PrintForm = () => {
  // window.print()
  // 发送操作成功的事件
  emit('success')
}
//获取当前登录人信息
const getlogininfo = async () => {
  Profilevo.value = await getUserProfile()
  console.log('审核是否可见' + Profilevo.value.isexamine)
  if (Profilevo.value.isexamine === '1') {
    examinedisabled.value = true
  }
}

/** 重置表单 */
const resetForm = () => {
  applyFormVO.value = {} as PatientexamlistVO
  pid = ''
  strzdjl = ''
  strsj = ''
  activeName.value = 'first'
  updateexamineimage.value = []

  selectTree.value = ''
  treeData.value = []
  privateData.value = []
  fordevicemData.value = []
  fordevicemValue.value = ''
  upFJApplyformVO.value = []
  formRef.value?.resetFields()
  orgId.value = ''
  regId.value = ''
}
</script>

<style>
.my-container {
  height: 100vh;
  width: 100vw;
}
/* 报告区域 左侧模版选择字体大小 */
.treeStyle {
  font-size: 20px;
}
/* 分割线内部的间距 */
.el-divider--horizontal {
  margin: 6px;
}
/* 阴性 阳性 */
.radio-group-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px; /* 调整上方外边距 */
  margin-right: 33px;
}

/* 诊断医生等样式 */
.form-row {
  display: flex;
  justify-content: space-around; /* 将元素左右对齐 */
  margin-top: 10px;
}
</style>
