<template>
  <el-row>
    <el-col :span="16">
      <Editor @load="onLoad" style="margin: 10px 0" />
    </el-col>
    <el-col :span="8">
      <el-card style="margin: 10px">
        <el-form @change="bindData()" label-width="auto">
          <el-form-item label="姓名">
            <el-input v-model="patient.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="patient.sex" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="patient.age" />
          </el-form-item>
          <el-form-item label="费别">
            <el-input v-model="patient.outpatino" />
          </el-form-item>
          <el-form-item label="科室">
            <el-input v-model="patient.diagdeptName" />
          </el-form-item>
          <el-form-item label="病区">
            <el-input v-model="patient.ward" />
          </el-form-item>
          <el-form-item label="诊断">
            <el-input v-model="patient.diagnosis" />
          </el-form-item>
          <el-form-item label=" 地址">
            <el-input v-model="patient.address" />
          </el-form-item>
          <el-form-item label=" 主诉">
            <el-input v-model="patient.main_complaint" />
          </el-form-item>
          <el-form-item label=" 检查单号">
            <el-input v-model="patient.exam_id" />
          </el-form-item>
          <el-form-item label=" 检查项目">
            <el-input v-model="patient.exam_items" type="textarea" />
          </el-form-item>
          <el-form-item label=" 部位">
            <el-input v-model="patient.part" />
          </el-form-item>
          <el-form-item label=" 金额">
            <el-input v-model="patient.money" type="textarea" />
          </el-form-item>
          <el-form-item label=" 金额合计">
            <el-input v-model="patient.money_total" />
          </el-form-item>
          <el-form-item label=" 申请日期">
            <el-date-picker
              type="datetime"
              v-model="patient.diagDate"
              value-format="YYYY/MM/DD HH:mm"
            />
          </el-form-item>
          <el-form-item label=" 申请医生">
            <el-input v-model="patient.diagdoctName" />
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from "vue";

const patient = ref({});

var editor: any = null;

//加载编辑器
const onLoad = (e) => {
  editor = e.target.contentWindow.editor;

  setTimeout(() => {
    //异步加载文档
    editor.loadUrl("/mock/门诊检查申请单.html").then(() => {
      patient.value = editor.getBindObject();
    });
    //文档输入后表单值随着变化
    editor.document.addEventListener("input", () => {
      patient.value = editor.getBindObject();
    });
  }, 0);
};

//表单数据改变
const bindData = () => {
  editor.setBindObject(patient.value);
};
</script>

<style scoped lang="scss"></style>
