<template>
  <a-modal
    class="bcs-risk-event-modal"
    :title="title"
    :width="modalWidth"
    :visible="visible"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <!-- 基本信息区域 -->
    <a-descriptions title="基本信息" class="modal-content">
      <a-descriptions-item label="应急事件名称">{{ eventInfo.name }}</a-descriptions-item>
      <a-descriptions-item label="事件类型">{{ eventInfo.typeText }}</a-descriptions-item>
      <a-descriptions-item label="事件等级">{{ eventInfo.levelText }}</a-descriptions-item>
      <a-descriptions-item label="牵头处置部门">{{ eventInfo.handleDepart }}</a-descriptions-item>
      <a-descriptions-item label="参与部门" :span="2">{{ eventInfo.supportDepart }}</a-descriptions-item>
      <a-descriptions-item label="说明" :span="2">{{ eventInfo.description }}</a-descriptions-item>
    </a-descriptions>

    <!-- 标签页区域 -->
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" class="modal-content">
      <a-tab-pane key="org" tab="应急组织">
        <BcsHandleOrgList :eventId="eventId" ref="refBcsHandleOrgList" />
      </a-tab-pane>
      <a-tab-pane key="method" tab="处置方案">
        <BcsHandleMethodList :eventId="eventId" ref="refBcsHandleMethodList"/>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, defineExpose } from 'vue';
import BcsHandleOrgList from '/@/views/bcs/handle/BcsHandleOrgList.vue';
import BcsHandleMethodList from '/@/views/bcs/handle/BcsHandleMethodList.vue';

// 类型定义
interface EventInfo {
  name: string;
  typeText: string;
  levelText: string;
  handleDepart: string;
  supportDepart: string;
  description: string;
}

interface EditParams {
  id: number;
  name?: string;
  tp_dictText?: string;
  level_dictText?: string;
  handleDepart?: string;
  supportDepart?: string;
  des?: string;
}

// 响应式数据
const title = ref<string>('');
const modalWidth = ref<number>(1024);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const eventId = ref<number>(0);
const activeKey = ref<'org' | 'method'>('org');
const refBcsHandleMethodList = ref();
const refBcsHandleOrgList = ref();

// 事件信息
const eventInfo = reactive<EventInfo>({
  name: '',
  typeText: '',
  levelText: '',
  handleDepart: '',
  supportDepart: '',
  description: ''
});

/**
 * 编辑事件信息
 */
function edit(record: EditParams): void {
  if (!record?.id) {
    console.error('编辑记录缺少id');
    return;
  }

  title.value = disableSubmit.value ? '填报处置方案' : '编辑';
  visible.value = true;
  eventId.value = record.id;
  
  // 安全地更新事件信息
  Object.assign(eventInfo, {
    name: record.name || '',
    typeText: record.tp_dictText || '',
    levelText: record.level_dictText || '',
    handleDepart: record.handleDepart || '',
    supportDepart: record.supportDepart || '',
    description: record.des || ''
  });

  // 重置标签页状态
  activeKey.value = 'org';
}

/**
 * 标签页切换处理
 */
function handleTabChange(key: 'org' | 'method'): void {
  activeKey.value = key;
  
  // 安全地调用子组件方法
  try {
    if (key === 'method' && refBcsHandleMethodList.value?.searchReset) {
      refBcsHandleMethodList.value.searchReset(eventId.value);
    } else if (refBcsHandleOrgList.value?.searchReset) {
      refBcsHandleOrgList.value.searchReset(eventId.value);
    }
  } catch (error) {
    console.error('切换标签页时出错:', error);
  }
}

/**
 * 确定按钮点击事件
 */
function handleOk(): void {
  handleCancel();
}

/**
 * 取消按钮回调事件
 */
function handleCancel(): void {
  visible.value = false;
  resetForm();
}

/**
 * 重置表单状态
 */
function resetForm(): void {
  eventId.value = 0;
  Object.assign(eventInfo, {
    name: '',
    typeText: '',
    levelText: '',
    handleDepart: '',
    supportDepart: '',
    description: ''
  });
  activeKey.value = 'org';
}

// 暴露给父组件的方法
defineExpose({
  edit,
  disableSubmit,
});
</script>

<style scoped lang="less">
.bcs-risk-event-modal {
  :deep(.ant-modal-body) {
    padding: 0;
  }
}

.modal-content {
  padding: 0 15px;
  
  &:not(:last-child) {
    margin-bottom: 16px;
  }
}

.jee-hidden {
  display: none !important;
}
</style>