@model string
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>登录锁定记录</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <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:{Username:getSelectedPropertys(selectList,'Username')},confirmMsg:'确定删除吗？',success:loadData,beforeExecute:function(){return checkSelectedItems(selectList)},})">
                    删除
                </el-button>
            </td>
            <td align="right">
                <el-select size="mini" v-model="queryData.searchField">
                    <el-option value="username" label="账号"></el-option>
                    <el-option value="ip" label="ip"></el-option>
                    <el-option value="thedate" label="登录时间" valuetype="date" searchtype="range"></el-option>
                    <el-option value="expireDate" label="过期时间" valuetype="expireDate" searchtype="range"></el-option>
                </el-select>
                <el-date-picker v-model="queryData.searchKeyword" v-if="queryData.searchField=='thedate' || queryData.searchField=='expireDate'"
                                type="daterange"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
                <el-input size="mini"v-model.trim="queryData.searchKeyword" style="width:225px;" v-else placeholder="输入关键词" clearable v-on:clear="loadData"></el-input>
                <el-button size="mini" v-on:click="loadData">确定</el-button>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" v-on:selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column label="账号" prop="Username"></el-table-column>
                <el-table-column prop="Ip" label="Ip" align="center"></el-table-column>
                <el-table-column prop="Thedate" label="锁定时间" align="center"></el-table-column>
                <el-table-column prop="ExpireDate" label="解锁时间" align="center"></el-table-column>
                <el-table-column label="管理" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{username:scope.row.Username},confirmMsg:'确定删除吗？',success:loadData})">删除</el-button>
                    </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>
</div>
<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            queryData: { searchField: "username", searchKeyword: "" },
            selectList: [],
        },
        methods: {
            loadData: function () {
                var serverData = '{"' + vue.queryData.searchField + '":"' + vue.queryData.searchKeyword + '"}';
                serverData = extend(vue.pageInfo, JSON.parse(serverData));
                vue.ajax({
                    url: "@Url.ActionUrl("PageListData")",
                    data: serverData,
                    success: function (responseData) {
                        vue.dataList = responseData.Data;
                        vue.pageInfo = responseData.PageInfo;
                    }
                });
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
        },
        watch: {
            "queryData.searchField": function (newName, oldName) {
                if (newName != oldName) {
                    this.queryData.searchKeyword = "";
                }
            }
        }
    });
    vue.loadData();
</script>
