<script lang="ts">
export default {
    name: "datamanagement",//实验数据管理
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick, defineAsyncComponent } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from "element-plus";
import { tstaskList, getTsNodesTree, tsFilesPage } from "@/api/datamanagement";
// 文件预览相关
import useFileUpload from "@/components/file/file/useFileUpload";
import useHeaderStorageList from "@/components/header/useHeaderStorageList";
import useFileData from "@/components/file/file/useFileData";
import Viewfile from '@/views/component/Viewfile.vue'
import useFilePreview from "@/components/file/file/useFilePreview";
import MarkdownViewerAsyncLoading from "@/components/file/preview/MarkdownViewerAsyncLoading.vue";
import VideoPlayerAsyncLoading from "@/components/file/preview/VideoPlayerAsyncLoading.vue";
import TextViewerAsyncLoading from "@/components/file/preview/TextViewerAsyncLoading.vue";
import MarkdownViewerDialogAsyncLoading from "@/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
const { dialogVideoVisible, dialogTextVisible, dialogPdfVisible, dialogOfficeVisible, dialog3dVisible } = useFilePreview();
const { clearALlFinishedUploadFile } = useFileUpload();
const { currentStorageKey } = useHeaderStorageList();
const { openRow } = useFileData();

//左侧树的选择框
const projectId = ref()
const projectArr = ref([])
//左侧树配置
const pathid = ref()
const treeRef = ref();
const treedata = ref([])
const treeloading = ref(false)
const defaultProps = {
    children: "children",
    label: "nodeName"
};
const treeForm = ref({
    taskId: '',
    nodeName: '',
})
//工作空间
const props = {
    label: 'fileName',
    children: 'zones',
}
const workloading = ref(false)
//表格数据配置
const queryParams: any = ref({
    current: 1,
    size: 20,
    nodeId: '',//节点ID
    taskId: '',//项目Id
    childNode: '1'
});
const worktree = ref(false)
const workdata = ref([])
//备份空间
const backupsdata = ref([])
// 右键菜单相关
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const currentNode = ref<any>(null)
//文件差异性对比
const differential = ref(false)
function diffFile(){
    differential.value = true
}
function diffClose() {
    differential.value = false
}
//获取所有项目
function getProject() {
    tstaskList().then((res: any) => {
        projectArr.value = res.data
        projectId.value = projectArr.value[0].id
        gettreedata()
    })
}
//获取树数据
function gettreedata() {
    treeloading.value = true
    treeForm.value.taskId = projectId.value
    getTsNodesTree(treeForm.value).then((res: any) => {
        treedata.value = res.data
        treeloading.value = false
        pathid.value = treedata.value[0].nodeId
        nextTick(() => {
            treeRef.value?.setCurrentKey(pathid.value);
        });
        getWorkData()
    })
}
function handleNodeClick(data: any, node: any) {
    pathid.value = data.nodeId
    getWorkData()
}
//工作空间树点击
const handleCheckChange = (
    data: any,
    checked: boolean,
    indeterminate: boolean
) => {
    console.log(data, checked)
}
//工作空间树获取
//获取工作空间数据
function getWorkData() {
    // workloading.value = true
    queryParams.value.nodeId = pathid.value
    queryParams.value.taskId = projectId.value
    tsFilesPage(queryParams.value).then((res: any) => {
        // workloading.value = false
        workdata.value = res.data.records
        backupsdata.value = res.data.records
        worktree.value = true
    })

}
//备份空间
function backupsChange(
    data: any,
    checked: boolean,
    indeterminate: boolean
) {
    console.log(data, checked)
}
//右键菜单
const handleRightClick = (event: Event, data: any, node: any) => {
    console.log(data)
    event.preventDefault()
    currentNode.value = data
    contextMenuVisible.value = true
    contextMenuPosition.value = {
        x: (event as MouseEvent).clientX + 10,
        y: (event as MouseEvent).clientY
    }
}

const handleMenuClick = (action: string, type: any) => {
    contextMenuVisible.value = false
    switch (action) {
        case 'restore':
            // 处理恢复逻辑
            break
        case 'backups':
            // 处理备份逻辑
            break
        case 'delete':
            // 处理删除逻辑
            break
        case 'preview':
            // 处理预览逻辑
            break
    }
}

// 点击其他地方关闭菜单
document.addEventListener('click', () => {
    contextMenuVisible.value = false
})
onMounted(() => {
    getProject()
});
//拖动条
const vMove = {
    mounted(el: any) {
        el.onmousedown = function (e: any) {
            var init = e.clientX;
            var parent: any = document.getElementById("silderLeft");
            const initWidth: any = parent.offsetWidth;
            document.onmousemove = function (e) {
                var end = e.clientX;
                var newWidth = end - init + initWidth;
                parent.style.width = newWidth + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
        };
    }
}
//预览
// 文件预览相关, 视频、音频、文本、图片
const VideoPlayer = defineAsyncComponent({
    loader: () => import("@/components/file/preview/VideoPlayer.vue"),
    loadingComponent: VideoPlayerAsyncLoading
})
const TextViewer = defineAsyncComponent({
    loader: () => import("@/components/file/preview/TextViewer.vue"),
    loadingComponent: TextViewerAsyncLoading
})
const MarkdownViewer = defineAsyncComponent({
    loader: () => import("@/components/file/preview/MarkdownViewer.vue"),
    loadingComponent: MarkdownViewerDialogAsyncLoading
})
const PdfViewer = defineAsyncComponent({
    loader: () => import("@/components/file/preview/PdfViewer.vue"),
    loadingComponent: MarkdownViewerDialogAsyncLoading
})
const OfficeViewer = defineAsyncComponent({
    loader: () => import("@/components/file/preview/OfficeViewer.vue"),
    loadingComponent: MarkdownViewerDialogAsyncLoading
})
const Three3dPreview = defineAsyncComponent({
    loader: () => import("@/components/file/preview/Three3dPreview.vue"),
    loadingComponent: MarkdownViewerDialogAsyncLoading
})
</script>

<template>
    <div class="faulttemplate-box">
        <aside id="silderLeft">
            <div>
                <el-select v-model="projectId" placeholder="请选择项目" @change="gettreedata()">
                    <el-option v-for="item in projectArr" :key="item.id" :label="item.taskName" :value="item.id" />
                </el-select>
                <div class="tree_sou">
                    <el-input v-model="treeForm.nodeName" style="width:100%;margin:10px 9px 10px 0px;"
                        placeholder="节点名称" clearable :suffix-icon="Search" @change="gettreedata()" />
                </div>

                <el-tree ref="treeRef" node-key="nodeId" :data="treedata" :highlight-current="true"
                    :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick"
                    class="silderLeft-default" style="height: calc(100vh - 280px); overflow: auto;margin-top: 10px;">
                    <template #default="{ data }">
                        <span class="custom-tree-node">
                            <span class="text">{{ data.nodeName }}</span>
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="moveBtn" v-move>
                <div class="moveBtn-line"></div>
            </div>
        </aside>
        <section class="silderRight">
            <div class="tree_button"><el-button type="primary" @click="diffFile()" >文件差异性对比</el-button></div>
            <div class="tree_box">
                <div class="tree_left">
                    <div class="tree_title">工作空间:</div>
                    <div>
                        <el-scrollbar height="73vh">
                            <el-tree v-if="worktree" style="max-width: 600px" :props="props" :data="workdata"
                                @node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
                                v-loading="workloading" @check-change="handleCheckChange">
                                <template #default="{ data }">
                                    <span class="custom-tree-node">
                                        <!-- data.children.length -->
                                        <span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ? '0' :
                                            data.fileSize + 'MB' }})</span>
                                    </span>
                                </template>
                            </el-tree>
                            <div v-show="contextMenuVisible" class="context-menu" :style="{
                                left: `${contextMenuPosition.x}px`,
                                top: `${contextMenuPosition.y}px`
                            }">
                                <div class="menu-item" @click="handleMenuClick('backups', 'local')">备份</div>
                                <div class="menu-item" @click="handleMenuClick('delete', 'local')">删除</div>
                                <div class="menu-item" @click="handleMenuClick('preview', 'local')">预览</div>
                            </div>
                        </el-scrollbar>

                    </div>
                </div>
                <div class="tree_left">
                    <div class="tree_title">备份空间:</div>
                    <div>
                        <el-scrollbar height="73vh">
                            <el-tree v-if="worktree" style="max-width: 600px" :props="props" :data="backupsdata"
                                @node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
                                v-loading="workloading" @check-change="backupsChange">
                                <template #default="{ data }">
                                    <span class="custom-tree-node">
                                        <!-- data.children.length -->
                                        <span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ? '0' :
                                            data.fileSize + 'MB' }})</span>
                                    </span>
                                </template>
                            </el-tree>
                            <div v-show="contextMenuVisible" class="context-menu" :style="{
                                left: `${contextMenuPosition.x}px`,
                                top: `${contextMenuPosition.y}px`
                            }">
                                <div class="menu-item" @click="handleMenuClick('restore', 'minio')">恢复</div>
                                <div class="menu-item" @click="handleMenuClick('delete', 'minio')">删除</div>
                                <div class="menu-item" @click="handleMenuClick('preview', 'minio')">预览</div>
                            </div>
                        </el-scrollbar>

                    </div>
                </div>
                <!-- 文件差异性对比 -->
                <el-dialog title="文件差异性对比" v-model="differential" width="50%" :before-close="diffClose" top="30px"
                    draggable destroy-on-close>
                    <div>
                        <el-scrollbar height="400px">
                            <div class="newContent">
                                <div class="newContent_title"><span class="newContent_title_text">新增内容：</span>
                                    <el-button type="primary">全部备份</el-button>
                                </div>
                                <el-table v-loading="loading" :data="tableData"
                                    @selection-change="handleSelectionChange"
                                    :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
                                    style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
                                    <el-table-column type="selection" width="40" />
                                    <!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
                                    <el-table-column prop="fileName" label="文件名称"></el-table-column>
                                    <el-table-column prop="fileSize" label="文件大小">
                                        <template #default="scope">
                                            {{ scope.row.fileSize + 'MB' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="workPath" label="路径"></el-table-column>
                                    <el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
                                    <el-table-column fixed="right" label="操作" width="120" align="center">
                                        <template #default="scope">
                                            <span
                                                style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">

                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="newContent">
                                <div class="newContent_title"><span class="newContent_title_text">变更内容：</span>
                                    <el-button type="primary">全部备份</el-button>
                                </div>
                                <el-table v-loading="loading" :data="tableData"
                                    @selection-change="handleSelectionChange"
                                    :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
                                    style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
                                    <el-table-column type="selection" width="40" />
                                    <!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
                                    <el-table-column prop="fileName" label="文件名称"></el-table-column>
                                    <el-table-column prop="fileSize" label="文件大小">
                                        <template #default="scope">
                                            {{ scope.row.fileSize + 'MB' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="workPath" label="路径"></el-table-column>
                                    <el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
                                    <el-table-column fixed="right" label="操作" width="120" align="center">
                                        <template #default="scope">
                                            <span
                                                style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">

                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="newContent">
                                <div class="newContent_title"><span class="newContent_title_text">缺失内容：</span> <el-button
                                        type="primary">全部恢复</el-button> </div>
                                <el-table v-loading="loading" :data="tableData"
                                    @selection-change="handleSelectionChange"
                                    :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
                                    style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
                                    <el-table-column type="selection" width="40" />
                                    <!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
                                    <el-table-column prop="fileName" label="文件名称"></el-table-column>
                                    <el-table-column prop="fileSize" label="文件大小">
                                        <template #default="scope">
                                            {{ scope.row.fileSize + 'MB' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="workPath" label="路径"></el-table-column>
                                    <el-table-column prop="updateTime" width="170" label="修改日期"></el-table-column>
                                    <el-table-column fixed="right" label="操作" width="120" align="center">
                                        <template #default="scope">
                                            <span
                                                style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">

                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>

                    </div>
                </el-dialog>
                <!-- 组件预览 -->
                <!-- 视频播放器 -->
                <!-- <el-dialog draggable class="zfile-video-dialog" :destroy-on-close="true" v-model="dialogVideoVisible">
                    <video-player v-if="dialogVideoVisible" ref="videoPlayer" />
                </el-dialog> -->
                <!-- 文本编辑器 -->
                <!-- <el-dialog draggable class="zfile-text-dialog zfile-dialog-mini-close" :destroy-on-close="true"
                    :title="filePreview.fileName" v-model="dialogTextVisible">
                    <TextViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
                        v-if="dialogTextVisible && filePreview.fileName.indexOf('.md') === -1" />
                    <MarkdownViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
                        v-if="dialogTextVisible && filePreview.fileName.indexOf('.md') !== -1" />
                </el-dialog> -->

                <!-- pdf 在线预览 -->
                <!-- <el-dialog draggable class="zfile-pdf-dialog" :title="filePreview.fileName" v-model="dialogPdfVisible">
                    <PdfViewer :file-name="filePreview.fileName" :file-url="filePreview.url" v-if="dialogPdfVisible" />
                </el-dialog> -->

                <!-- office 在线预览 -->
                <!-- <el-dialog draggable class="zfile-office-dialog zfile-dialog-mini-close zfile-dialog-hidden-title"
                    :title="filePreview.fileName" v-model="dialogOfficeVisible">
                    <OfficeViewer :file-name="filePreview.fileName" :file-url="filePreview.url"
                        v-if="dialogOfficeVisible" />
                </el-dialog> -->

                <!-- 3d 在线预览 -->
                <!-- <el-dialog draggable class="zfile-3d-dialog" :title="filePreview.fileName" v-model="dialog3dVisible">
                    <Three3dPreview :file-name="filePreview.fileName" :file-url="filePreview.url"
                        v-if="dialog3dVisible" />
                </el-dialog> -->
                <!-- 音频播放器 -->
                <!-- <AudioPlayer></AudioPlayer> -->
                <!-- <Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="fileType"
                    @update="CloseView" /> -->
            </div>

        </section>



    </div>
</template>

<style scoped lang="scss">
.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    background-color: #f2f4f9;

}

#silderLeft {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    position: relative;

    .tree_sou {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &:hover {
        .moveBtn {
            opacity: 1;
        }
    }
}

/* 拖动条 */
.moveBtn {
    height: 100%;
    width: 15px;
    padding: 0 6px;
    opacity: 0;
    position: absolute;
    right: -15px;
    top: 0;
}

.moveBtn-line {
    width: 100%;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background-color: #60bfff;
}

.silderRight {
    flex: 1;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    padding: 15px;
    // padding-bottom: 0px;
    box-sizing: border-box;
    margin-left: 15px;

    .tree_button {
        // display: flex;
        // align-items: center;
        // justify-content: flex-end;
        margin-bottom: 15px;
    }

    .tree_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tree_left {
            width: 49%;
            height: calc(78vh);


            .tree_title {
                font-size: 20px;
                font-weight: 400;

            }
        }
    }


}

.custom-tree-node {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    padding: 5px;
}

:deep() {
    .el-radio-group {
        display: block !important;

    }
}

//文字换行处理
.text {
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    // line-height: 1.5;
    max-width: 72%;
    // border: 1px solid #000;
    // padding: 10px;
}

:deep() {
    .el-tree-node__content {
        height: auto !important;
        line-height: 20px !important;
        // padding-left: 10px !important;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        padding: 0px !important;
    }
}

.context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    z-index: 9999;
    min-width: 100px;
    border-radius: 10px;

    .menu-item {
        padding: 8px 16px;
        cursor: pointer;

        &:hover {
            background: #409eff;
            color: #fff;
            border-radius: 10px;
        }
    }
}

//文件差异性对比
.newContent {
    width: 100%;

    .newContent_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .newContent_title_text {
            font-size: 20px;
            font-weight: 800;
        }
    }

}
</style>
