<template>
    <ap-container>
        <ap-aside margin="1111" width="50%">
            <ap-aside-tree v-if="showTree" ref="fileTree" :options.sync="treeOptions">
                <span slot="tree" slot-scope="scope">
                    {{ scope.data.label }}
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-container>
            <ap-main margin="1110" class="flex-col">
                <div>
                    <template v-if="isFolder">
                        <ap-upload ref="uploadRef" :options="uploadOpt">
                            <el-button type="primary">上传文件</el-button>
                        </ap-upload>
                    </template>
                    <template v-if="isLeaf">
                        <div><span class="label">文件路径：</span> {{ filePath }}</div>
                        <div><span class="label">文件名：</span> {{ fileName }}</div>
                        <div><span class="label">文件大小：</span> {{ fileSize }} M</div>
                        <div><span class="label">预览地址：</span> {{ previewUrl }} </div>
                        <div style="margin-top: 20px">
                            <el-button type="primary" icon="el-icon-download" @click="downloadFile">下载</el-button>
                            <el-button type="danger" icon="el-icon-download" @click="deletedFile">删除</el-button>
                        </div>
                    </template>
                </div>
                <div class="ap-split-line"></div>
                <div class="flex-1" style="width:100%;min-height: 0;">
                    <el-image v-if="showImage"
                              style="width: 100%; height: 100%" fit="contain"
                              :src="previewUrl"
                              :preview-src-list="[previewUrl]">
                    </el-image>
                    <video v-if="showVideo" width="100%" height="100%" controls>
                        <source :src="previewUrl" type="video/mp4">
                    </video>
                </div>

            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
import {download} from 'ap-util/util/FileServiceUtil'

export default {
    name: 'SysFileSystem',
    data() {

        return {
            // ----- 左侧树 -----
            showTree: true,
            treeOptions: this.getTreeOption(),
            selectNode: "",
            // ----- 右侧 -----
            selectedData: {},
            uploadFileName: '',
            uploadOpt: {
                beforeUpload: (file) => {
                    if (this.selectedData.id == null) {
                        this.$message.error("请选择文件夹")
                        return false;
                    }
                    return true;
                },
                data: () => {
                    // 服务器保存的路径。删除容器映射的路径
                    let filePath = this.selectedData.id.replace("/ap/files/fs", "");
                    return {
                        filePath: filePath,
                    }
                },
                onSuccess: (response, file, fileList) => {
                    console.log("上传文件地址：" + response.data)
                    this.previewUrl = this.$env.FS_URL + response.data;
                    this.$message.success('成功！')
                },
                onError: (response, file, fileList) => {
                    this.$message.success('失败！')
                }
            },
            isLeaf: false,
            isFolder: false,
            fileSize: "",
            filePath: "",
            fileName: "",
            showImage: false,
            showVideo: false,
            previewUrl: "",
            folder: "/ap/files", // 基础文件夹
            // folder: this.getFolder(), // todo基础文件夹
        }
    },
    methods: {
        getFolder(){
            this.$request({
                url: '/apm/sys/fileSystem/getFolder',
                method: 'post',
                data:{}
            }).then(response => {
                this.folder = response.data;
            })
        },
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "文件列表",
                onClick: (data, node, comp) => {
                    this.selectedData = data;
                    if (data.isLeaf) {
                        this.isLeaf = true;
                        this.isFolder = false;
                        this.fileName = data.label;
                        let id = data.id;
                        this.filePath = id;
                        this.getFileSize();
                        this.showImage = false;
                        this.showVideo = false;
                        this.previewUrl = this.$env.FS_URL+ id.substring(this.folder.length, id.length);
                        if (id.endsWith(".jpg") || id.endsWith(".png") || id.endsWith(".bmp")) {
                            this.showImage = true;
                        }
                        if (id.endsWith(".mp4")) {
                            this.showVideo = true;
                        }
                    } else {
                        this.isLeaf = false;
                        this.isFolder = true;
                    }
                },
                defaultExpandAll: false,
                lazy: true,
                load: (node, resolve) => {
                    this.$request({
                        url: '/apm/sys/fileSystem/getFileList',
                        method: 'post',
                        data:{
                            path: node.data.id
                        }
                    }).then(response => {
                        resolve(response.data);
                    })
                },
                initData: false,
                loadOptions: {
                    treeKey: {
                        idKey: "id",
                        parentKey: "parentId",
                        childrenKey: "children",
                        label: "id"
                    }
                },
            };

            return treeOptions;
        },
        downloadFile() {
            download({
                url: '/apm/sys/fileSystem/downloadFile',
                data: {
                    fileUrl: this.selectedData.id
                },
                methods: 'post'
            })
        },
        deletedFile() {
            this.$request({
                url: '/apm/sys/fileSystem/deletedFile',
                method: 'post',
                data:{
                    fileUrl: this.selectedData.id
                }
            }).then(response => {
                if (response.data) {
                    this.$message.success("删除成功");
                    this.isLeaf = false;
                    this.showTree = false;
                    this.$nextTick(()=> {
                        this.showTree = true;
                    })
                } else {
                    this.$message.error("删除失败");
                }
            })
        },
        getFileSize() {
            this.$request({
                url: '/apm/sys/fileSystem/getFileSize',
                method: 'post',
                data:{
                    path: this.selectedData.id
                }
            }).then(response => {
                this.fileSize = response.data ;
            })
        }
    }
}
</script>

<style scoped>
.label {
    font-weight: bold;
}
</style>
