<template>
    <div class="demo-container">
        <h2>Data Permission Tree Demo</h2>

        <div class="demo-section">
            <h3>Basic Usage</h3>
            <data-permission-tree :data="treeData" :selected-keys="selectedKeys"
                @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
        </div>

        <div class="demo-section">
            <h3>Disabled State</h3>
            <data-permission-tree :data="treeData" :selected-keys="selectedKeys" :disabled="true"
                @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
        </div>

        <div class="selected-info">
            <h3>Selected Keys:</h3>
            <p>{{ selectedKeys }}</p>
        </div>

        <div class="instructions">
            <h3>Expected Behavior:</h3>
            <ul>
                <li>Select "中国" (ID: 1) → UI shows all children selected, but only records value: 1</li>
                <li>Select "湖北省" (ID: 2) → UI shows "中国" indeterminate, "湖北省" and children selected, records: 2</li>
                <li>Select "成都市" (ID: 6) → UI shows "中国" and "长沙省" indeterminate, "成都市" selected, records: 6</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DataPermissionTree from './index.vue'
import type { TreeData } from './types'

// 树形数据示例 (matching the requirement)
const treeData: TreeData[] = [
    {
        id: 1,
        name: '中国',
        children: [
            {
                id: 2,
                name: '湖北省',
                children: [
                    { id: 3, name: '武汉市' },
                    { id: 4, name: '孝感市' }
                ]
            },
            {
                id: 5,
                name: '长沙省',
                children: [
                    { id: 6, name: '成都市' }
                ]
            }
        ]
    },
    {
        id: 7,
        name: '测试文件夹'
    }
]

// 选中的键值
const selectedKeys = ref<number[]>([])

// 处理选中键值变化
const handleSelectedKeysChange = (keys: number[]) => {
    selectedKeys.value = keys
}

// 处理选中事件
const handleCheck = (keys: { checked: number[], indeterminate: number[] }) => {
    console.log('Checked keys:', keys.checked)
    console.log('Indeterminate keys:', keys.indeterminate)
}
</script>

<style scoped>
.demo-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
}

.demo-section h3 {
    margin-top: 0;
    color: #303133;
}

.selected-info {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.selected-info h3 {
    margin-top: 0;
    color: #303133;
}

.selected-info p {
    font-family: monospace;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
}

.instructions {
    padding: 20px;
    background-color: #fffbe6;
    border-radius: 4px;
    border: 1px solid #ffe58f;
}

.instructions h3 {
    margin-top: 0;
    color: #303133;
}

.instructions ul {
    margin: 0;
    padding-left: 20px;
}

.instructions li {
    margin-bottom: 10px;
}
</style>