<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">http缓存方案</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <table class="tb-head" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="btn-group">
                <el-tooltip effect="dark" content="添加缓存方案" placement="bottom-start">
                    <el-button size="small" v-on:click="openDrawer({title:'添加',url:'@Url.ActionUrl("Add")',width:'95%',height:'95%',target:'self'})">
                        添加
                    </el-button>
                </el-tooltip>
                <el-button style="margin-left:0px;" size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">
                    删除
                </el-button>
            </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="id" prop="Id" align="center"></el-table-column>
                <el-table-column label="缓存方案名称" prop="Name" align="center"></el-table-column>
                <el-table-column label="缓存时间(分钟)" align="center">
                    <el-table-column prop="ColumnCacheMinutes" align="center" label="栏目页"></el-table-column>
                    <el-table-column prop="DetailCacheMinutes" align="center" label="信息页"></el-table-column>
                </el-table-column>
                <el-table-column label="是否根据设备缓存" align="center">
                    <template slot-scope="scope">
                        <span v-show="scope.row.VaryByDevice==1">是</span>
                        <span v-show="scope.row.VaryByDevice!=1">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="缓存最大页码" prop="CacheMaxPage" align="center"></el-table-column>
                <el-table-column label="缓存排除关键词" prop="NocacheUrlKeywords" align="center"></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="openDrawer({title:scope.row.Name+'：编辑',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'90%',height:'90%',target:'self'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:loadData})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <ui-page-panel v-model="pageInfo" v-if="pageInfo.RecordCount>0" v-on:change="loadData()"></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">

    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            drawerConfig: { show: false, title: "", modal: true, url: "", loading: true, size: "94%" },
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            selectList: [],
            dataList: []
        },
        methods: {
            loadData: function (pageInfo) {
                loadData();
            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            }
        }
    });

        //加载数据
    function loadData()
    {
        var serverData = vue.pageInfo;
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")?_isload=1",
            data: serverData,
            success: function (responseData) {
                vue.dataList = responseData.Data;
                vue.pageInfo = responseData.PageInfo;
            }
        });
    }
    loadData();
</script>