<template>
  <xc-dialog-v2 v-model="dialog"
                :maximize="true"
                title="还原病历"
                @closed="emit('closed')">
    <div class="historical__main">
      <div class="historical__left">
        <el-table :data="historicalData"
                  highlight-current-row
                  @row-click="rowClick">
          <el-table-column fixed="left" label="操作">
            <template #default="{row}">
              <el-button @click.stop="restoreData(row)">还原</el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="properties.creator"/>
          <el-table-column label="创建时间" prop="properties.createTime">
            <template #default="{row}">
              {{ getFormatDatetime(row.properties.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="修改人" prop="properties.modifier"/>
          <el-table-column label="修改时间" prop="properties.modifyTime">
            <template #default="{row}">
              {{ getFormatDatetime(row.properties.modifyTime) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="historical__iframe">
        <iframe
            ref="emrRef"
            width="100%"
            height="700px"
            src="/emr/runtime/#/editor"/>
      </div>
    </div>

  </xc-dialog-v2>
</template>

<script setup name='HistoricalEmr' lang="ts">
import XcDialogV2 from "@/components/xiao-chan/dialog/XcDialogV2.vue";
import {nextTick, onMounted, ref} from "vue";
import {EMRInteractive} from '@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init'
import {getHistory} from '@/api/zhu-yuan-yi-sheng/emr-patient'
import {getFormatDatetime} from '@/utils/date'
import {ElMessageBox} from "element-plus";
import {BizException, ExceptionEnum} from "@/utils/BizException";

const props = defineProps({
  docunentId: {
    type: String
  }
})
const emit = defineEmits(['closed', 'restoreData'])

const dialog = ref(true)
const emrRef = ref(null)
const currentEmr = ref(null)
const historicalData = ref([])

let editor = null

const emrEvent = {
  'ready': (event) => {
    editor = currentEmr.value.getEditor()
  }
}

const rowClick = (row) => {
  editor.setDocument(row)
}

const restoreData = (row) => {
  ElMessageBox.confirm('是否要还原到此节点。', '提示', {
    type: 'warning'
  }).then(() => {
    delete row.documentId
    delete row.reversion
    emit('restoreData', row)
  }).catch(() => {

  })

}

onMounted(async () => {
  if (!props.docunentId) {
    emit('closed')
    BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择已保存的病历模板。");
  }
  await nextTick()
  currentEmr.value = new EMRInteractive(null, emrEvent);
  emrRef.value.parentElement.emr = currentEmr.value
  getHistory(props.docunentId).then((res) => {
    historicalData.value = res as Array<any>;
  });
})
</script>

<style scoped lang="scss">
.historical__main {
  display: flex;

  .historical__left {
    width: 220px;
    height: 100%;
  }

  .historical__iframe {
    flex: 1;
  }
}
</style>
