<template>
    <div class="fix-verification">
        <el-card shadow="never">
            <template #header>
                <h3>修复验证 - 权限树行为测试</h3>
            </template>

            <div class="test-content">
                <p>验证当选中"成都市"时，"四川省"是否保持半选状态而不是全选状态</p>

                <div class="test-scenario">
                    <h4>测试场景：</h4>
                    <ol>
                        <li>初始状态：无任何选中项</li>
                        <li>操作：选中"成都市"</li>
                        <li>预期结果："成都市"被选中，"四川省"显示为半选状态（-）</li>
                        <li>关键点："四川省"不应该显示为全选状态</li>
                    </ol>
                </div>

                <div class="tree-container">
                    <data-permission-tree :data="treeData" :selected-keys="selectedKeys"
                        @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
                </div>

                <div class="selected-info">
                    <h4>当前选中的节点ID：</h4>
                    <p>{{ selectedKeys }}</p>

                    <h4>当前半选的节点ID：</h4>
                    <p>{{ indeterminateKeys }}</p>
                </div>

                <div class="actions">
                    <el-button @click="selectChengdu">选中成都市</el-button>
                    <el-button @click="selectAllSichuan">选中四川省所有城市</el-button>
                    <el-button @click="clearSelection">清空选择</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

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

// 树形数据示例 - 模拟地理层级结构
const treeData: TreeData[] = [
    {
        id: 1,
        name: '中国',
        children: [
            {
                id: 2,
                name: '四川省',
                children: [
                    { id: 3, name: '成都市' },
                    { id: 4, name: '绵阳市' },
                    { id: 5, name: '德阳市' }
                ]
            },
            {
                id: 6,
                name: '广东省',
                children: [
                    { id: 7, name: '广州市' },
                    { id: 8, name: '深圳市' },
                    { id: 9, name: '珠海市' }
                ]
            }
        ]
    }
]

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

// 半选的键值
const indeterminateKeys = ref<number[]>([])

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

// 处理选中事件
const handleCheck = (keys: CheckedKeys) => {
    console.log('Checked keys:', keys.checked)
    console.log('Indeterminate keys:', keys.indeterminate)
    selectedKeys.value = keys.checked
    indeterminateKeys.value = keys.indeterminate
}

// 选中成都市
const selectChengdu = () => {
    selectedKeys.value = [3]
}

// 选中四川省所有城市
const selectAllSichuan = () => {
    selectedKeys.value = [3, 4, 5]
}

// 清空选择
const clearSelection = () => {
    selectedKeys.value = []
}
</script>

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

.test-content {
    padding: 20px 0;
}

.test-scenario {
    background-color: #f0f9eb;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.test-scenario h4 {
    margin-top: 0;
    color: #303133;
}

.test-scenario ol {
    padding-left: 20px;
    margin: 10px 0 0 0;
}

.test-scenario li {
    margin: 8px 0;
}

.tree-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #f5f7fa;
    min-height: 200px;
}

.selected-info {
    margin-top: 20px;
    padding: 15px;
    background-color: #ecf5ff;
    border-radius: 4px;
}

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

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

.actions {
    margin-top: 20px;
}

.actions .el-button {
    margin-right: 10px;
}
</style>