<template>
	<el-dialog title="移动文件" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
			<el-form-item label="选择" prop="category_id">
				<el-cascader ref="categoryRef" v-model="form.category_id" :options="menu" :props="menuProps" clearable
							 style="width: 100%;"></el-cascader>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {ref} from "vue";

defineExpose({
	open
})

const emit = defineEmits(['success', 'closed'])
const categoryRef = ref(null)
const formRef = ref(null)

let visible = ref(false)
let isSaveing = ref(false)
let form = ref({
	category_id: 0
})
let rules = ref({
	category_name: [
		{required: true, message: '请输入分类名称'}
	]
})
let menu = ref([])
let menuProps = ref({
	value: "category_id",
	label: "category_name",
	checkStrictly: true
})

function open(data) {
	visible.value = true
	if (data) {
		menu.value = data
	}
}

async function submit() {
	if (categoryRef.value.getCheckedNodes().length > 0) {
		form.value.category_id = categoryRef.value.getCheckedNodes()[0].value
	}
	emit('success', form.value.category_id)
	visible.value = false;
}
</script>
<style scoped>
.el-form-item {
	margin-bottom: 18px;
}
</style>
