<template>
	<!-- v-if="isApplicableScope" -->
	<div>
		<div class="dialog_main">
			<div class="dialog_main_checkSelect">
				<div>
					<span>已选</span>
				</div>
				<div style="overflow-y: auto; height: 380px">
					<div class="dialog_main_content">
						<template
							v-for="(item, index) in datas.selectedKeys"
							:key="index"
						>
							<div class="dialog_main_checkSelect_tag">
								<span
									style="margin-right: 12px; font-size: 12px"
									>{{ item.label }}</span
								>
								<i
									class="el-icon-close"
									style="cursor: pointer"
									@click="handleClose(item)"
								/>
							</div>
						</template>
					</div>
				</div>
			</div>
			<div class="dialog_main_select">
				<span>选择部门</span>
				<div
					style="
						margin-top: 25px;
						margin-left: 18px;
						margin-bottom: 25px;
						overflow-y: auto;
					"
				>
					<el-tree
						:data="deptsList"
						show-checkbox
						node-key="id"
						:default-expand-all="true"
						:props="defaultProps"
						ref="myTree"
						@check="handleNodeClick"
						:default-checked-keys="checkIds"
					>
						<template v-slot:default="{ node, deptsList }">
							<span
								:style="{
									color: node.checked
										? 'rgba(194, 194, 194, 1)'
										: 'rgba(31, 31, 31, 1)',
								}"
							>
								{{ node.label }}
							</span>
						</template>
					</el-tree>
				</div>
			</div>
		</div>
		<div class="dialog_footer">
			<div class="dialog_footer_title">备注说明</div>
			<div>
				<el-input
					type="textarea"
					maxlength="100"
					show-word-limit
					v-model="remark"
					@input="handleInput"
				></el-input>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, toRefs, nextTick, reactive } from 'vue';
import { useRoute } from 'vue-router';
const myTree = ref(null);
const defaultProps = {
	children: 'children',
	label: 'label',
};
const $route = useRoute();
const props = defineProps({
	remark: {
		type: String,
	},
	checkIds: {
		type: Array,
	},
	close: {
		type: Function,
	},
	commit: {
		type: Function,
	},
	deptsList: {
		type: Array,
	},
	handleInput: {
		type: Function,
	},
});
const emits = defineEmits(['handleInput']);
const state = toRefs(props);
const { deptsList, remark, checkIds } = state;

const datas = reactive({
	ids: [],
	selectedKeys: [],
});

if ($route.query.id) {
	datas.selectedKeys = deptsList.value[0].children.filter((item) => {
		datas.ids.push(item.id);
		return checkIds.value.includes(item.id);
	});
	console.log(datas.selectedKeys, '=datas.selectedKeys=');
}

const handleNodeClick = () => {
	nextTick(() => {
		let data = myTree.value.getCheckedNodes();
		datas.selectedKeys = [];
		datas.ids = [];
		datas.selectedKeys = data.filter((item) => {
			if (item.label !== '全选') {
				datas.ids.push(item.id);
			}
			return item.label !== '全选';
		});
	});
};
const handleInput = (e) => {
	emits('handleInput', e);
};
const handleClose = (item) => {
	datas.ids = datas.ids.filter((v) => {
		return v !== item.id;
	});
	datas.selectedKeys = datas.selectedKeys.filter((v) => {
		return v.id !== item.id;
	});
	//重置复选框
	myTree.value.setCheckedKeys(datas.ids);
};
const getData = () => {
	return {
		remark: remark.value,
		selectedKeys: datas.selectedKeys,
		ids: datas.ids,
	};
};
defineExpose({
	getData,
});
</script>

<style lang="scss" scoped>
@import '../../index.scss';
.dialog_main_content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 20px;
	// height: 380px;
}
</style>
