@{
    Layout = "~/Areas/Admin/Views/_LayoutFramePage.cshtml";
    ViewBag.CurrentMenuId = "#CustomRoute";
    ViewBag.MenuPath = "../Menu";
}
<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>

    <template>
        <el-tabs type="card" v-model="searchInfo.FileName" v-on:tab-click="loadData">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane :label="item.Remark" :name="item.Name" v-for="item in customRouteCategories"></el-tab-pane>
        </el-tabs>
    </template>
    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-tooltip effect="dark" content="添加自定义路由" placement="bottom-start">
                        <el-button size="small" v-on:click="openDrawer({title:'添加',url:'@Url.ActionUrl("Add")',width:'90%',height:'95%',target:'self'})">
                            添加
                        </el-button>
                    </el-tooltip>
                </td>
                <td align="right">
                    <el-input size="mini" style="width:150px;" placeholder="搜索备注关键词" clearable v-on:clear="loadData" v-model="searchInfo.Remark"></el-input>
                    <el-button size="mini" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>
    </div>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" border>
                <el-table-column label="备注" prop="Remark" :show-overflow-tooltip="true" align="left"></el-table-column>
                <el-table-column label="Url规则" :show-overflow-tooltip="true" prop="UrlConstraint" align="left"></el-table-column>
                <el-table-column label="模板文件" :show-overflow-tooltip="true" prop="ViewPath"></el-table-column>
                <el-table-column label="管理" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="el-button-group">
                            <el-button size="small" v-on:click="openDrawer({title:'修改',url:'@Url.ActionUrl("Edit")?formData=parent.vue.dataList['+scope.$index+']',width:'90%',target:'self'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:scope.row,confirmMsg:'确定删除吗？',success:loadData})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
    <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 = "/Templates/@(ViewBag.CurrentTemplateDirectory)";
    var loadUrl = "@Url.ActionUrl("PageListData")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            drawerConfig: { show: false, title: "", modal: true, url: "", loading: true, size: "94%" },
            dataList: [],
            pageInfo: { PageSize: 15, PageCount: 0, RecordCount: 0, CurrentPage: 1 },
            searchInfo: { SiteTemplateDirectory: rootPath, FileName:"all", Remark:"" },
            customRouteCategories: [],
        },
        created: function () {
            this.loadCategory()
        },
        methods: {
            loadData: function () {
                loadData();
            },
            loadCategory: function () {
                this.ajax({
                    url: "@Url.ActionUrl("ListData", "CustomRouteCategory")",
                    data: { path: rootPath },
                    success: function (data) {
                        if (Array.isArray(data)) {
                            vue.customRouteCategories = data;
                        }
                    }
                });
            },
        },
        watch: {
        }
    });
    //加载数据
    function loadData() {
        var serverData = extend(vue.searchInfo, vue.pageInfo);
        vue.ajax({
            url: loadUrl,
            data: serverData,
            success: function (data) {
                if (data != "") {
                    vue.dataList = data.Data;
                    vue.pageInfo = data.PageInfo;
                }
            }
        });
    }
    loadData();
</script>