<div class="main" id="main" v-cloak>
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head">
        <tr>
            <td>
                <el-button size="mini" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{ids:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定移除吗？',success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)}})">移除</el-button>
            </td>
            <td align="right">
                <el-select size="mini" v-model="searchInfo.orderBy" placeholder="选择排序方式" clearable v-on:change="loadData">
                    <el-option value="thedate desc" label="按发布日期↓"></el-option>
                    <el-option value="thedate asc" label="按发布日期↑"></el-option>
                </el-select>
                <el-input size="mini" clearable style="width:150px;" placeholder="搜索关键词" v-model.trim="searchInfo.searchKeyword"></el-input>
                <el-button size="mini" v-on:click="loadData">搜索</el-button>
            </td>
        </tr>
    </table>
    <el-table :data="dataList" row-key="Id" tooltip-effect="dark" border highlight-current-row style="width: 100%" v-on:selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="40"> </el-table-column>
        <el-table-column header-align="center" label="标题" class-name="fa-eye-hover">
            <template slot-scope="scope">
                {{scope.row.title}}
                <a :href="'/e/preview/info?table=@(ViewBag.InfoTable)&id='+scope.row.tableDataId" target="_blank" title="预览"><span class="fa fa-eye"></span></a>
            </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间" prop="Thedate"></el-table-column>
        <el-table-column align="center" width="200" label="操作">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定移除吗？',success:function(){loadData()}})">移除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <ui-page-panel v-model="pageInfo" v-show="pageInfo.RecordCount>0" v-on:change="loadData"></ui-page-panel>
</div>
<script type="text/javascript">
        //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            searchInfo: { orderBy:"", searchField: "title", searchKeyword: "" },
            pageInfo: { PageSize: 15, CurrentPage: 1, PageCount: 0, RecordCount: 0 },
            selectList: [],
            dataList: [],
        },
        methods: {
            loadData: function () {
                loadData();
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            }
        }
    });

    //加载数据
    function loadData() {
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")?tagid=@ViewBag.TagId&tableId=@ViewBag.TableId",
            data: extend(vue.searchInfo, vue.pageInfo),
            success: function (responseData) {
                if (responseData.hasOwnProperty("Data")) {
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                }
            }
        });
    }
    loadData();
</script>
