<template>
    <div class="pageBackground">
        <div class="breadHeader">文件管理/列表</div>
        <div class="filecontent">
            <a-layout>
                <a-layout-sider>
                    <div class="siderHeader">文件目录</div>
                    <div class="flodContent">
                         <a-dropdown :trigger="['contextmenu']">
                           <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
                                v-model:selectedKeys="selectedKeys" @select="changeSelect">
                                <a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
                                    :title="itemNode.title" :value="itemNode">
                                </a-tree-node>
                            </a-directory-tree>
                            <template #overlay>
                            <a-menu class="menu" @click="menuClick">
                                <a-menu-item key="1">添加</a-menu-item>
                                <a-menu-item key="2">重命名</a-menu-item>
                                <a-menu-item key="3">删除</a-menu-item>
                            </a-menu>
                            </template>
                        </a-dropdown>
                        
                        
                    </div>
                </a-layout-sider>
                <a-layout-content>
                    <div class="main">
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">598</div>
                                    <div>文件总数</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">20</div>
                                    <div>图片</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">45</div>
                                    <div>音频</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">98</div>
                                    <div>数据库文件</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">112</div>
                                    <div>视频</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">36</div>
                                    <div>文档</div>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <a-row>
                            <a-col :span="12">
                                <a-form layout="inline">
                                    <a-form-item>
                                        <a-input placeholder="请输入" v-model="searchFile.queryCondition"></a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button type="primary" icon="search" style="margin-left: 21px" @click="searchgetFileList">查询</a-button>
                                        <a-button type="primary" icon="reload" style="margin-left: 8px" @click="reloadFileList">重置</a-button>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="12" style="text-align: right;">
                                 <input
                                    type="file"
                                    @change="getUpFileData" style="display:none;" id="file">
                                    <a-button type="primary"  style="margin-left: 8px" @click="clickfile">
                                        <a-icon type="upload"/>
                                        文件上传
                                    </a-button>
                                </input>
                            </a-col>
                        </a-row>
                    </div>
                    <div style="margin-top: 15px">
                        <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" class="fileTable"
                            :dataSource="dataSource" :pagination="searchFileTable" :loading="loading"
                            @change="handleTableChange">
                            <span slot="action" slot-scope="text, record">
                                <a @click="download(record,$event)">下载</a>&nbsp; <a @click="viewFile(record,$event)">预览</a>&nbsp; <a @click="DeleteFile(record,$event)">删除</a>
                            </span>
                        </a-table>
                    </div>
                </a-layout-content>
            </a-layout>
        </div>
        <a-modal v-model:open="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
            <a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
        </a-modal>
    </div>
</template>
<script>
import guaz from '@assets/guaz.png'
import {createDir,logicDelDir,renameDir,dirtreeList} from '@/api/dirapi'
import {downloadFile,filePreview,logicDeleteFile,pageList,uoloadFile} from '@/api/fileapi'
export default {
    name: "fileManage",
    data() {
        return {
            dirName:"",
            guaz,
            expandedKeys: [],
            selectedKeys: [],
            treeData: [
            ],
            isopen:false,
            columns: [
                {
                    title: "序号",
                    width: 70,
                    customRender: (text, record, index) => `${index + 1}`,
                },
                {
                    title: '文件名称',
                    align: "center",
                    dataIndex: 'fileName',
                    width: 120,
                    sorter: true
                },
                {
                    title: '文件后缀',
                    align: "center",
                    width: 100,
                    dataIndex: 'fileSuffix',
                },
                {
                    title: '文件大小',
                    align: "center",
                    width: 120,
                    dataIndex: 'fileSize'
                },

                {
                    title: '文件类型',
                    align: "center",
                    width: 80,
                    dataIndex: 'fileTypeName'
                },
                {
                    title: '创建人',
                    align: "center",
                    width: 100,
                    dataIndex: 'createByName'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: "center",
                    width: 170
                }

            ],
            /* 分页参数 */
            searchFileTable: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['5', '10', '20','50','100'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            dataSource: [],
            loading: false,
            selectedRowKeys: [],
            selectId:"0",
            modalTitle:"",
            modelType:"",
            searchFile:{
                "dirId":"",
                "queryCondition":"",
                "pageNum":"",
                "pageSize":"",
            },
        }
    },
    created() {
    },
    mounted() {
        this.getDirList();
	},
    computed: {
        uploadAction() {
            return window._CONFIG['domianURL'] + "/file/uoloadFile";
        },
    },
    methods: {
        clickfile(){
           document.getElementById("file").click();
        },
        getUpFileData(e){
            if(this.selectId == "0"){
                this.$message.warning("必须选择查询目录");
                return;
            }
            let formData = new FormData()
            const file = e.target.files[0];
            formData.append('dirId', this.selectId);
            formData.append('fileShare', false);
            formData.append("fileName",document.getElementById("file").files[0].name);
            formData.append("fileSuffix",'.'+(document.getElementById("file").files[0].name.split('.').slice(-1)[0]));
            formData.append("fileSize",(document.getElementById("file").files[0].size/1024).toFixed(2));
            formData.append("md5Value",Date.now());
            formData.append("shareTotal","0");
            formData.append("shareIndex","0");
            formData.append("currShareM5","0");
            formData.append("file",e.target.files[0]);
            uoloadFile(formData).then((res) => {
              if (res.success) {
                 this.searchgetFileList();
              }
              this.$message.warning(res.message);
            })
        },
        download(item){
            let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
            window.open(apiBaseUrl+"/file/downloadFile?fileId="+item.id);
        },
        viewFile(item){
            filePreview({fileId:item.id}).then((res) => {
                if (res.success) {
                    window.open("http://"+res.result,"_blank");
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        DeleteFile(item){
            var that = this;
            that.$confirm({
                title: "确认删除",
                content: "是否删除选中文件?",
                onOk: function () {
                    logicDeleteFile({id:item.id}).then((res) => {
                        that.$message.warning(res.message);
                        that.searchgetFileList();
                    });
                }
            });
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        handleTableChange() {

        },
        reloadFileList(){
            this.searchFile.queryCondition = "";
            this.searchFile.pageNum = 1;
            this.searchFile.pageSize = 10;
            this.getFileList();
        },
        searchgetFileList(){
            this.searchFile.dirId = this.selectId;
            this.searchFile.pageNum = this.searchFileTable.current;
            this.searchFile.pageSize = this.searchFileTable.pageSize;
            this.getFileList();
        },
        getFileList(){
            if(this.selectId == "0"){
                this.$message.warning("必须选择查询目录");
                return;
            }
            pageList(this.searchFile).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.rows
                    this.searchFileTable.total = res.result.total
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        hideModal(){
            this.isopen =false;
            switch(this.modelType) {
                case "create":
                    createDir({pid:this.selectId,dirName:this.dirName}).then((res) => {
                        if (res.success) {
                            this.treeData = res.result
                            this.getDirList();
                        } else {
                            this.$message.warning(res.message);
                        }
                    });
                    break;
                case "rename":
                     renameDir({id:this.selectId,dirName:this.dirName}).then((res) => {
                        if (res.success) {
                            this.treeData = res.result
                            this.getDirList();
                        } else {
                            this.$message.warning(res.message);
                        }
                    });
                    break;
            } 
        },
        getDirList(){
            dirtreeList({dirName:""}).then((res) => {
                if (res.success) {
                    this.treeData = res.result
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        menuClick(value){
            switch(value.key) {
                case "1":
                    this.createDir();
                    break;
                case "2":
                    this.renameDir();
                    break;
                case "3":
                    this.logicDelDir();
                    break;
            } 
        },
        createDir(){
            this.modalTitle = "添加节点";
            this.isopen =true;
            this.modelType = "create";
            this.dirName="";
        },
        logicDelDir(){
            var that = this;
            this.$confirm({
                title: "确认删除",
                content: "是否删除选中目录?",
                onOk: function () {
                    logicDelDir({id:that.selectId}).then((res) => {
                        that.$message.warning(res.message);
                        that.getDirList();
                    });
                }
            });
        },
        renameDir(){
            this.modalTitle = "重命名节点";
            this.isopen =true;
            this.modelType = "rename";
            this.dirName="";
        },
        changeSelect(selectedKeys,e){
            this.selectId = e.node.dataRef.id
            this.searchgetFileList();
        }
    }
}
</script>

<style scoped>
.pageBackground {
    background: #dee3ee;
    height: 100vh;
    font-size: 23px;
}

.breadHeader {
    height: 40px;
    background: #FFFFFF;
    line-height: 40px;
    font-size: 18px;
    color: #a3a8bb;
    padding: 0 100px;
    margin-bottom: 8px;
}
.menu{
    background: #ffffff !important;
}
.filecontent {
    height: calc(100vh - 48px);
    padding: 20px 30px;
    background: #FFFFFF;
}

.siderHeader {
    height: 50px;
    color: #212224;
    line-height: 50px;
    font-size: 20px;
    background: #ebf0ff;
    text-align: center;
}

.flodContent {
    height: calc(100vh - 230px);
    overflow-y: auto;
}

.main {
    width: 100%;
    height: 100px;
    /* position: absolute; */
}

.quarter-div {
    width: 15%;
    height: 100px;
    float: left;
    margin-right: 26px;
    background: #edf2ff;
    border: 1px solid #d3e5fd;
    border-radius: 10px;
}

/deep/ .ant-layout-sider {
    background: #f6f8ff !important;
    border: 1px solid #dfe4f3;
    border-radius: 10px;
    height: calc(100vh - 180px);
    min-width: 200px !important;
    margin-left: 0px;
    margin-right: 50px;
}
</style>