<template>
    <div class="p-4">
        <div class="userLogin-header">
            <!-- <div class="userLogin-title">登录日志</div> -->
            <div class="handle-btns">
                <span class="label-item">操作类型：</span>
                <div class="select-item">
                    <a-select v-model:value="opt" :options="selectOpt" style="{width: 100%;}" placeholder="请选择">
                    </a-select>
                </div>
                <span class="label-item">查询时间：</span>
                <div class="input-item">
                    <a-range-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '结束时间']" v-model:value="searchDate" />
                </div>
            </div>
            <div class="handle-btns">
                <a-button class="btn" @click="resetForm">重置</a-button>
                <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
            </div>
        </div>
        <div class="userLogin-body">
            <BasicTable @register="registerTable" class="basic-table">
                <template #OPT="{ record }">
                    <span>{{ record.OPT==='login' ? '登录' : '退出' }}</span>
                </template>
                <template #ip="{ record }">
                    <span>{{ '192.168.1.1' }}</span>
                </template>
                <template #STATE="{ record }">
                    <div class="sf" style="display: flex;align-items: center;justify-content: center;">
                        <div v-if="!record.SFCG"
                            style="width: 8px;height: 8px;border-radius: 50%;background-color: #f8252c;"></div>
                        <div v-if="record.SFCG"
                            style="width: 8px;height: 8px;border-radius: 50%;background-color: #05b069;"></div>
                        <div style="margin-left: 10px;">{{ record.SFCG ? '成功' : '失败' }}</div>
                    </div>
                </template>
                <!-- <template #action="{ record }">
                    <TableAction :actions="[
                        {
                            label: '详情',
                            tooltip: '详情',
                            icon: 'ant-design:form-outlined',
                            onClick: openDialog.bind(null, record),
                        },
                    ]" />
                </template> -->
            </BasicTable>
        </div>
        <a-modal v-model:visible="ifShowDialog" centered title="日志详情" width="800px" :maskClosable="false" :footer="null">
            <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
                <a-form ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <!-- 名称 -->
                    <a-form-item label="记录id" name="ID">
                        <a-input v-model:value="formData.ID" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 编码 -->
                    <a-form-item label="用户名称" name="USERNAME">
                        <a-input v-model:value="formData.USERNAME" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="用户id" name="USERID">
                        <a-input v-model:value="formData.USERID" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="操作类型" name="OPT">
                        <a-input v-model:value="formData.OPT" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="操作说明" name="CZSM">
                        <a-input v-model:value="formData.CZSM" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="是否成功" name="SFCG">
                        <a-input v-model:value="formData.SFCG" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="创建时间" name="CJRQ">
                        <a-input v-model:value="formData.CJRQ" style="width: 100%" placeholder="根据名称生成" disabled />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';

// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';

import { getLoginList } from '/@/api/sys/log';
import { FormOutlined, RedoOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { Button, notification } from 'ant-design-vue';

export default defineComponent({
    name: 'userLogin',
    components: { FormOutlined, RedoOutlined, BasicTable, TableAction, Button },
    setup() {
        onMounted(() => {
            // getLoginData();
        });
        const data = reactive({
            tableData: [],//表格数据
            formData: {
                ID: "",
                USERNAME: "",
                USERID: "",
                OPT: "",
                CZSM: "",
                SFCG: 0,
                CJRQ: "",
            },
            drawerTitle: "日志记录详情",
            ifShowDialog: false
        });
        const selectOpt = ref([
            {
                label: '登录',
                value: 'login'
            },
            {
                label: '退出',
                value: 'logout'
            },
        ])
        const searchForm = reactive({
            opt: "login",//查询类型
            searchDate: [moment().subtract(30, 'days'), moment()],//查询时间
        })
        //获取所有日志
        const getLoginData = () => {
            return new Promise((resolve, reject) => {
                // data.tableData = []
                // selectOpt.value = []
                let param = {
                    page: 1,
                    rows: 10000000,
                    startCreateTimeStr: searchForm.searchDate[0].format('YYYY-MM-DD HH:mm:ss'),
                    endCreateTimeStr: searchForm.searchDate[1].format('YYYY-MM-DD HH:mm:ss'),
                    keyStr: searchForm.opt
                }
                getLoginList(param).then(res => {
                    if (res.resp_msg === "获取成功!") {
                        let resData = res.datas.records
                        let optArr = []
                        resData.forEach((item, index) => {
                            optArr.push(item.OPT)
                            // data.tableData.push({
                            //     key: item.ID,
                            //     ...item
                            // })
                        })
                        // let set1 = new Set(optArr)
                        // let newArr = [...set1]
                        // newArr.forEach(item => {
                        //     selectOpt.value.push({
                        //         value: item,
                        //         label: item
                        //     })
                        // })
                        // selectOpt.value.length && (searchForm.opt = selectOpt.value[0].value)
                        resolve(resData)
                    } else {
                        reject()
                    }
                })
            })

        }
        //表格列
        const columns = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'USERNAME',
                key: 'USERNAME'
            },
            {
                title: '操作类型',
                align: 'center',
                dataIndex: 'OPT',
                slots: {
                    customRender: 'OPT',
                }
            },
            // {
            //     title: '用户ID',
            //     align: 'center',
            //     dataIndex: 'USERID',
            //     key: 'USERID'
            // },
            {
                title: '操作IP',
                align: 'center',
                dataIndex: 'ip',
                slots: {
                    customRender: 'ip',
                }
            },
            // {
            //     title: '操作说明',
            //     align: 'center',
            //     dataIndex: 'CZSM',
            //     key: 'CZSM'
            // },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'CJRQ',
                key: 'CJRQ'
            },
            {
                title: '操作状态',
                align: 'center',
                dataIndex: 'SFCG',
                slots: {
                    customRender: 'STATE',
                }
            },
        ]
        //重置表格
        const resetForm = () => {
            // selectOpt.value.length && (searchForm.opt = selectOpt.value[0].value)
            searchForm.opt = selectOpt.value[0].value
            searchForm.searchDate = [moment().subtract(30, 'days'), moment()]
        }
        //表格查询功能
        const searchTable = () => {
            reload();
        }
        //打开详情弹窗
        const openDialog = (record) => {
            data.formData = { ...record }
            data.drawerTitle = '日志记录详情'
            data.ifShowDialog = true
        }

        const [registerTable, { reload }] = useTable({
            title: '登录日志列表',
            api: getLoginData,		 //数据
            columns: columns,        //表头配置
            bordered: false,
            striped: false,
            useSearchForm: false,     //开启搜索区域
            // formConfig: formConfig,  //搜索字段配置
            // actionColumn: {
            //     width: 120,
            //     title: '操作',
            //     dataIndex: 'action',
            //     slots: { customRender: 'action' },
            // },
            // rowSelection: { type: 'radio' },
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            canResize: true,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            indexColumnProps: { fixed: 'left' },
        });

        return {
            columns,
            selectOpt,
            ...toRefs(data),
            ...toRefs(searchForm),
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            // func
            registerTable,
            reload,
            getLoginData,
            resetForm,
            searchTable,
            openDialog
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

    .userLogin-header {
        padding: 10px;
        width: 100%;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .handle-btns {
            margin-right: 10px;
            display: flex;
            align-items: center;

            &:first-child {
                margin-left: 10px;
                margin-right: 0;
            }

            .label-item {
                width: 80px;
            }

            .select-item {
                width: 200px;
                // width: 130px;
                margin-right: 20px;

                .ant-select {
                    width: 100%;
                }
            }

            .input-item {
                width: 350px;
            }

            .btn {
                margin-left: 10px;
            }
        }
    }

    .userLogin-body {
        padding: 0 20px;
        margin-top: 20px;
        width: 100%;
        // height: 800px;
        height: calc(100% - 90px);
        background-color: #fff;

        .basic-table {
            height: 100%;

            ::v-deep .ant-table-title {
                padding: 0 !important;

                .vben-basic-title {
                    font-family: '阿里巴巴普惠体 2.0';
                    font-size: 16px;
                    font-weight: bold;
                    color: #333333;
                }

            }
        }

        .body-header {
            display: flex;
            height: 80px;
            width: 100%;
            justify-content: space-between;
            align-items: center;

            .item-title {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                user-select: none;
            }

            .table-btns {
                .btn {
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .body-content {
            padding-bottom: 20px;
            height: calc(100% - 80px);

            a {
                margin-right: 10px;
            }
        }
    }
}
</style>