<template>
	<view style="display: flex;line-height: 60rpx;align-items: center;justify-content: space-between;" @click="clickNode(data)">
		<view style="display: flex;align-items: center;">
			<view v-if="data.children && data.children.length">
				<uni-icons v-if="data.isOpen" type="bottom" size="16" color="#2A5EFF"></uni-icons>
				<uni-icons v-else type="forward" size="16"></uni-icons>
			</view>
			<view style="padding-left: 10px;">{{ data.name }}</view>
		</view>
		<view style="display: flex;align-items: center;justify-content: space-between;">
			<view @tap.stop="del" style="font-size:24rpx;color: #999;">删除</view>
			<view @tap.stop="edit" style="font-size:24rpx;color: #318AFE;margin-left: 20rpx;">编辑</view>
		</view>
	</view>
	<view v-if="data.children && data.children.length && data.isOpen" style="margin-left: 16px;padding: 10rpx;line-height: 60rpx;">
		<tree-item v-for="(child,index) in data.children" :key="child.id" :data="child"
	    @clickNode="clickNode"></tree-item>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
	import treeItem from './tree-item.vue'
	import go from '@/commons/utils/go.js'
	
	const props=defineProps({
		data:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	})
	const emits=defineEmits(['del','edit'])
	
	function clickNode(item) {
	   item.isOpen = !item.isOpen
	}
	function del(){
		emits('del',props.index)
	} 
	function edit(){
		uni.setStorageSync('spec',props.data)
		go.to('PAGES_PRODUCT_GUIGE_EDIT', {
			type: 'edit'
		})
	}
	
	
	
	
</script>

<style lang="scss" scoped>
	
</style>