<template>
  <el-dialog
    v-model="visible"
    :title="isEdit ? '编辑属性' : '新增属性'"
    width="500px"
    :before-close="handleClose"
  >
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef"
      label-width="100px"
    >
      <el-form-item label="属性名称" prop="propertyName" required>
        <el-input 
          v-model="form.propertyName" 
          :disabled="isEdit"
          placeholder="请输入属性名称"
        />
      </el-form-item>
      
      <el-form-item label="属性标识符" prop="propertyIdentifier" required>
        <el-input 
          v-model="form.propertyIdentifier" 
          :disabled="isEdit"
          placeholder="请输入属性标识符"
        />
        <div class="form-item-tip">支持字母、数字、下划线(_)、中划线(-)、小数点(.)及加号(+)</div>
      </el-form-item>
      
      <el-form-item label="属性类型" prop="propertyType" required>
        <el-select 
          v-model="form.propertyType" 
          :disabled="isEdit"
          placeholder="请选择属性类型"
          style="width: 100%"
        >
          <el-option label="字符串" value="string" />
          <el-option label="数值型" value="number" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="属性备注" prop="remark">
        <el-input 
          v-model="form.remark" 
          type="textarea"
          :rows="3"
          placeholder="请输入属性备注"
        />
      </el-form-item>
      
      <el-form-item label="应用" prop="apps" required>
        <el-select 
          v-model="form.apps" 
          multiple
          placeholder="请选择应用"
          style="width: 100%"
        >
          <el-option label="教育行业Demo" value="education" />
          <el-option label="游戏行业Demo" value="game" />
          <el-option label="通用行业Demo" value="general" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

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

interface Props {
  modelValue: boolean
  isEdit: boolean
  data?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', 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({
  propertyName: '',
  propertyIdentifier: '',
  propertyType: '',
  remark: '',
  apps: [] as string[]
})

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

// 监听数据变化，用于编辑时填充表单
watch(() => props.data, (newVal) => {
  if (newVal && props.isEdit) {
    form.propertyName = newVal.propertyName || ''
    form.propertyIdentifier = newVal.propertyIdentifier || ''
    form.propertyType = newVal.propertyType || ''
    form.remark = newVal.remark || ''
    form.apps = newVal.apps || []
  }
}, { immediate: true })

// 重置表单
const resetForm = () => {
  form.propertyName = ''
  form.propertyIdentifier = ''
  form.propertyType = ''
  form.remark = ''
  form.apps = []
  formRef.value?.resetFields()
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  resetForm()
}

// 处理提交
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('submit', {
        ...form,
        isEdit: props.isEdit
      })
      handleClose()
    }
  })
}
</script>

<style scoped lang="scss">
.form-item-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

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