<template>
  <el-dialog
    v-model="visible"
    title="添加事件"
    width="500px"
    :before-close="handleClose"
  >
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef"
      label-width="100px"
    >
      <el-form-item label="选择应用" prop="selectedApps" required>
        <el-select 
          v-model="form.selectedApps" 
          multiple 
          placeholder="请选择应用"
          style="width: 100%"
        >
          <el-option
            v-for="app in appOptions"
            :key="app.value"
            :label="app.label"
            :value="app.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="事件ID" prop="eventId" required>
        <el-input 
          v-model="form.eventId" 
          placeholder="请输入事件ID"
        />
      </el-form-item>
      
      <el-form-item label="显示名称" prop="displayName" required>
        <el-input 
          v-model="form.displayName" 
          placeholder="请输入显示名称"
        />
      </el-form-item>
      
      <el-form-item label="事件类型" prop="eventType" required>
        <el-select 
          v-model="form.eventType" 
          placeholder="请选择事件类型"
          style="width: 100%"
        >
          <el-option
            v-for="type in eventTypeOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    
    <div class="tips">
      <div class="tips-content">
        说明：<br>
        事件标识符不可更改，与代码中"String event_id"保持一致：参数（key）无需手动注册，每个事件下最多支持100个参数同时计算。为保证数据准确性，请使用（英文、数字、下划线(_)、中划线(-)、小数点(.)及加号(+)）定义事件标识符或属性标识符。
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'add', data: any): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 表单引用
const formRef = ref<FormInstance>()

// 可见性绑定
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 表单数据
const form = reactive({
  selectedApps: [] as string[],
  eventId: '',
  displayName: '',
  eventType: '' // 0: 多参数类型事件, 1: 计算事件
})

// 应用选项
const appOptions = [
  { label: '教育行业Demo', value: 'education' },
  { label: '游戏行业Demo', value: 'game' },
  { label: '通用行业Demo', value: 'general' }
]

// 事件类型选项
const eventTypeOptions = [
  { label: '多参数类型事件', value: 0 },
  { label: '计算事件', value: 1 }
]

// 表单验证规则
const rules = reactive<FormRules>({
  selectedApps: [
    { required: true, message: '请选择应用', trigger: 'change' }
  ],
  eventId: [
    { required: true, message: '请输入事件ID', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_.\-+]+$/, message: '只能包含字母、数字、下划线(_)、中划线(-)、小数点(.)及加号(+)', trigger: 'blur' },
    { max: 128, message: '长度不能超过128个字符', trigger: 'blur' }
  ],
  displayName: [
    { required: true, message: '请输入显示名称', trigger: 'blur' }
  ],
  eventType: [
    { required: true, message: '请选择事件类型', trigger: 'change' }
  ]
})

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  // 重置表单
  form.selectedApps = []
  form.eventId = ''
  form.displayName = ''
  form.eventType = ''
  // 清除表单验证
  formRef.value?.resetFields()
}

// 处理添加事件
const handleAdd = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('add', {
        apps: form.selectedApps,
        eventId: form.eventId,
        displayName: form.displayName,
        eventType: form.eventType
      })
      handleClose()
    }
  })
}
</script>

<style scoped lang="scss">
.tips {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-top: 20px;
  
  .tips-content {
    font-size: 12px;
    color: #606266;
    line-height: 1.5;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>