<template>
  <div id="print">
    <table>
      <tr>
        <th colspan="9">
          <span class="title">泰和医院不良事件上报表</span>
        </th>
      </tr>
      <tr>
        <th colspan="2" class="first_th">事件类型</th>
        <td colspan="2" class="first_td">{{ report.category }}</td>
        <th class="second_th">发生时间</th>
        <td colspan="2" class="second_th">{{ report.occurDatetime }}</td>
        <th class="second_th">发生科室</th>
        <td class="second_th">{{ report.department }}</td>
      </tr>
      <tr>
        <th colspan="2">提交人姓名 / 工号</th>
        <td colspan="2">{{ report.userName }} / {{ report.userId }}</td>
        <th>提交人职称</th>
        <td colspan="2">{{ report.userLevel }}</td>
        <th>提交人工龄</th>
        <td>{{ report.workYear }}</td>
      </tr>

      <tr>
        <th colspan="2">事件经过</th>
        <td colspan="7" class="textContent">{{ report.course }}</td>
      </tr>
      <tr>
        <th colspan="2">事件结果及补救措施</th>
        <td colspan="7" class="textContent">{{ report.result }}</td>
      </tr>
      <tr>
        <th rowspan="4" class="mid_td_narrow">原因分析</th>
        <th>护士因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.nurseReasonArr) }}</td>
      </tr>
      <tr>
        <th>病人因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.patientReasonArr) }}</td>
      </tr>
      <tr>
        <th>环境因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.environReasonArr) }}</td>
      </tr>
      <tr>
        <th>管理因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.manageReasonArr) }}</td>
      </tr>
      <tr>
        <th rowspan="4">改进措施</th>
        <th>护士因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.proNurseArr) }}</td>
      </tr>
      <tr>
        <th>病人因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.proPatientArr) }}</td>
      </tr>
      <tr>
        <th>环境因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.proEnvironArr) }}</td>
      </tr>
      <tr>
        <th>管理因素</th>
        <td colspan="7" class="textContent">{{ reasonAndProFilter(report.proManageArr) }}</td>
      </tr>
      <tr>
        <th rowspan="2" colspan="2">科室处理意见</th>
        <td rowspan="2" colspan="5" class="textContent">{{ report.deptDealing }}</td>
        <td colspan="2">处理人：{{ report.deptDealerName }}</td>
      </tr>
      <tr>
        <td colspan="2">处理时间：{{ report.deptDealTime }}</td>
      </tr>
      <tr>
        <th rowspan="2" colspan="2">护理部处理意见</th>
        <td rowspan="2" colspan="5" class="textContent">{{ report.finalDealing }}</td>
        <td colspan="2">处理人：{{ report.finalDealerName }}</td>
      </tr>
      <tr>
        <td colspan="2">处理人：{{ report.finalDealTime }}</td>
      </tr>
    </table>
    <div class="print-btns">
      <div>
        <el-button icon="Printer" @click="prePrint" type="primary">打印此页</el-button>
      </div>
      <div>
        <el-button icon="Check" @click="confirmPrint" type="primary" :disabled="disableConfirmPrint">确认已打印</el-button>
      </div>
      <div>
        <el-button icon="Close" @click="closePrint" type="primary">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import router from '@/router'
import { getReportDetail, updatePrinted } from '@/api/adverse-event'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  setup() {
    const roles = store.state.user.info.roles
    const disableConfirmPrint = computed(() => {
      return roles.indexOf(24) === -1 && roles.indexOf(1) === -1 && roles.indexOf(2) === -1
    })
    const report = ref({})
    const prePrint = () => {
      window.print()
    }
    const confirmPrint = () => {
      ElMessageBox.confirm('是否确认已打印此页？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          updatePrinted(report.value.pid).then(() => {
            ElMessage({
              message: '操作成功',
              type: 'success',
              duration: 2500,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }
    const closePrint = () => {
      window.close()
    }

    onMounted(() => {
      const pid = router.currentRoute.value.params.pid
      getReportDetail(pid, 'final').then((res) => {
        report.value = res
      })
    })

    return {
      report,
      disableConfirmPrint,
      prePrint,
      confirmPrint,
      closePrint,
      reasonAndProFilter,
    }
  },
}

function reasonAndProFilter(arr) {
  if (!arr) {
    return
  }
  let temp = ''
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] !== '') temp += i + 1 + '. ' + arr[i] + '；'
  }
  return temp
}
</script>

<style scoped>
#print {
  height: 100vh;
  background: white;
}

#print table {
  height: 100%;
  width: 100%;
}

#print table,
#print tr,
#print th,
#print td {
  border: 1px solid #c1dbfa;
  border-collapse: collapse;
  text-align: left;
  padding: 0 10px;
  vertical-align: center;
  word-break: break-all;
  font-size: 13px;
}
.title {
  display: block;
  width: 100%;
  font-size: 18px;
  text-align: center;
}
.textContent {
  text-align: left;
  padding-left: 10px;
}

.print-btns {
  position: fixed;
  top: 40%;
  right: 10px;
}

@media print {
  .print-btns,
  .back-icon {
    display: none;
  }
}

.print-btns > div {
  height: 40px;
  line-height: 40px;
}

.first_th {
  width: 15%;
}

.first_td {
  width: 13%;
}

.second_th {
  width: 12%;
}
</style>
