const CiyTreemenu = {
    name: 'ciy-treemenu',
    template: `
      <div class="treemenu">
        <ul>
          <li v-for="item in treeData" :key="item.id">
            <span v-if="item.children" @click="item.expanded = !item.expanded" style="font-weight:bold;">{{ item.name }}</span>
            <span v-else @click="selectNode(item)" :style="{color:item.select?'#0068ac':''}">{{ item.name }}</span>
            <div v-if="item.children && item.expanded" class="tree-children">
                <ciy-treemenu :tree-data="item.children" @node-selected="selectNode"></ciy-treemenu>
            </div>
          </li>
        </ul>
      </div>
    `,

    props: {
        treeData: {
            type: Array,
            required: true,
            default: () => []
        }
    },
    beforeCreate() {
        console.log('beforeCreate: 实例初始化之后，数据观测和事件配置之前被调用');
    },
    created() {
        console.log('created: 实例创建完成后被调用，已完成数据观测、属性和方法的运算',this.treeData);
    },
    beforeMount() {
        console.log('beforeMount: 挂载开始之前被调用，相关的render函数首次被调用');
    },
    mounted() {
        console.log('mounted: 实例挂载完成后调用，此时DOM已经渲染', this.$el);
    },
    beforeUpdate() {
        console.log('beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前');
    },
    updated() {
        console.log('updated: 数据更改导致的虚拟DOM重新渲染和打补丁后调用');
    },
    beforeUnmount() {
        console.log('beforeUnmount: 实例销毁之前调用，此时实例仍然完全可用');
    },
    unmounted() {
        console.log('unmounted: 实例销毁后调用，所有指令都已解绑，所有事件监听器都已移除');
    },
    activated() {
        console.log('activated: 被keep-alive缓存的组件激活时调用');
    },
    deactivated() {
        console.log('deactivated: 被keep-alive缓存的组件停用时调用');
    },
    errorCaptured(err, instance, info) {
        console.log('errorCaptured: 捕获一个来自后代组件的错误时被调用');
        console.error('Error:', err);
        console.log('Vue instance:', instance);
        console.log('Error info:', info);
        // 可以阻止错误继续向上传播
        return false;
    },
    renderTracked({ key, target, type }) {
        // console.log('renderTracked: 跟踪虚拟DOM重新渲染时调用');
        // console.log(`操作类型: ${type}, 目标: ${target}, 键: ${key}`);
    },
    renderTriggered({ key, target, type }) {
        // console.log('renderTriggered: 虚拟DOM重新渲染被触发时调用');
        // console.log(`操作类型: ${type}, 目标: ${target}, 键: ${key}`);
    },
    methods: {
        selectNode(node) {
            this.$emit('node-selected', node);
        }
    }
};