<template>
    <div class="container">
        <div class="header">
            <el-form label-width="120px" v-model="form">
                <div style="display: flex; padding:10px;">
                    <el-form-item v-model="form.templateList" label="系统模块名称：">
                        <el-input v-model="input" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item :model="form.templateForm" label="人员姓名：">
                        <el-input v-model="input"></el-input>
                    </el-form-item>
                    <el-form-item :model="form.templateForm" label="操作类型：">
                        <el-select v-model="value" placeholder="全部">
                            <el-option value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :model="form.templateForm" label="操作状态：">
                        <el-select v-model="value" placeholder="全部">
                            <el-option value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :model="form.templateForm" label="时间范围：">
                        <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <el-button style="padding: 5px;width: 80px;position: relative;left: 700px;">重置</el-button>
                <el-button
                    style="padding: 5px;width: 80px;position: relative;left: 700px;background-color: #409EFF;color: #FFF;">查询</el-button>
            </el-form>
        </div>
        <div class="content">
            <div>
                <el-button class="new_button">导出</el-button>
            </div>
            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column prop="logID" label="日志编号">
                </el-table-column>
                <el-table-column prop="systemTemplate" label="系统模块">
                </el-table-column>
                <el-table-column prop="operationType" label="操作类型">
                </el-table-column>
                <el-table-column prop="requestType" label="请求方式">
                </el-table-column>
                <el-table-column prop="operationPerson" label="操作人员">
                </el-table-column>
                <el-table-column prop="operationAddress" label="操作地址">
                </el-table-column>
                <el-table-column prop="operationAddress_desc" label="操作地点">
                </el-table-column>
                <el-table-column prop="operationStatus" label="操作状态">
                    <template slot-scope="scope">
                        <el-tag style="width: 60px; height: 30px;"
                            :type="scope.row.operationStatus == 'true' ? 'success' : 'danger' ">
                            {{ scope.row.operationStatus == 'true' ? '成功' : '失败' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="operationTime" label="操作时间">
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div>
                <checkbox class="checkbox" :total="total"></checkbox>
                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
            </div>
            <div class="bottom_button" v-show="show">
                <el-button class="delete" type="text">批量删除</el-button>
                <el-button class="disabled" type="text">批量激活</el-button>
                <el-button class="export" type="text">导出数据</el-button>
            </div>
            <page class="page"></page>
        </div>
    </div>
</template>

<script>
import checkbox from '@/components/Checkbox/index'
import page from '@/components/pagination/index'
export default {
    components: { checkbox, page },
    data() {
        return {
            total: 0,
            input: '',
            show: true,
            value1: '',
            form: {
            },
            tableData: [
                {
                    logID: '176',
                    systemTemplate: '用户登录',
                    operationType: '新增',
                    requestType: 'post',
                    operationPerson: '管理员',
                    operationAddress: '11.11.11.11',
                    operationAddress_desc: '内网IP',
                    operationStatus: 'true',
                    operationTime: '2023-01-01 00:00'
                },
                {
                    logID: '176',
                    systemTemplate: '用户登录',
                    operationType: '新增',
                    requestType: 'post',
                    operationPerson: '管理员',
                    operationAddress: '11.11.11.11',
                    operationAddress_desc: '内网IP',
                    operationStatus: 'true',
                    operationTime: '2023-01-01 00:00'
                },
                {
                    logID: '176',
                    systemTemplate: '用户登录',
                    operationType: '新增',
                    requestType: 'post',
                    operationPerson: '管理员',
                    operationAddress: '11.11.11.11',
                    operationAddress_desc: '内网IP',
                    operationStatus: 'false',
                    operationTime: '2023-01-01 00:00'
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.search.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    position: absolute;
    left: 218px;
    top: 150px;
    right: 16px;
    bottom: 20px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .header {
        margin: 2%;
        height: 100px;
        background-color: rgb(221, 220, 219);

        .el-form-item {
            margin-bottom: 0 !important;
        }
    }

    .content {
        width: 95%;
        position: absolute;
        margin-left: 2.5%;
        margin-right: 2.5%;

        .new_button {
            padding: 5px;
            width: 80px;
            position: relative;
            right: 760px;
            background-color: #409EFF;
            color: #FFF;
        }

        .el-table {
            margin-top: 10px;
        }

        .el-select {
            width: 80px;
            margin-right: 20px;
        }
    }

    .bottom {
        position: absolute;
        top: 700px;
        left: 50px;
        height: 50px;
        width: 95%;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;

        .checkbox {
            position: absolute;
            left: 29px;
            top: 15px;
            font-size: 14px;
        }

        .check-cancel {
            position: absolute;
            // line-height: 20px;
            font-size: 14px;
            text-align: center;
            left: 140px;
            top: 10px;
        }

        .bottom_button {
            position: absolute;
            left: 200px;
            margin-top: 15px;

            .delete {
                font-size: 14px;
                text-align: center;
                padding: 1px;
            }

            .disabled {
                font-size: 14px;
                text-align: center;
                padding: 1px;
            }

            .export {
                font-size: 14px;
                text-align: center;
                padding: 1px;
            }
        }
    }
}
</style>