<template>
  <div class="layout_container layout-horizontal">
    <aside class="layout_el-table">
      <el-table
          :data="histories"
          stripe
          highlight-current-row
          @row-click="fetchReportDetail">
        <el-table-column prop="submitDatetime" label="提交时间" width="130"></el-table-column>
        <el-table-column prop="category" label="事件类型"></el-table-column>
        <el-table-column label="处理" width="60">
          <template v-slot="scope">
            <span v-html="filterHandled(scope.row.handled)"></span>
          </template>
        </el-table-column>
      </el-table>
    </aside>
    <div class="layout_main layout_container">
      <header class="round-header">
        <el-button
            type="primary"
            icon="RefreshLeft"
            @click="genNewReport"
        >
          填写新报告
        </el-button>
        <el-button
            type="primary"
            icon="Edit"
            @click="beforeSubmit"
            :disabled="disableSubmit"
        >
          提交/修改当前报告
        </el-button>
      </header>
      <div class="layout_main">
        <EventEditor :report="report"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getHistories, getReportDetail, submitNewReport} from '@/api/adverse-event'
import {formatDatetime} from '@/utils/date'
import {useUserStore} from "@/pinia/user-store";
import EventEditor from "@/views/hospitalization/adverse-event/component/EventEditor.vue";

const userInfo = useUserStore().userInfo
const histories = ref([])
const report = initReport()
const isModify = ref(false)
const fetchHistories = () => {
  getHistories().then((res) => {
    histories.value = res
  })
}
const fetchReportDetail = (val) => {
  getReportDetail(val.pid, 'nurse').then((res) => {
    report.value = res
    isModify.value = true
  })
}

const genNewReport = () => {
  report.value = initReport().value
  isModify.value = false
}

const beforeSubmit = () => {
  const message = validateReport(report.value)
  if (message) {
    ElMessage({
      message,
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return
  }
  ElMessageBox.confirm('确定提交此报告？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    report.value.isModify = isModify.value
    report.value.occurDatetime = formatDatetime(report.value.occurDatetime)
    submitNewReport(report.value).then(() => {
      ElMessage({
        message: '提交成功。',
        type: 'success',
        duration: 2000,
        showClose: true,
      })
      fetchHistories()
      genNewReport()
    })
  }).catch(() => {})
}

const disableSubmit = computed(() => {
  return report.value.handled === 1
})

onMounted(() => {
  fetchHistories()
})


function initReport() {
  return ref({
    deptCode: userInfo.deptCode,
    userName: userInfo.name,
    category: null,
    occurDatetime: null,
    userLevel: '护士',
    workYear: 1,
    eventResult: null,
    course: null,
    result: null,
    nurseReasonArr: [],
    nurseReasonElse: null,
    patientReasonArr: [],
    patientReasonElse: null,
    environReasonArr: [],
    environReasonElse: null,
    manageReasonArr: [],
    manageReasonElse: null,
    proNurseArr: [],
    proNurseElse: null,
    proPatientArr: [],
    proPatientElse: null,
    proEnvironArr: [],
    proEnvironElse: null,
    proManageArr: [],
    proManageElse: null,
  })
}

function validateReport(val) {
  if (!val.category) {
    return '请选择事件类型！'
  }
  if (!val.occurDatetime) {
    return '请选择发生日期！'
  }
  if (!val.deptCode) {
    return '请选择发生科室！'
  }
  if (val.eventResult == null) {
    return '请选择损害程度！'
  }
  if (!val.course) {
    return '请填写事件经过！';
  }
  if (!val.result) {
    return '请填写事件结果与补救措施！'
  }
  if (val.nurseReasonArr.length === 0) {
    return '请选择工作人员因素！'
  }
  if (val.proNurseArr.length === 0) {
    return '请选择工作人员因素改进措施！'
  }
  return null
}

function filterHandled(val) {
  return val === 1 ? '<span style="color:green">已处理</span>' : '<span style="color:red">未处理</span>'
}
</script>
