<template>
  <div class="document-form-container">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入分类名称" />
      </el-form-item>
      
      <el-form-item label="上级分类" prop="parent">
        <el-tree-select
          v-model="formData.parent"
          :data="treeData"
          :props="{ label: 'name', value: 'id', children: 'children' }"
          placeholder="请选择上级分类"
          check-strictly
          clearable
        />
      </el-form-item>
      
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="formData.sort" :min="0" :max="999" />
      </el-form-item>
      
      <el-form-item label="描述" prop="description">
        <el-input v-model="formData.description" type="textarea" rows="4" placeholder="请输入分类描述" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
import { AddDocumentCategory, UpdateDocumentCategory } from '../../api';
import { successNotification } from '/@/utils/message';
import type { FormInstance } from 'element-plus'

const props = defineProps({
  initFormData: {
    type: Object,
    default: () => ({})
  },
  cacheData: {
    type: Array,
    default: () => []
  },
  treeData: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['drawerClose']);

const formRef = ref<FormInstance | null>(null);
const formData = reactive({
  id: '',
  name: '',
  parent: '',
  sort: 0,
  description: ''
});

const rules = {
  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
};

// 初始化表单数据
onMounted(() => {
  if (props.initFormData && props.initFormData.id) {
    Object.assign(formData, props.initFormData);
  }
});

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;
  
  await formRef.value.validate(async (valid: any) => {
    if (valid) {
      try {
        let res;
        if (formData.id) {
          // 更新
          res = await UpdateDocumentCategory(formData);
        } else {
          // 新增
          res = await AddDocumentCategory(formData);
        }
        
        if (res && res.code === 2000) {
          successNotification(res.msg || '操作成功');
          emit('drawerClose', 'submit');
        }
      } catch (error) {
        console.error('保存文档分类失败:', error);
      }
    }
  });
};

// 取消
const handleCancel = () => {
  emit('drawerClose');
};
</script>

<style lang="scss" scoped>
.document-form-container {
  padding: 20px;
}
</style> 