<#-- since 2017-01-01-->
<div id="app" v-cloak>
    <el-card class="box-card">
        <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
            <el-form-item label="用户主键" prop="userId">
                <el-input v-model="vm.userId" clearable size="mini" placeholder="请输入用户主键"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="vm.userName" clearable size="mini" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="登录时间" prop="loginTime">
                <el-date-picker
                        size="mini"
                        v-model="vm.loginTime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="是否有效" prop="valid">
                <el-radio-group v-model="vm.valid" clearable size="mini">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="终端类型" prop="terminal">
                <el-select v-model="vm.terminal" clearable size="mini" filterable placeholder="请输入日志类型">
                    <el-option key="WEB" label="网页" value="WEB"></el-option>
                    <el-option key="API" label="终端" value="API"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card class="box-card data">
        <el-row>
            <el-col :span="12">
                <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
            </el-col>

            <el-col :span="12">
                <el-button-group style="float: right;">
                    <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
                        <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="Excel导入" placement="bottom">
                        <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="批量删除" placement="bottom">
                        <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="刷新" placement="bottom">
                        <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
                    </el-tooltip>
                </el-button-group>
            </el-col>
        </el-row>

        <el-table
                class="data"
                @selection-change="onSelectionChange"
                empty-text="无数据"
                :stripe="true"
                :data="result"
                size="mini">
            <el-table-column
                    align="center"
                    width="45"
                    type="selection">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="id"
                    label="主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="valid"
                    label="是否有效">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="userId"
                    label="用户主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="150"
                    prop="userName"
                    label="用户名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="loginTime"
                    label="登录时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="validTime"
                    label="有效时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="150"
                    prop="deptName"
                    label="部门名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="terminal"
                    label="终端类型">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" v-if="scope.row.terminal == 'WEB'">网页</el-tag>
                    <el-tag size="mini" effect="dark" v-if="scope.row.terminal == 'API'">终端</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="terminalIp"
                    label="终端地址">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="terminalInfo"
                    label="终端信息">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="120"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <wb-dropdown :arg="scope.row">
                        <wb-dropdown-item value="注销" icon="el-icon-edit" @click="onLogout"></wb-dropdown-item>
                    </wb-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPageChange"
                @size-change="onPageSizeChange"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </el-card>
</div>
<script>
    var app = new Vue({
        mixins: [mixin],
        el: "#app",
        data: {
            module: 'wsys',
            target: 'tokens',
            vm: {//条件及分页参数
                userId: null,
                userName: null,
                loginTime: null,
                validTime: null,
                valid: null,
                deptId: null,
                deptCode: null,
                deptName: null,
                terminal: null,
                terminalIp: null,
                terminalInfo: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey: 'CREATE_TIME',
                sortType: 'DESC'
            }
        },
        methods: {
            onLogout:function (item) {
                this.$confirm('将注销该用户的登录信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    new Ajax("wsys", "tokens").method("logout").post({token: item.token}, function (response) {
                        if (response.errors.length > 0) {
                            nav.e(response.errors[0].message);
                        } else {
                            nav.s("退出成功.");
                            this.onFind();
                        }
                    }.bind(this))
                }.bind(this)).catch(function (action) {

                });
            }
        },
        mounted: function () {
            this.onFind();
        },
    })
</script>
