<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">
        <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{name:getSelectedPropertys(selectList,'Name'),type:getSelectedPropertys(selectList,'Type')},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="submit({url:'@Url.ActionUrl("SqlBackup")', success:'loadData()',successMsg:'备份成功'})">备份数据库</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("ClearSqlLog")', success:'loadData()',confirmMsg:'清理日志前，建议先备份数据库？',successMsg:'清理完毕!'})">清理日志</a></el-dropdown-item>
                <el-dropdown-item class="divider"></el-dropdown-item>
                <el-dropdown-item><a href="javascript:void(0)" v-on:click="dialog({title:'运行Sql',url:'@Url.ActionUrl("RunSql")',width:'80%',height:'80%',target:'self'})">运行Sql命令</a></el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <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="备份文件" prop="Name" align="center"></el-table-column>
                <el-table-column label="备份日期" prop="CreationTime" align="center"></el-table-column>
                <el-table-column label="文件大小" prop="CreationTime" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.FileLength}}kb</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理" align="center">
                    <template slot-scope="scope">
                        <div class="el-button-group">
                            <el-button size="small" v-on:click="Open(scope.row.Name)">下载</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{name:scope.row.Name,type:scope.row.Type},confirmMsg:'确定删除吗？',success:loadData})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>

<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            selectList: [],
        },
        methods: {
            loadData: function () {
                loadData();
            },
            Open: function (thisPath) {
                var currentPath = "@ViewBag.RootPath";
                if (currentPath != "") {
                    thisPath = currentPath + "/" + thisPath;
                }
                window.open("@Url.ActionUrl("DownFile")?path=" + thisPath, "_target");
            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            }
        },
        computed: {
        },
        watch: {
        }
    });
    //加载数据
    function loadData() {
        ajax({
            url: "@Url.ActionUrl("ListData")",
            success: function (data) {
                if (Array.isArray(data)) {
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();

</script>