<template>
  <page-layer>
    <template #header>
      <el-button type="primary" icon="Edit" @click="modifyReport" :disabled="report.handled === 1">修改此报告</el-button>
      <el-button type="primary" icon="Upload" @click="dealReport" :disabled="report.handled === 1">提交处理内容</el-button>
      <el-button type="primary" icon="Printer" @click="toPrintPage" :disabled="report.handled !== 1">生成打印页面</el-button>
    </template>
    <template #aside>
      <el-table :data="reports" stripe highlight-current-row :height="tableHeight" @row-click="fetchReportDetail">
        <el-table-column prop="occurDatetime" label="发生时间"></el-table-column>
        <el-table-column prop="userName" label="提交人" width="70"></el-table-column>
        <el-table-column prop="submitDatetime" label="提交时间"></el-table-column>
        <el-table-column prop="category" label="事件类型"></el-table-column>
        <el-table-column label="受理" width="50">
          <template v-slot="scope">
            <span v-html="filterAccepted(scope.row.accepted)"></span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="50">
          <template v-slot="scope">
            <span v-html="filterHandled(scope.row.handled)"></span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #main>
      <div :style="reportBoxStyle">
        <el-tag>事件信息</el-tag>
        <div class="report-column-div">
          事件类型：{{ report.category }} <span style="margin-left: 20px">发生时间：{{ report.occurDatetime }}</span>
        </div>
        <el-divider></el-divider>
        <el-tag>提交人信息</el-tag>
        <div class="report-column-div">
          姓名：{{ report.userName }}
          <span style="margin-left: 20px">科室：{{ report.department }}</span>
          <span style="margin-left: 20px">职称：{{ report.userLevel }}</span>
          <span style="margin-left: 20px">工作年限：{{ report.workYear }}</span>
        </div>
        <el-divider></el-divider>
        <el-tag>事件经过</el-tag>
        <div class="course-result-div">{{ report.course }}</div>
        <el-tag>事件结果与补救措施</el-tag>
        <div class="course-result-div">{{ report.result }}</div>
        <el-divider></el-divider>
        <el-tag>原因分析</el-tag>
        <el-row :gutter="0">
          <el-col :span="6">
            <el-tag type="info">护士因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.nurseReasonArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.nurseReasonElse">{{ report.nurseReasonArr.length + 1 }}、{{ report.nurseReasonElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">病人因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.patientReasonArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.patientReasonElse">{{ report.patientReasonArr.length + 1 }}、{{ report.patientReasonElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">环境因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.environReasonArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.environReasonElse">{{ report.environReasonArr.length + 1 }}、{{ report.environReasonElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">管理因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.manageReasonArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.manageReasonElse">{{ report.manageReasonArr.length + 1 }}、{{ report.manageReasonElse }}</div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-tag>改进措施</el-tag>
        <el-row :gutter="0">
          <el-col :span="6">
            <el-tag type="info">护士因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.proNurseArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.proNurseElse">{{ report.proNurseArr.length + 1 }}、{{ report.proNurseElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">病人因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.proPatientArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.proPatientElse">{{ report.proPatientArr.length + 1 }}、{{ report.proPatientElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">环境因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.proEnvironArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.proEnvironElse">{{ report.proEnvironArr.length + 1 }}、{{ report.proEnvironElse }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-tag type="info">管理因素</el-tag>
            <div class="reason-pro-div">
              <div v-for="(item, index) in report.proManageArr" :key="index">{{ index + 1 }}、{{ item }}</div>
              <div v-if="report.proManageElse">{{ report.proManageArr.length + 1 }}、{{ report.proManageElse }}</div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="0">
          <el-col :span="12">
            <el-tag>科室处理意见</el-tag>
            <el-input type="textarea" v-model="report.deptDealing" :rows="3" :disabled="report.handled === 1"></el-input>
            <div style="width: 100%; text-align: right">
              <el-tag type="danger"> 处理人：{{ report.deptDealerName }} </el-tag>
              <el-divider direction="vertical"></el-divider>
              <el-tag type="danger"> 处理时间：{{ report.deptDealTime }} </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <el-tag>护理部处理意见</el-tag>
            <el-input type="textarea" v-model="report.finalDealing" :rows="3" disabled></el-input>
            <div style="width: 100%; text-align: right">
              <el-tag type="danger"> 处理人：{{ report.finalDealerName }} </el-tag>
              <el-divider direction="vertical"></el-divider>
              <el-tag type="danger"> 处理时间：{{ report.finalDealTime }} </el-tag>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <el-dialog v-model="showModifyDialog" width="70%" title="修改报告">
        <modify-adverse-event :report="report" @cancel-modify="cancelModify" @confirm-modify="confirmModify"></modify-adverse-event>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { onActivated, ref } from 'vue'
import store from '@/store'
import { getReportDetail, getReportsForDept, submitNewReport, updateDeptHandled } from '@/api/adverse-event'
import ModifyAdverseEvent from '@/components/ModifyAdverseEvent.vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {
    PageLayer,
    ModifyAdverseEvent,
  },
  setup() {
    const reports = ref([])
    const report = ref({})
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 5
    const reportBoxStyle = {
      height: windowSize.h - 50 + 'px',
      overflowY: 'auto',
    }
    const fetchReportDetail = (val) => {
      getReportDetail(val.pid, 'deptLeader').then((res) => {
        report.value = res
      })
    }

    const showModifyDialog = ref(false)
    const modifyReport = () => {
      showModifyDialog.value = true
    }
    const cancelModify = () => {
      showModifyDialog.value = false
    }
    const confirmModify = (val) => {
      val.isModify = true
      submitNewReport(val).then(() => {
        ElMessage({
          message: '修改成功',
          type: 'success',
          duration: 2500,
          showClose: true,
        })
      })
      showModifyDialog.value = false
    }
    const dealReport = () => {
      if (report.value.deptDealing === '未处理') {
        ElMessage({
          message: '请填写处理内容！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      const param = {
        pid: report.value.pid,
        dealing: report.value.deptDealing,
      }
      updateDeptHandled(param).then(() => {
        reports.value.forEach((item) => {
          if (item.pid === param.pid) {
            item.handled = 1
          }
        })
        ElMessage({
          message: '处理成功',
          type: 'success',
          duration: 2500,
          showClose: true,
        })
      })
    }
    const toPrintPage = () => {
      const route = router.resolve({ path: '/printAdverseEvent/' + report.value.pid })
      window.open(route.href, '_blank')
    }
    onActivated(() => {
      getReportsForDept().then((res) => {
        reports.value = res
      })
    })

    return {
      reports,
      report,
      tableHeight,
      reportBoxStyle,
      fetchReportDetail,
      filterAccepted,
      filterHandled,
      showModifyDialog,
      modifyReport,
      cancelModify,
      confirmModify,
      dealReport,
      toPrintPage,
    }
  },
}

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

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

<style scoped>
.report-column-div {
  padding-left: 20px;
  padding-top: 5px;
}
.course-result-div {
  margin: 5px 20px 10px 20px;
}
.reason-pro-div {
  margin: 0 20px;
}
</style>
