<style>
    .el-dialog__wrapper{overflow: hidden;}
    .el-icon-folder-opened{font-size:14px;}
    .el-icon-upload {color: #999;display:none}
    .fa-eye-hover:hover .el-icon-upload{display:inline-block}
</style>
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i><a href="javascript:void(0)" onclick="location.href=location.href">文件管理</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{name:getSelectedPropertys(selectList,'Name'),type:getSelectedPropertys(selectList,'Type'),path:path.join('/'),siteId:'@ViewBag.CurrentSiteId'},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">
                        删除
                    </el-button>
                    <el-dropdown>
                        <el-button size="small">
                            功能菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="dialog({title:'新建文件',url:'@Url.ActionUrl("AddFile")',width:'500px',height:'220px',target:'self'})">新建文件</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="dialog({title:'新建目录',url:'@Url.ActionUrl("AddFolder")',width:'500px',height:'220px',target:'self'})">新建目录</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("Zip")', success:'loadData()',data:{name:getSelectedPropertys(selectList,'Name'),path:path.join('/'),siteId:'@ViewBag.CurrentSiteId'},confirmMsg:'确定压缩吗？',successMsg:'已经提交，请稍后查看',beforeExecute:function(){return checkSelectedItems(selectList)},})">打包压缩</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="dialog({title:'文件上传',url:'@Url.ActionUrl("Upload")?path='+rootPath,width:'700px',height:'400px',target:'self'})">上传文件</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </td>
                <td align="right">
                    <el-input size="mini" style="width:150px;" placeholder="搜索文件夹/文件名" v-model.trim="keyword" clearable v-on:clear="loadData"></el-input>
                    <el-button size="mini" onclick="loadData()">确定</el-button>
                </td>
            </tr>
        </table>
    </div>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered">
        <tr>
            <td>
                <span class="el-icon-folder-opened"> </span>
                <span v-for="(item,index) in fullPath">
                    <a href="javascript:void(0)" v-on:click="openPath(index)" class="text-primary"> {{item}} </a><span v-show="index>0">/</span>
                </span>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" highlight-current-row style="width: 100%" v-on:selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column label="名称" class-name="fa-eye-hover">
                    <template slot-scope="scope">
                        <span class="el-icon-folder-opened" v-show="scope.row.Type==0" v-on:click="openFolder(scope.row.Name)"><span style="color:#666;cursor:pointer;"> {{scope.row.Name}}</span></span>
                        <span class="el-icon-document" v-show="scope.row.Type==1"><a :href="preview(scope.row.Name)" target="_blank" title="预览">{{scope.row.Name}}</a></span>
                        <a href="javascript:void(0)" class="sp_extract text-info" v-show="scope.row.Name.toLowerCase().lastIndexOf('.zip')>0" v-on:click="submit({url:'@Url.ActionUrl("Extract")',success:function(){loadData()},data:{name:scope.row.Name,path:path.join('/'),siteId:'@ViewBag.CurrentSiteId'},confirmMsg:'解压后将覆盖同名文件，是否确定解压？',successMsg:'已经提交解压，请稍后查看'})">[解压]</a>
                        <a href="javascript:void(0)" v-on:click="replaceFile(scope.row.Name)" title="替换"><span class="el-icon-upload" v-show="scope.row.Type==1"></span></a>

                    </template>
                </el-table-column>
                <el-table-column label="创建日期" prop="CreationTime" align="center"></el-table-column>
                <el-table-column label="修改日期" prop="LastWriteTime" align="center"></el-table-column>
                <el-table-column label="文件大小" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Type==1">{{scope.row.FileLength}}kb</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理" align="center">
                    <template slot-scope="scope">
                        <div class="el-button-group">
                            <el-button size="mini" v-on:click="dialog({title:'改名',url:'@Url.ActionUrl("ReName")?name='+encodeURIComponent(scope.row.Name)+'&path='+pathString+'&type='+scope.row.Type,target:'self',width:'550px',height:'320px'})">改名</el-button>
                            <el-button size="mini" v-on:click="openDrawer({title:'文件编辑',url:'@Url.ActionUrl("Edit")?name='+encodeURIComponent(scope.row.Name)+'&path='+pathString,target:'self'})" :disabled="scope.row.Type==0">编辑</el-button>
                            <el-button size="mini" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{siteId:siteId,name:scope.row.Name,type:scope.row.Type,path:path.join('/')},confirmMsg:'确定删除'+scope.row.Name+'吗？',success:loadData})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="help-block"><i class="el-icon-warning"></i>  点击名称前的文件夹图标可进入对应的下级目录</div>
    </div>
    <el-drawer :style="{display:(drawerConfig.show?'block':'none')}" :modal="drawerConfig.modal"  :title="drawerConfig.title" v-on:close="drawerConfig.url=''" v-on:opened="openDrawerCallBack" :visible.sync="drawerConfig.show" :with-header="true" :size="drawerConfig.size">
        <div style="width:100%;height:100%;overflow:hidden;" v-loading="drawerConfig.loading">
            <iframe ref="drawerIframe" :src="drawerConfig.url" style="width:100%;height:100%" scrolling="auto" frameborder="0"></iframe>
        </div>
    </el-drawer>
</div>

<script type="text/javascript">
    var rootPath = "/";
    if (rootPath == "/") {
        rootPath = "/Templates/@(ViewBag.CurrentTemplateDirectory)/";
    }
    var loadUrl = "@Url.ActionUrl("ListData", "TemplateManager")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            drawerConfig: { show: false, title: "", modal: true, url: "", loading: true, size: "94%" },
            siteId: "@ViewBag.CurrentSiteId",
            dataList: [],
            path: [],
            selectList: [],
            rootPath: rootPath,
            keyword: "",
        },
        methods: {
            openFolder: function (name) {
                this.keyword = "";
                this.path.push(name);
            },
            openPath: function (index) {
                this.keyword = "";
                this.path.splice(index, this.path.length - index);
            },
            replaceFile: function (name) {
                this.dialog(
                    {
                        title: '文件替换',
                        url: '@Url.ActionUrl("Upload")?path=' + rootPath + '&name=' + urlEncode(name)+'&replace=1',
                        width: '700px',
                        height: '400px',
                        target: 'self'
                    }
                );
            },
            preview: function (name) {
                var fullPath = "";
                if (this.path.length == 0) {
                    fullPath = rootPath + name;

                } else {
                    fullPath = rootPath + this.path.join("/") + "/" + name;
                }
                return fullPath;
            },
            loadData: function () {
                loadData();
            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            }

        },
        computed: {
            fullPath: function () {
                var fullPath = JSON.parse(JSON.stringify(this.path)); //避免直接引用，会同时触发path的改变
                fullPath.unshift(rootPath);
                return fullPath;
            },
            pathString: function () {
                return encodeURIComponent(this.path.join("/"));
            }
        },
        watch: {
            path: {
                handler: function(newName, oldName) {
                    loadData();
                },
                immediate: false
            }
        }
    });
    var uploadConfigData = { fileType: "files", fileNumLimit: "0", fileSizeLimit: "0", fileSingleSizeLimit: "0", extensions: "*", mimeTypes: "*/*", tableName: "", fieldName: "", watermark: false, thumbnail: false, thumbnailWidth: "200", thumbnailHeight: "200", sortByDate: false, sortByFileType: false, rename: false, savePath: "/", saveFileName: "", deleteRepeat: true, saveToAttachmentData: false, callback: function () { loadData() }, guid: "" };
    //加载数据
    function loadData() {
        var currentPath = vue.path.join("/");
        var keyword = vue.keyword;
        uploadConfigData.savePath = "/" + currentPath;
        vue.ajax({
            url: loadUrl,
            data: { path: currentPath, keyword: keyword },
            success: function (data) {
                if (Array.isArray(data)) {
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();
</script>