<template>
    <div class="permission-tree-demo">
        <el-card shadow="never">
            <template #header>
                <h3>权限树演示</h3>
            </template>

            <div class="demo-content">
                <p>此演示展示了权限树的行为：</p>
                <ul>
                    <li>当选中"成都市"时，即使"四川省"下的所有城市都被选中，"四川省"也不会显示为全选状态</li>
                    <li>父节点将始终保持半选状态（-），以表明其子节点被部分选择</li>
                    <li>这避免了暗示整个层级都被完全选中的误解</li>
                </ul>

                <el-tabs v-model="activeTab">
                    <el-tab-pane label="基础演示" name="basic">
                        <div class="tree-container">
                            <data-permission-tree :data="treeData" :selected-keys="selectedKeys"
                                @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="全选功能演示" name="selectAll">
                        <div class="tree-container">
                            <el-checkbox v-model="isSelectAll" @change="handleSelectAllChange">
                                全选所有权限
                            </el-checkbox>

                            <data-permission-tree v-if="!isSelectAll" :data="treeData" :selected-keys="selectedKeys"
                                @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />

                            <div v-else class="select-all-message">
                                <p>已启用全选模式，所有权限都将被授予。</p>
                                <p>树形结构已被隐藏以避免混淆。</p>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="禁用状态演示" name="disabled">
                        <div class="tree-container">
                            <el-checkbox v-model="isDisabled" style="margin-bottom: 15px;">
                                禁用权限选择
                            </el-checkbox>

                            <data-permission-tree :data="treeData" :selected-keys="selectedKeys" :disabled="isDisabled"
                                @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
                        </div>
                    </el-tab-pane>
                </el-tabs>

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

                <div class="instructions">
                    <h4>使用说明：</h4>
                    <ol>
                        <li><strong>基础演示</strong>：展示树形结构的基本交互和半选状态行为</li>
                        <li><strong>全选功能演示</strong>：当启用全选时，树形结构会隐藏，避免用户误操作</li>
                        <li><strong>禁用状态演示</strong>：展示组件在禁用状态下的表现</li>
                    </ol>
                </div>
            </div>
        </el-card>
    </div>
</template>

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

// 活动标签页
const activeTab = ref('basic')

// 是否全选
const isSelectAll = ref(false)

// 是否禁用
const isDisabled = ref(false)

// 树形数据示例 - 模拟地理层级结构
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[]>([3])

// 处理选中键值变化
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)
}

// 处理全选变化
const handleSelectAllChange = (value: boolean) => {
    isSelectAll.value = value
    if (value) {
        // 在全选模式下，可以设置一个特殊值表示全选
        selectedKeys.value = [-1] // -1表示全选
    } else {
        // 退出全选模式时，恢复之前的选中状态或默认状态
        selectedKeys.value = [3] // 恢复默认选中"成都市"
    }
}
</script>

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

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

.demo-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.demo-content li {
    margin: 8px 0;
    line-height: 1.5;
}

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

.select-all-message {
    text-align: center;
    padding: 40px 20px;
    color: #909399;
}

.select-all-message p {
    margin: 10px 0;
}

.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;
}

.instructions {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f9eb;
    border-radius: 4px;
    border-left: 4px solid #67c23a;
}

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

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

.instructions li {
    margin: 8px 0;
}
</style>