<template>
    <a-layout style="height: 100vh; width: 100vw;">
        <a-layout-header>
            <menubardatavue></menubardatavue>
        </a-layout-header>
        <a-layout>
            <a-layout-sider :resize-directions="['right']" style=" min-width: 20vw;max-width: 50vw;">
                <a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
                    <GuiLeftSider class="lefttree" v-on:NodeClicked="ononeFilechoese"
                        v-on:NodeDblClicked="onFileDblClick" v-on:FilesSelected="onFilesSelected"
                        v-on:FolderClicked="onFolderClicked" v-on:FolderDblClicked="onFolderDblClick"
                        v-on:SaveFilesRequested="onSaveFilesRequested" v-on:reset="resetTreeData">
                    </GuiLeftSider>
                    <template #content>
                        <a-doption @click="onShowCurvesClick">显示曲线</a-doption>
                        <a-doption @click="openCurveSaveDialogForSelectedFiles">数据导出</a-doption>
                        <!-- <a-doption>Option 3</a-doption> -->
                    </template>
                </a-dropdown>
            </a-layout-sider>
            <a-layout-content class="right">
                <GuiForDataShow ref="GuiForDataShow"></GuiForDataShow>
            </a-layout-content>
        </a-layout>
        <!-- <a-layout-footer>Footer</a-layout-footer> -->

        <!-- 保存文件弹窗 -->
        <SaveFileDialog v-model:visible="showSaveDialog" :files="filesToSave" @save="handleSaveFiles"
            @cancel="handleCancelSave" />
    </a-layout>
</template>

<script>
import menubardatavue from './menuvue/menubar.vue';
import GuiForDataShow from './vuecomponents/GuiForDataShow.vue';
import GuiLeftSider from './vuecomponents/GuiLeftSider.vue';
import SaveFileDialog from './vuecomponents/SaveFileDialog.vue';
import { fs } from '@tauri-apps/api';
import { ElMessage } from 'element-plus';

export default {
    name: 'APPDataview',
    components: {
        menubardatavue,
        GuiForDataShow,
        GuiLeftSider,
        SaveFileDialog
    },
    data() {
        return {
            // 初始化数据
            message: '欢迎使用 Vue!',
            selectedFilePath: null, // 存储当前选中的文件路径
            selectedFilePaths: [], // 存储多选的文件路径
            treeData: [
                {
                    title: 'Trunk 0-0',
                    key: '0-0',
                    children: [
                        {
                            title: 'Branch 0-0-0',
                            key: '0-0-0',
                            children: [
                                {
                                    title: 'Leaf',
                                    key: '0-0-0-0',
                                },
                                {
                                    title: 'Leaf',
                                    key: '0-0-0-1',
                                }
                            ]
                        },
                        {
                            title: 'Branch 0-0-1',
                            key: '0-0-1',
                            children: [
                                {
                                    title: 'Leaf',
                                    key: '0-0-1-0',
                                },
                            ]
                        },
                    ],
                },
            ],
            showSaveDialog: false,
            filesToSave: [],
        }
    },
    methods: {
        // 处理单个文件选择（单击）
        async ononeFilechoese(filePath) {
            // console.log('选中文件路径:', filePath);
            // 只记录选中的文件路径，不立即加载数据
            this.selectedFilePath = filePath;
        },

        // 处理文件双击事件
        async onFileDblClick(filePath) {
            // console.log('双击文件路径:', filePath);
            // 双击时加载数据
            this.$refs.GuiForDataShow.onloaddata([filePath]);
        },

        // 处理多个文件选择（当使用Shift或Ctrl多选时）
        async onFilesSelected(filePaths) {
            // console.log('多选文件路径:', filePaths);
            // 存储多选的文件路径
            this.selectedFilePaths = filePaths;
            // 多选时，可以选择不自动加载数据，等待用户进一步操作
            if (filePaths && filePaths.length > 0) {
                this.selectedFilePath = filePaths[0];
            }
        },

        // 处理文件夹点击事件
        async onFolderClicked(folderPath, childFilePaths) {
            // console.log('选中文件夹:', folderPath);
            // console.log('文件夹下的文件:', childFilePaths);
            // 存储文件夹下的文件路径
            this.selectedFilePaths = childFilePaths;
        },

        // 处理文件夹双击事件
        async onFolderDblClick(folderPath, childFilePaths) {
            // console.log('双击文件夹:', folderPath);
            // console.log('文件夹下的文件:', childFilePaths);

            // 如果文件夹下有文件，则加载所有文件
            if (childFilePaths && childFilePaths.length > 0) {
                // 将所有文件路径传递给 GuiForDataShow 组件
                this.$refs.GuiForDataShow.onloaddata(childFilePaths);
            }
        },

        // 处理"显示曲线"菜单项点击事件
        async onShowCurvesClick() {
            // console.log('点击显示曲线菜单项');
            // 如果有多选文件，则加载所有选中的文件
            if (this.selectedFilePaths && this.selectedFilePaths.length > 0) {
                // console.log('加载多选文件:', this.selectedFilePaths);
                this.$refs.GuiForDataShow.onloaddata(this.selectedFilePaths);
            } else if (this.selectedFilePath) {
                // 如果只有单选文件，则加载单个文件
                // console.log('加载单选文件:', this.selectedFilePath);
                this.$refs.GuiForDataShow.onloaddata(this.selectedFilePath);
            }
        },

        resetTreeData() {
            this.selectedFilePaths = []
            this.$refs.GuiForDataShow.onloaddata(this.selectedFilePaths);
        },

        // 处理保存文件请求
        onSaveFilesRequested(selectedFiles) {
            this.filesToSave = selectedFiles
            this.showSaveDialog = true
        },
        // 处理保存文件
        async handleSaveFiles(saveData) {
            try {
                const { files, location } = saveData

                for (const file of files) {
                    // 构建目标文件路径
                    const fileName = file.label
                    const targetPath = `${location}/${fileName}`

                    // 复制文件
                    await fs.copyFile(file.path, targetPath)
                }

                ElMessage.success(`成功保存 ${files.length} 个文件到 ${location}`)
            } catch (error) {
                console.error('保存文件失败:', error)
                alert('保存文件失败: ' + error.message)
            }
        },

        // 取消保存
        handleCancelSave() {
            this.showSaveDialog = false
            this.filesToSave = []
        },
        async openCurveSaveDialogForSelectedFiles() {
            const paths = (this.selectedFilePaths && this.selectedFilePaths.length > 0)
                ? this.selectedFilePaths
                : (this.selectedFilePath ? [this.selectedFilePath] : []);

            if (!paths.length) {
                alert('请先选择一个或多个文件后再导出');
                return;
            }

            this.$refs.GuiForDataShow.openSaveCurveDialogByPaths(paths);
        },
    },
}
</script>

<style scoped>
/* 样式区域 */
h1 {
    color: #42b983;
}

.right {
    flex: 1;
    background-color: #f3f5fa;
    overflow: auto;
    height: 100%;
    width: 100%;
}
</style>