<template>
  <div>
    <el-dialog
      v-model="emergencyEventManageDialog"
      width="500"
      align-center
      @close="handleCloseDialog"
      @keyup.enter="handleConfirmDialog(ruleFormRef)"
      class="emergency-event-manage-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <span>{{ dialogTitle }}应急事件</span>
        </div>
      </template>
      <el-form ref="ruleFormRef" :model="eventForm" :rules="rules">
        <el-form-item label="事件类型" prop="eventType">
          <el-select v-model="eventForm.eventType" placeholder="请选择事件类型" clearable>
            <el-option
              v-for="item in eventTypeOptions"
              :key="item.itemCode"
              :label="item.itemValue"
              :value="item.itemValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="事件地点" prop="eventLocation">
          <el-input v-model="eventForm.eventLocation" placeholder="请输入事件地点" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="handleConfirmDialog(ruleFormRef)">
            {{ dialogBtn }}
          </el-button>
          <el-button @click="handleCloseDialog">返回</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, reactive, ref } from 'vue';
  import { ElDialog, ElForm, ElFormItem } from 'element-plus';
  import type { FormInstance } from 'element-plus';
  import type { SysDictDataDetail } from '@/api/dict';
  import type { EmergencyProcedureManageStruct } from '@/api/emergency-procedure';

  const props = defineProps<{
    dialogType: string; // 新增add/修改edit
    eventTypeOptions: Array<SysDictDataDetail>; // 事件类型选项
    originalEventForm?: EmergencyProcedureManageStruct; // 事件表单数据
  }>();

  const emits = defineEmits(['close', 'confirm']);

  const emergencyEventManageDialog = ref(true);
  const dialogTitle = computed(() => {
    return props.dialogType === 'add' ? '启动' : '修改';
  });
  const dialogBtn = computed(() => {
    return props.dialogType === 'add' ? '立即启动' : '确认修改';
  });

  const ruleFormRef = ref<FormInstance>();
  const eventForm = reactive({
    eventType: '',
    eventLocation: '',
  });

  const rules = reactive({
    eventType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
    eventLocation: [{ required: true, message: '请输入事件地点', trigger: 'blur' }],
  });

  const handleCloseDialog = () => {
    emits('close');
  };

  const handleConfirmDialog = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) emits('confirm', eventForm);
      else return;
    });
  };

  onMounted(() => {
    if (props.originalEventForm) {
      eventForm.eventType = props.originalEventForm.eventType ?? '';
      eventForm.eventLocation = props.originalEventForm.eventLocation ?? '';
    }
  });
</script>

<style scoped lang="scss">
  :deep(.emergency-event-manage-dialog) {
    min-height: 300px;
    padding: 20px 30px;

    .el-dialog__header {
      padding-right: 0;
      padding-bottom: 50px;
    }
    .dialog-header {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
    }

    .el-dialog__headerbtn {
      font-size: 30px;
      width: 60px;
      height: 60px;
      top: 8px;
      right: 8px;
    }

    .el-dialog__footer {
      padding-top: 40px;
    }
  }
</style>
