<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tSysLogAccessSearchForm" :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="" class="layout-header-form-item" prop="logType">
                    <el-radio-group v-model="logType" @change="logTypeChangeEvent">
                        <el-radio :label="1" >Nginx</el-radio>
                        <el-radio :label="2" >Dao</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr" style="margin-left: 20px;">
                    <el-input v-model="likeStr" placeholder="路径"></el-input>
                </el-form-item>
                <el-form-item label="前缀:" class="layout-header-form-item" prop="fdPrefix">
                    <el-input v-model="fdPrefix" placeholder="前缀" style="width: 100px"></el-input>
                </el-form-item>
                <el-form-item label="区间:" class="layout-header-form-item">
                    <el-date-picker v-model="logDate" format="yyyy-MM-dd" value-format="timestamp" type="daterange" style="width: 250px"></el-date-picker>
                </el-form-item>
                <el-form-item label="平均用时大于:" class="layout-header-form-item">
                    <el-input-number v-model="averageTime" :controls="false" style="width: 50px"></el-input-number>
                </el-form-item>
                <el-form-item label="次数大于:" class="layout-header-form-item">
                    <el-input-number v-model="fdCount" :controls="false" style="width: 50px"></el-input-number>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
            <el-button v-if="logType == 1" type="primary" @click="initNginxLog" icon="el-icon-upload">刷新Nginx日志</el-button>
            <el-button v-if="logType == 2" type="primary" @click="initDaoLog" icon="el-icon-upload">刷新Dao日志</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tSysLogAccessRef" :options.sync="tSysLogAccessOpt"></ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysLogAnalysis',
    data() {
        let columns = [
            {
                prop: 'fdPrefix',
                label: '前缀',
                type: 'input',
                width: '45px',
            }, {
                prop: 'fdUrl',
                label: '路径',
                type: 'input',
                showOverflowTooltip: true,
            }, {
                prop: 'fdDate',
                label: '日期',
                type: 'datePicker',
                width: '80px',
                align: 'center',
                datePickerType: 'datetime',
                datePickerFormat: 'yyyy-MM-dd'
            }, {
                prop: 'fdTime',
                label: '总用时/s',
                type: 'input',
                width: '80px',
                align: 'right',
                sortable: true,
            }, {
                prop: 'averageTime',
                label: '平均/s',
                type: 'input',
                width: '70px',
                align: 'right',
                sortable: true,
            }, {
                prop: 'fdCount',
                label: '次数',
                type: 'input',
                width: '60px',
                align: 'right',
                sortable: true,
            }, {
                prop: 'fdH1',
                label: '1',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH2',
                label: '2',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH3',
                label: '3',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH4',
                label: '4',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH5',
                label: '5',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH6',
                label: '6',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH7',
                label: '7',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH8',
                label: '8',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH9',
                label: '9',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH10',
                label: '10',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH11',
                label: '11',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH12',
                label: '12',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH13',
                label: '13',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH14',
                label: '14',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH15',
                label: '15',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH16',
                label: '16',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH17',
                label: '17',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH18',
                label: '18',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH19',
                label: '19',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH20',
                label: '20',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH21',
                label: '21',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH22',
                label: '22',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH23',
                label: '23',
                width: 40,
                align: 'center',
                type: 'input'
            }, {
                prop: 'fdH24',
                label: '24',
                width: 40,
                align: 'center',
                type: 'input'
            },
        ];
        let tableOpt = {
            title: "访问日志",
            columns: columns,
            dataUrl: "/apm/sys/SysLogAnalysis/getSysLogAnalysisGridList",
            toolbarBtn: [],
            initData: true, // 默认false
            rowStyle: (param) => {
                if (param.rowIndex == 0) {
                    return {backgroundColor: '#dcdfe6'}
                }
            },
            params: () => {
                let startDate = new Date(this.logDate[0]);
                let endDate =  new Date(this.logDate[1]);
                return {
                    likeStr: this.likeStr,
                    fdPrefix: this.fdPrefix,
                    averageTime: this.averageTime,
                    fdCount: this.fdCount,
                    logType: this.logType,
                    startDate: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()).getTime(),
                    endDate: new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()).getTime(),
                }
            }
        };
        let startDate = new Date();
        startDate.setDate(startDate.getDate()-1);
        let endDate = new Date();
        endDate.setDate(endDate.getDate()-1);
        return {
            tSysLogAccessOpt: tableOpt,
            likeStr: "",
            logType: 2,
            fdPrefix: "",
            averageTime: "",
            fdCount: "",
            logDate: [startDate.getTime(), endDate.getTime()]
        }
    },
    methods: {
        // 查询
        searchEvent() {
            if (this.logDate == null || this.logDate.length < 2) {
                this.$message.error('请选择日期！');
                return;
            }
            this.$refs.tSysLogAccessRef.refresh();
        },
        logTypeChangeEvent(type) {
            if (type == 1) {
                this.$refs.tSysLogAccessRef.setTitle("Nginx 访问日志");
            }
            if (type == 2) {
                this.$refs.tSysLogAccessRef.setTitle("Dao 访问日志");
            }
        },
        initNginxLog() {
            this.$request({
                url: '/apm/sys/SysLogAnalysis/initNginxLog',
                method: 'post',
                data: {}
            }).then(response => {
                this.$message.success("Nginx 日志解析完成！");
            })
        },
        initDaoLog() {
            this.$request({
                url: '/apm/sys/SysLogAnalysis/initDaoLog',
                method: 'post',
                data: {}
            }).then(response => {
                this.$message.success("Dao 日志解析完成！");
            })
        }
    }
}
</script>

<style scoped>
</style>
