<template>
	<el-dialog v-model="state.groupDialogVisible" draggable title="添加收藏分组" width="450px" @close="groupFormClose" destroy-on-close>
		<el-form :model="state.groupForm" label-width="80px" ref="groupFormRef" @submit.native.prevent>
			<el-form-item label="分组名称" prop="name" :rules="[{ required: true, message: '请填写分组名称', trigger: 'blur' }]">
				<el-input v-model="state.groupForm.name" placeholder="请填写分组名称" @keyup.enter="groupFormConfirm(groupFormRef)" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.groupDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="groupFormConfirm(groupFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { addCollectGroup } from '@/api/knowledge/collect';

const state = reactive<any>({
	groupDialogVisible:false,
	groupForm:{
		name:null
	}
});
const groupFormRef = ref<RefType>();
const groupFormClose = () => {
	groupFormRef.value?.resetFields();
	groupFormRef.value?.clearValidate();
};
const emit = defineEmits(['update']);
// 确认添加分组
const groupFormConfirm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		addCollectGroup(state.groupForm).then((res: any)=>{
			state.loading = false;
			emit('update');
			closeDialog();
			ElMessage.success('新增分组成功');
		}).catch(()=>{
			state.loading = false;
		})
	});
};
const openDialog = () => {
	state.groupDialogVisible = true;
};
const closeDialog = () => {
	state.groupDialogVisible = false;
};
defineExpose({
	openDialog,
	closeDialog
})
</script>
<style scoped lang="scss">

</style>