<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="12">
        <el-tag>事件信息</el-tag>
        <el-row :gutter="5">
          <el-col :span="8">
            <el-tag type="info">事件类型</el-tag>
            <div></div>
            <el-select v-model="report.category" placeholder="请选择" style="width: 100%">
              <el-option-group v-for="group in dict.categories" :key="group.id" :label="group.name">
                <el-option v-for="item in group.children" :key="item.id" :label="item.name" :value="group.name + ' - ' + item.name"> </el-option>
              </el-option-group>
            </el-select>
          </el-col>
          <el-col :span="9">
            <el-tag type="info">发生日期：</el-tag>
            <div></div>
            <el-date-picker v-model="report.occurDatetime" type="datetime" placeholder="选择日期时间" style="width: 100%"> </el-date-picker>
          </el-col>
          <el-col :span="7">
            <el-tag type="info">发生科室：</el-tag>
            <div></div>
            <el-select v-model="report.deptCode" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.depts" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-tag>提交人信息</el-tag>
        <el-row :gutter="5">
          <el-col :span="8">
            <el-tag type="info">姓名：</el-tag>
            <div></div>
            <el-input v-model="report.userName" style="width: 100%" readonly></el-input>
          </el-col>
          <el-col :span="8">
            <el-tag type="info">职称：</el-tag>
            <div></div>
            <el-select v-model="report.userLevel" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.positions" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-tag type="info">工作年限：</el-tag>
            <div></div>
            <el-input-number v-model="report.workYear" :min="0" :max="10" style="width: 100%"></el-input-number>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <el-row :gutter="5">
      <el-col :span="12">
        <el-tag>事件经过</el-tag>
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="report.course" maxlength="200" show-word-limit style="width: 100%"> </el-input>
      </el-col>
      <el-col :span="12">
        <el-tag>事件结果与补救措施</el-tag>
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="report.result" maxlength="100" show-word-limit style="width: 100%"> </el-input>
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <el-tag>原因分析</el-tag>
    <el-row :gutter="5">
      <el-col :span="6">
        <el-tag type="info">护士因素：</el-tag>
        <div></div>
        <el-select v-model="report.nurseReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.nurseReasons" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.nurseReasonElse" placeholder="其他护士因素" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">病人因素：</el-tag>
        <div></div>
        <el-select v-model="report.patientReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.patientReasons" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.patientReasonElse" placeholder="其他病人因素" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">环境因素：</el-tag>
        <div></div>
        <el-select v-model="report.environReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.environReasons" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.environReasonElse" placeholder="其他环境因素" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">管理因素：</el-tag>
        <div></div>
        <el-select v-model="report.manageReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.manageReasons" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.manageReasonElse" placeholder="其他管理因素" style="width: 100%"></el-input>
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <el-tag>改进措施</el-tag>
    <el-row :gutter="5">
      <el-col :span="6">
        <el-tag type="info">护士因素：</el-tag>
        <div></div>
        <el-select v-model="report.proNurseArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.nursePros" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.proNurseElse" placeholder="其他护士因素改进措施" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">病人因素：</el-tag>
        <div></div>
        <el-select v-model="report.proPatientArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.patientPros" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.proPatientElse" placeholder="其他病人因素改进措施" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">环境因素：</el-tag>
        <div></div>
        <el-select v-model="report.proEnvironArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.environPros" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.proEnvironElse" placeholder="其他环境因素改进措施" style="width: 100%"></el-input>
      </el-col>
      <el-col :span="6">
        <el-tag type="info">管理因素：</el-tag>
        <div></div>
        <el-select v-model="report.proManageArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
          <el-option v-for="item in dict.managePros" :key="item.id" :label="item.name" :value="item.name">
            <span style="overflow: auto">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-input v-model="report.proManageElse" placeholder="其他管理因素改进措施" style="width: 100%"></el-input>
      </el-col>
    </el-row>
    <div style="width: 100%; text-align: right; margin: 20px 0 10px 0">
      <el-button type="info" icon="Close" @click="cancelModify">取消</el-button>
      <el-button type="primary" icon="Check" @click="confirmModify">提交</el-button>
    </div>
  </div>
</template>

<script>
import { dict } from '../data/adverse-event'
export default {
  name: 'ModifyAdverseEvent',
  props: {
    report: {
      type: Object,
      required: false,
      default: {},
    },
  },
  setup(props, ctx) {
    const cancelModify = () => {
      ctx.emit('cancel-modify')
    }
    const confirmModify = () => {
      ctx.emit('confirm-modify', props.report)
    }
    return { dict, cancelModify, confirmModify }
  },
}
</script>
