<template>
    <div style="min-width: 800px;">
        <a-row>
            <!-- 左侧文件树 -->
            <a-col :span="6">
                <a-tree
                    showLine
                    :treeData="treeData"
                    :expandedKeys="[expandedKeys[0]]"
                    :selectedKeys="selectedKeys"
                    :style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
                    @expand="onExpand"
                    @select="onSelect"
                ></a-tree>
            </a-col>

            <!--右侧缩略图-->
            <a-col :span="18">
                <a-row style="margin-top: 10px;padding-left: 2%;">
                    <a-col :span="24" style="margin-bottom: 10px">
                        <a-button @click="prev" preIcon="ant-design:left-outlined" type="primary">上一页</a-button>
                        <a-button @click="next" preIcon="ant-design:right-outlined" style="margin-left: 8px" type="primary">下一页</a-button>
                        <span style="margin-left: 100px;font-weight: bolder">{{ navName }}</span>
                    </a-col>
                    <a-col :span="24">
                        <img :src="imgUrl" preview>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts" setup>
    import {ref, unref,onMounted} from 'vue';
    //mock数据
    const mockdata = [{
        title: '第一页',
        key: '0-0',
        children: [{
            title: '1页',
            key: '0-0-0',
            imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg'
        }, {
            title: '2页',
            key: '0-0-1',
            imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
        }]
    }, {
        title: '第二页',
        key: '0-1',
        children: [{
            title: '1页',
            key: '0-1-0',
            imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
        }, {
            title: '2页',
            key: '0-1-1',
            imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
        }]
    }, {
        title: '第三页',
        key: '0-2',
        children: [{
            title: '1页',
            key: '0-2-0',
            imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg'
        }]
    }];
    /**
     * 左侧树形数据
     */
    const treeData = ref(mockdata);
    //选中的key
    const selectedKeys = ref([]);
    //展开的key
    const expandedKeys = ref([]);
    const sort = ref(0);
    //图片链接
    const imgUrl = ref('');
    //页码标题
    const navName = ref(''); 
    //图片集合
    const imgList = ref([]);

    onMounted(getImgList);

    /**
     * 加载图片集合
     */
    function getImgList() {
        var count = 0;
        for (var i = 0; i < unref(treeData).length; i++) {
            for (var j = 0; j < unref(treeData)[i].children.length; j++) {
                imgList.value.push({
                    key: unref(treeData)[i].children[j].key, 
                    pkey: unref(treeData)[i].key, 
                    sort: count++,
                    imgUrl: unref(treeData)[i].children[j].imgUrl, 
                    navName: unref(treeData)[i].title + "/" + unref(treeData)[i].children[j].title
                })
            }
        }
        setValue(imgList.value[unref(sort)]);
    }
    /**
     * 节点选中事件
     */
    function onSelect(selectedKeys, info) {
        for (var i = 0; i < unref(imgList).length; i++) {
            if (unref(imgList)[i].key === selectedKeys[0]) {
                sort.value = unref(imgList)[i].sort;
                setValue(unref(imgList)[i]);
                break;
            }
        }
    }
    /**
     * 节点展开事件
     */
    function onExpand(expandedKey) {
        expandedKeys.value = [];
        if (expandedKey !== null && expandedKey !== '') {
            expandedKeys.value[0] = expandedKey[1];
        }
    }
    /**
     * 上一页
     */
    function prev() {
        if (unref(sort) === 0) {
            sort.value = unref(imgList).length - 1;
        } else {
            sort.value = sort.value - 1;
        }
        setValue(unref(imgList)[unref(sort)]);
    }
    /**
     * 下一页
     */
    function next() {
        if (unref(sort) === unref(imgList).length - 1) {
            sort.value = 0;
        } else {
            sort.value = unref(sort) + 1;
        }
        setValue(unref(imgList)[unref(sort)]);
    }

    // 设置受控节点值
    function setValue(value) {
        selectedKeys.value = [];
        imgUrl.value = value.imgUrl;
        selectedKeys.value[0] = value.key;
        expandedKeys.value[0] = value.pkey;
        navName.value = value.navName;
    }
</script>
