<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" class="custom-dialog">
    <!-- <el-form
      ref="Print"
      :model=applyFormVO
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    > -->
    <div class="container">
    <div class="left">
      <el-select
          v-model="fordevicemValue"
          placeholder="请选择模版类别"
          clearable
          class="!w-230px"
          @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: 931px;">
       <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 class="middle">
      <!--用户信息区域-->
   
      <el-tabs v-model="activeName" class="demo-tabs" type="border-card" style="height: 963px;">
      <el-tab-pane label="用户信息" name="first">
        <el-form :model="applyFormVO" label-width="auto" style="max-width: 900px" :inline="true">
        <el-row>
      <el-col :span="8">
        <el-form-item label="检查号">
          <el-input v-model="applyFormVO.examId" style="width: 180px;" :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="applyFormVO.pname" style="width: 180px;" :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别">
          <el-input v-model="applyFormVO.gender" style="width: 180px;" :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出生日期">
          <el-date-picker
              v-model="applyFormVO.birthday"
              type="date"
              placeholder="出生日期"
               size="default"
               style="width: 180px"
               :disabled="true"
             />
         
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检查时间">
          <el-date-picker
              v-model="applyFormVO.examDate"
              type="datetime"
              placeholder="检查时间"
               size="default"
               style="width: 180px"
               :disabled="true"
             />
          
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检查项目名称">
          <el-input v-model="applyFormVO.examItemName" style="width: 180px;" :disabled="true"/>
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="申请时间">
          <el-date-picker
              v-model="applyFormVO.applicationDate"
              type="datetime"
              placeholder="检查时间"
               size="default"
               style="width: 180px"
               :disabled="true"
             />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="申请单号">
          <el-input v-model="applyFormVO.regId" style="width: 180px;" :disabled="true"/>
        </el-form-item>
      </el-col>
         </el-row>
        </el-form>
    <el-divider />
        <!--图片显示区域-->
        <div class="demo-image">
          <el-card style="max-width: 480px">
            <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
            </el-card>
            <el-card style="max-width: 480px">
            <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
            </el-card>
            <el-card style="max-width: 480px">
            <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
            </el-card>
        </div>
   <el-divider />
        <label  style="text-align: center;">检查所见</label>
        <el-input
           v-model="sj"
           style="max-width: 100%; width: 100%"
           :rows="4"
            type="textarea"
              placeholder="检查所见"
                  />
  <el-divider />
          <label>诊断结论</label>
             <el-input
            v-model="zdjl"
           style="width: 100%"
            :rows="4"
          type="textarea"
            placeholder="诊断结论"
             />
    <el-divider />
    <label>报告备注</label>
    <el-input v-model="input" style="width: 100%" 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-button >审核</el-button>
      </el-tab-pane>
      <el-tab-pane label="报告">
        <!--报告区域-->
        <div class="flex-center"  id="printMe">
      <div>
        
   
      </div>
      
    </div>
    
      </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">Right</div>
  </div>
    
  <!--   </el-form> -->
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ApplyformApi, ApplyformVO,UPFJApplyformVO } from '@/api/applyregistration/applyform'
import {ultrasoniccomApi} from '@/api/ultrasoniccom'
import { fill } from 'lodash-es';
import { number } from 'vue-types';
import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'

/** 超声组件 */
defineOptions({ name: 'Ultrasonic' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const upFJApplyformVO = ref<UPFJApplyformVO[]>([]);
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

//基本信息
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"
}
// 树节点选中事件
const handleTreeNodeClick = (data) => {
  zdjl.value=data.diagResults
  sj.value= data.examDescription
};
//下拉选择事件
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
}

}

/** 打开弹窗 */
const open = async (id:number,orgid:string) => {
  resetForm()
  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
    const data = await PatientexamlistApi.getPatientexamlist(id)
    applyFormVO.value = data

    } finally {
      formLoading.value = false
    }
  
}

      



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

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
//打印方法  暂时不需要  使用v-print
const PrintForm = () => {

  
 // window.print()
         // 发送操作成功的事件
         emit('success')
}

/** 重置表单 */
const resetForm = () => {
  selectTree.value=''
  treeData.value=[]
  privateData.value=[]
  fordevicemData.value =[]
  fordevicemValue.value=''
  upFJApplyformVO.value=[]
  formRef.value?.resetFields()
}


</script>

<style>
.container {
  display: flex;
  height: 950px;
}
 
.left {
  flex: 0 0 200px; /* 固定宽度 */
  background: lightblue;
}
 
.middle {
  flex: 1; /* 占据剩余空间 */
  margin-left: 2px;
  background: rgb(238, 240, 238);
}
 
.right {
  flex: 0 0 200px; /* 固定宽度 */
  background: lightcoral;
}
.custom-dialog {
  width: 1500px; /* 设置宽度 */
  height: 1100px; /* 设置高度 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

.demo-image {
    display: flex;
    justify-content: center;
  }

  .demo-image .el-card:not(:last-child) {
    margin-right: 100px;
    margin-top: 10px;
  }
  .radio-group-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 1px; /* 调整上方外边距 */
  }
</style>