<template>
	<a-modal
		title="保存文件到网盘"
		v-model:visible="visible"
		:maskClosable="false"
		@cancel="handleDialogClose"
		@afterVisibleChange="handleVisibleChange"
	>
		<div class="dialog-content">
			<div class="target-path">
				<span class="label">目标路径：</span>
				<a-input v-model:value="targetPath" readonly size="small" />
			</div>

			<a-spin :spinning="loading">
				<a-directory-tree
					:treeData="fileTree"
					:fieldNames="{
						children: 'children',
						title: 'label'
					}"
					:defaultExpandedKeys="defaultExpandedKeys"
					@select="handleNodeClick"
				>
					<template #title="{ node, data }">
						<div class="custom-tree-node">
							<span class="label">{{ node.title }}</span>
							<a-button type="link" size="small" class="add-folder-btn" @click.stop="handleAddFolderBtnClick(data)">
								新建文件夹
							</a-button>
						</div>
					</template>
				</a-directory-tree>
			</a-spin>
		</div>

		<template #footer>
			<a-button @click="handleDialogClose">取 消</a-button>
			<a-button type="primary" :loading="sureBtnLoading" @click="handleDialogSure"> 确 定 </a-button>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { getFoldTree, saveShareFile } from '@/api/myResource/file'
	const { proxy } = getCurrentInstance()
	const props = defineProps({
		userFileIds: String,
		shareBatchNum: String,
		callback: Function
	})

	const visible = ref(false)
	const targetPath = ref('/')
	const fileTree = ref([])
	const loading = ref(false)
	const defaultExpandedKeys = ref([])
	const sureBtnLoading = ref(false)

	const handleDialogClose = () => {
		visible.value = false
		props.callback('cancel')
	}

	const handleVisibleChange = (val) => {
		if (val) {
			initFileTree()
		}
	}

	const initFileTree = async (id) => {
		try {
			loading.value = true
			const res = await getFoldTree()
			if (res.success) {
				fileTree.value = [res.data]
				defaultExpandedKeys.value = id ? [id] : [fileTree.value[0].id]
			} else {
				message.error(res.message)
			}
		} finally {
			loading.value = false
		}
	}

	const handleNodeClick = (selectedKeys, { node }) => {
		targetPath.value = node.filePath || '/'
	}

	const handleAddFolderBtnClick = async (data) => {
		const result = await proxy.$openDialog.addFolder({
			filePath: data.filePath || '/'
		})
		if (result === 'confirm') {
			initFileTree(data.id)
		}
	}

	const handleDialogSure = async () => {
		try {
			sureBtnLoading.value = true
			const res = await saveShareFile({
				filePath: targetPath.value,
				userFileIds: props.userFileIds,
				shareBatchNum: props.shareBatchNum
			})

			if (res.success) {
				visible.value = false
				message.success('保存成功')
				props.callback('confirm')
			} else {
				message.error(res.message)
			}
		} finally {
			sureBtnLoading.value = false
		}
	}

	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';
	@import '@/style/myResource/mixins.less';

	.dialog-content {
		height: 300px;
		overflow: auto;

		.target-path {
			display: flex;
			align-items: center;
			margin-bottom: 16px;

			.label {
				width: 80px;
			}

			.ant-input {
				flex: 1;
			}
		}

		.custom-tree-node {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.add-folder-btn {
				display: none;
			}

			&:hover .add-folder-btn {
				display: inline-block;
			}
		}
	}

	.ant-btn-primary {
		&,
		&:hover,
		&:focus {
			background-color: @primary-color;
			border-color: @primary-color;
		}
	}

	.ant-tree-node-selected {
		// background-color: .fade(@primary-color, 10%) !important;
	}
</style>
