<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="480" draggable destroy-on-close @closed="$emit('closed')">
		<div class="headerBtn">
			<div class="btn"><el-button @click="update" :size="size" plain type="primary">刷新</el-button></div>
			<div class="btn"><el-button @click="addFolder" :size="size" plain type="primary">新建文件夹</el-button></div>
		</div>
		<el-scrollbar :max-height="360"  v-loading="loading">
			<div class="treeMain">
				<el-tree
					:data="list"
					:props="defaultProps"
					node-key="id"
					:expand-on-click-node="false"
					@node-click="getNodes"
				>
					<template #default="{ node }">
						<span class="custom-tree-node">
							<span class="treeName"><el-icon><sc-icon-Folder/></el-icon> {{ node.data.name }}</span>
						</span>
					</template>
				</el-tree>
			</div>
		</el-scrollbar>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name:"moveFile",
	emits: ['success', 'closed', 'addFolder'],
	data() {
		return {
			size:'small',
			mode: "move",
			titleMap: {
				move: '移动文件｜文件夹',
			},
			visible: false,
			isSave: false,
			loading:false,
			list:[],
			defaultProps:{
				children: 'children',
				label: 'name'
			},
			node:'',
			move:[
				{
					ids:[],
					file_type:"file",
					target_folder_id:''
				},
				{
					ids:[],
					file_type:"folder",
					target_folder_id:''
				}
			]
		}
	},
	mounted() {
		this.getData();
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		update(){
			this.getData();
		},
		addFolder(){
			this.$emit('addFolder',this.node);
		},
		async getData() {
			this.loading = true;
			const res = await this.$API.docs.manager.folderSelect.post();
			if(res.code == 200){
				this.list = res.data;
			}
			this.loading = false;
		},
		//表单提交方法
		async submit() {
			this.isSave = true;
			let params = this.setList();
			const res = await this.$API.docs.manager.move.post({move:params});
			this.isSave = false;
			if (res.code == 200) {
				this.$emit('success', this.form, this.mode)
				this.$message.success("操作成功")
			}
		},
		setList(){
			let arr = new Array();
			arr = this.move.filter(em=>em.ids.length!=0);
			return arr
		},
		getNodes(e){
			this.node = e;
			this.move.forEach(item=>{
				item.target_folder_id = e.id
			})
		},
		//表单注入数据
		setData(data){
			let fileIds = data.filter(item=> item.type == 'file').map(em=>em.id)
			let folderIds = data.filter(item=> item.type == 'folder').map(em=>em.id)
			this.move[0].ids = fileIds;
			this.move[1].ids = folderIds;
		}
	}
}
</script>

<style lang="scss" scoped>
	.headerBtn{
		display: flex;align-items: center;
		padding-bottom: 12px;
		margin-top: -10px;
		margin-bottom: 5px;
		.btn{
			margin-right: 12px;
		}
	}
	.treeMain{
		padding: 5px 0;
		border-radius: 4px;
		border: 1px solid rgba(0,0,0,0.12);
		.treeName{
			display: flex;align-items: center;
			.el-icon{
				margin-right: 8px;
			}
		}
	}
</style>
