<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tSysLogLoginSearchForm" :model="tSysLogLoginSearchForm"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="tSysLogLoginSearchForm.likeStr" placeholder="id/用户名/名称/ip地址/城市"
                              style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="日期:" class="layout-header-form-item">
                    <el-date-picker
                        v-model="dateArr"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tSysLogLoginRef" :options.sync="tSysLogLoginOpt"></ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysLogLogin',
    data() {
        let columns = [
            {
                prop: 'fdUserId',
                label: '用户id',
                type: 'input',
                width: '80px',
                showOverflowTooltip: true,
                edit: false
            }, {
                prop: 'fdUserName',
                label: '用户名',
                type: 'input',
                width: '100px',
                edit: false
            }, {
                prop: 'fdName',
                label: '名称',
                type: 'input',
                width: '100px',
                edit: false
            }, {
                prop: 'fdTime',
                label: '登录时间',
                type: 'datePicker',
                datePickerType: 'datetime',
                datePickerFormat: 'yyyy-MM-dd HH:mm:ss',
                width: '150px',
                // edit: false
            }, {
                prop: 'fdIp',
                label: 'ip地址',
                type: 'input',
                width: '120px',
                edit: false
            }, {
                prop: 'fdCountry',
                label: '国家',
                type: 'input',
                width: '120px',
                edit: false
            }, {
                prop: 'fdProvince',
                label: '省份',
                type: 'input',
                width: '120px',
                edit: false
            }, {
                prop: 'fdCity',
                label: '城市',
                type: 'input',
                width: '120px',
                edit: false
            }, {
                prop: 'fdIsp',
                label: '运营商',
                type: 'input',
                width: '120px',
                edit: false
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input'
            },
        ];
        let tableOpt = {
            title: "系统日志-登录",
            columns: columns,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apm/sys/TSysLogLogin/getTSysLogLoginGridList",
            saveUrl: "/apm/sys/TSysLogLogin/saveTSysLogLoginGridData",
            deleteUrl: "/apm/sys/TSysLogLogin/deleteTSysLogLoginGridData",
            toolbarBtn: [{
                btnType: "primary",
                text: "更新IP属地",
                icon: "el-icon-location-information",
                onClick: this.updateIpLocate
            }, "separator", "edit", "del", "cancel", "refresh", "save",],
            initData: true, // 默认false
            params: () => {
                let startTime;
                let endTime;
                if (this.dateArr.length == 2) {
                    startTime = this.dateArr[0].getTime();
                    endTime = this.dateArr[1].getTime();
                }
                return {
                    likeStr: this.tSysLogLoginSearchForm.likeStr,
                    startTime: startTime,
                    endTime: endTime,
                }
            }
        };
        return {
            dateArr: [],
            tSysLogLoginOpt: tableOpt,
            tSysLogLoginSearchForm: {
                likeStr: "",
            }
        }
    },
    methods: {
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysLogLoginSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysLogLoginRef.refresh();
            });
        },
        updateIpLocate() {
            this.$request({
                url: '/apm/sys/TSysLogLogin/updateIpLocate',
                method: 'post',
            }).then(response => {
                this.$message.success("更新完成");
                this.$refs.tSysLogLoginRef.refresh();
            })
        }
    }
}
</script>

<style scoped>
</style>
