<template>
  <div>
    <div class="card-header">
      <span>{{ translateNodeName(elementType) }}</span>
    </div>
    
    <a-tabs v-model:activeKey="activeName" type="card" class="panel-tabs">
      <!-- 常规信息 -->
      <a-tab-pane key="common" tab="常规信息">
        <template #tab>
          <span><info-circle-outlined /> 常规信息</span>
        </template>
        <CommonPanel :id="elementId" />
      </a-tab-pane>

      <!-- 任务信息 -->
      <a-tab-pane 
        v-if="elementType.indexOf('Task') !== -1" 
        key="Task" 
        tab="任务配置"
      >
        <template #tab>
          <span><container-outlined /> 任务配置</span>
        </template>
        <user-task-panel :id="elementId" />
      </a-tab-pane>

      <!-- 表单 -->
      <a-tab-pane 
        v-if="formVisible" 
        key="form" 
        tab="表单配置"
      >
        <template #tab>
          <span><form-outlined /> 表单配置</span>
        </template>
        <form-panel :id="elementId" />
      </a-tab-pane>

      <!-- 扩展属性 - 修改为对所有元素可见 -->
      <a-tab-pane 
        v-if="hasElement" 
        key="extraAttribute" 
        tab="扩展属性"
      >
        <template #tab>
          <span><form-outlined /> 扩展属性</span>
        </template>
        <PropertiesPanel :id="elementId" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted, computed } from 'vue'
import { 
  InfoCircleOutlined,  
  ContainerOutlined, 
  FormOutlined
} from '@ant-design/icons-vue'

import CommonPanel from './panel/commonPanel.vue'
import PropertiesPanel from './panel/PropertiesPanel.vue'
import UserTaskPanel from './panel/taskPanel.vue'
import FormPanel from './panel/formPanel.vue'
import { translateNodeName } from "./common/bpmnUtils"
import { useModelerStore } from './store/modeler-store.js'

const modelerStore = useModelerStore()

// 响应式数据
const activeName = ref<string>('common') 
const elementId = ref("")
const elementType = ref("")
const formVisible = ref(false)

// 计算属性 - 判断是否有选中的元素
const hasElement = computed(() => {
  return !!elementId.value && elementType.value !== 'Process' && elementType.value !== 'Collaboration'
})

// 生命周期
onMounted(() => {
  initModels()
})

onUnmounted(() => {
  // 清理事件监听器
  if (modelerStore.modeler) {
    modelerStore.modeler.off("import.done")
    modelerStore.modeler.off("selection.changed")
    modelerStore.modeler.off("element.changed")
  }
})

// 方法
const initModels = () => {
  getActiveElement()
}

const getActiveElement = () => {
  initFormOnChanged(null)
  
  if (!modelerStore.modeler) return
  
  modelerStore.modeler.on("import.done", () => {
    initFormOnChanged(null)
  })
  
  modelerStore.modeler.on("selection.changed", ({ newSelection }) => {
    initFormOnChanged(newSelection[0] || null)
  })
  
  modelerStore.modeler.on("element.changed", ({ element }) => {
    if (element && element.id === elementId.value) {
      initFormOnChanged(element)
    }
  })
}

const initFormOnChanged = (element: any) => {
  let activatedElement = element
  if (!activatedElement && modelerStore.elRegistry) {
    activatedElement = modelerStore.elRegistry.find((el: any) => el.type === "bpmn:Process") ??
                      modelerStore.elRegistry.find((el: any) => el.type === "bpmn:Collaboration")
  }
  if (!activatedElement) {
    elementId.value = ""
    elementType.value = ""
    formVisible.value = false
    return
  }
  
  modelerStore.setElement(activatedElement)
  elementId.value = activatedElement.id
  elementType.value = activatedElement.type.split(":")[1] || ""
  
  // 表单配置只对特定元素可见
  formVisible.value = elementType.value === "UserTask" || elementType.value === "StartEvent"
  
  console.log('当前选中元素:', {
    id: elementId.value,
    type: elementType.value,
    element: activatedElement
  })
}
</script>

<style lang="scss" scoped>
.card-header {
  padding: 12px 16px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.panel-tabs {
  :deep(.ant-tabs-nav) {
    margin: 0;
  }
  
  :deep(.ant-tabs-tab) {
    padding: 8px 16px;
    margin-right: 4px;
  }
  
  :deep(.ant-tabs-content) {
    padding: 16px;
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
}

// 确保内容区域有适当的滚动和间距
:deep(.ant-tabs-tabpane) {
  padding: 0;
}
</style>