<template>
  <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="disableHlbDealing"></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>
</template>

<script>
import store from '../store'
export default {
  name: 'ViewAdverseEvent',
  props: {
    report: {
      type: Object,
      required: true,
    },
    disableHlbDealing: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const windowSize = store.state.app.windowSize
    const reportBoxStyle = {
      height: windowSize.h * 0.55 + 'px',
      overflowY: 'auto',
    }
    return {
      reportBoxStyle,
    }
  },
}
</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>
