<template>
  <el-form 
    :model="formData" 
    :rules="formRules" 
    ref="formRef"
    label-width="100px"
    class="dialog-form-container"
  >
    <div class="form-row">
      <div class="form-col">
        <el-form-item label="模块名称" prop="moduleName">
          <el-input 
            v-model="formData.moduleName" 
            placeholder="请输入模块名称"
            clearable
            :disabled="isEdit"  
          />
        </el-form-item>
      </div>
      <div class="form-col">
        <el-form-item label="模块编码" prop="moduleCode">
          <el-input 
            v-model="formData.moduleCode" 
            placeholder="请输入模块编码"
            clearable
            :disabled="isEdit"  
          />
        </el-form-item>
      </div>
    </div>
	
	<div class="form-row">
	  <div class="form-col">
		  <el-form-item label="大屏标题" prop="titleName">
		    <el-input 
		      v-model="formData.titleName" 
		      placeholder="请输入大屏标题"
		      clearable
		      :disabled="isEdit"  
		    />
		  </el-form-item>
	  </div>
	  <div class="form-col">
	    <el-form-item label="路由地址" prop="path">
	      <el-input 
	        v-model="formData.path" 
	        placeholder="请输入路由地址"
	        clearable
	        :disabled="isEdit"  
	      />
	    </el-form-item>
	  </div>
	</div>
	
	
	<div class="form-row">
	  <div class="form-col">
	    <el-form-item label="模块描述" prop="remark">
	      <el-input 
	        v-model="formData.remark" 
	        placeholder="请输入模块描述"
	        clearable
	        :disabled="isEdit"  
	      />
	    </el-form-item>
	  </div>
	  <div class="form-col">
	    <el-form-item label="模块状态" prop="ustatus">
	      <el-select 
	        v-model="formData.ustatus" 
	        placeholder="请选择模块状态"
	        clearable
	      >
	        <el-option label="停用" value="0" />
	        <el-option label="在用" value="1" />
	        <el-option label="锁定" value="2" />
	      </el-select>
	    </el-form-item>
	  </div>
	</div>
	
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
      moduleName: '',
      ustatus: '1',
    })
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})

const formRef = ref(null)

const formRules = {
  moduleName: [ { required: true, message: '请输入角色名称', trigger: 'blur' } ],
  ustatus: [ { required: true, message: '请选择角色状态', trigger: 'change' } ],
}

const validate = async () => {
  if (!formRef.value) return false
  try {
    const valid = await formRef.value.validate()
    return valid
  } catch (error) {
    console.error('表单验证失败:', error)
    return false
  }
}

const resetForm = () => {
  if (formRef.value) formRef.value.resetFields()
}

defineExpose({ validate, resetForm })
</script>

<style scoped>
.dialog-form-container {
  width: 100%;
  padding: 16px;
  margin: 0;
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 16px 0;
  gap: 20px;
}
.form-row:last-child { margin-bottom: 0; }
.form-col { flex: 1; min-width: 180px; }
</style>