<template>
	<!-- <el-tree-v2 :data="treeData" :props="defaultProps" ref="treeRef" :height="250" @node-expand="nodeExpand"
		@node-collapse="nodeCollapse">
		<template #default="{ node, data }">
			 注释：目录并且子项目大于1 
			<p v-if="data.children != null" :title=" node.label"
				style="display:flex;align-items: center;position: relative;">
				<span v-if="!data.isOpen" class="mr-10px folder folder-close">{{node.children.length}}</span>
				<span v-else class="mr-10px folder folder-open">{{node.children.length}}</span>
				注释 <span style="position: absolute;left: 8px;top:5px"></span>
				{{ node.label }}
			</p>

			注释 文档
			<div v-else :title="node.label" class="file" @click="toBeDoneClick(data.type,data.orderId)">
				<span></span>
				<p>
					<span>
						{{ node.label }}
					</span>
					<span>{{data.time}}</span>
				</p>

			</div>
		</template>
</el-tree-v2> -->

	<div style="height:250px">
		<p style="display:flex;align-items: center;position: relative;color: #606266;    font-size: var(--el-font-size-base);margin: 0;cursor: pointer;"
			@click="openDialog('待售后')">
			<span class="mr-10px folder folder-close">{{ list['待售后'] }}</span>
			待售后
		</p>
		<p style="display:flex;align-items: center;position: relative;color: #606266;    font-size: var(--el-font-size-base);margin: 0;margin-top: 4px;cursor: pointer;"
			@click="openDialog('待发货')">
			<span class="mr-10px folder folder-close">{{ list['待发货'] }}</span>
			待发货
		</p>
	</div>
	<ToBeDoneDialog ref="ToBeDoneDialogRef" @close="getList"/>
</template>
<script lang="ts" setup>
import ToBeDoneDialog from './ToBeDoneDialog.vue'
import { getBusinessToBeDoList } from '@/api/home'
import { useAppStore } from '@/store/modules/app'
import { useRouter } from 'vue-router'

const { push } = useRouter() // 路由跳转
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
const ToBeDoneDialogRef = ref()

const list = ref({
	'待售后': 0,
	'待发货': 0
})
const defaultProps = {
	children: 'children',
	label: 'name',
	nums: 'childrenNums'
}
const treeRef = ref(null)
const treeData = ref(
	[
		{
			id: 1,
			name: '草稿',
			isOpen: false,
			children: [
				{
					name: '草稿1111',
					time: "2024-2-24 20:40"
				},
				{
					name: '草稿2222',
					time: "2024-2-24 20:40"
				},
			],
		},
		{
			id: 2,
			name: '待发货',
			isOpen: false,
			children: [
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
				{
					type: "2",
					orderId: 10,
					name: '待发货1111',
					time: "2024-2-24 20:40"
				},
			],
		},
		{
			id: 3,
			name: '待售后',
			isOpen: false,
			children: [
				{
					name: '待售后1111',
					time: "2024-2-24 20:40"
				},
			],
		},
		{
			id: 4,
			name: '待开票',
			isOpen: false,
			children: [
				{
					name: '待开票1111',
					time: "2024-2-24 20:40"
				},
			],
		},
	]
)
const nodeExpand = (data) => {
	data.isOpen = true
}
const nodeCollapse = (data) => {
	data.isOpen = false
}

const openDialog = (type) => {
	if (mobile.value) {
		if (type == "待售后") {
			push({ name: 'AfterSale', query: { openType:"tobedone" } })
		} else if (type == "待发货") {
			push({ name: 'Order', query: {openType:"tobedone", } })
		}

	} else {
		ToBeDoneDialogRef.value?.open(type)
	}
}
const getList = () => {
	getBusinessToBeDoList().then((res) => {
		list.value = res
	})
}
defineExpose({getList})
onMounted(() => {
	getList()
})
</script>
<style>
.el-tree-node__expand-icon {
	display: none
}

.el-tree-node__content:hover,
.el-tree-node:focus>.el-tree-node__content {
	background: unset;
}

.el-tree-node {
	/* height: 40px !important; */
	/* line-height: 50px */
}
</style>
<style lang='scss' scoped>
.file {
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 10px;
	height: 26px;
	/* margin-top: 10px; */

	&>span {
		width: 5px;
		height: 5px;
		background-color: #575d6d;
		border-radius: 50%;
		margin-right: 5px;

		/* margin-bottom: 10px; */
	}

	p {
		display: flex;
		align-items: center;
		position: relative;
		width: calc(100% - 25px);
		justify-content: space-between;
		padding-bottom: 2px;
		border-bottom: 1px solid #eeeeee;
		margin: 0;
		color: #575d6d
	}


}

.folder {
	width: 23px;
	height: 23px;
	font-size: 10px;
	text-align: center;
	line-height: 28px;

	/* background: red; */
	&-close {
		background: url("@/assets/svgs/wenjianjia_shouqi.svg") no-repeat center center;
	}

	&-open {
		background: url('@/assets/svgs/wenjianjia_zhankai.svg') no-repeat center center;
	}

	&-close:hover {
		background: url("/src/assets/svgs/folderShare.svg") no-repeat center center;
		color: white;
	}

	&-open:hover {
		background: url('@/assets/svgs/olderOpen.svg') no-repeat center center;
		color: white;
	}
}
</style>