<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tSysLogSqlSearchForm" :model="tSysLogSqlSearchForm" :rules="tSysLogSqlSearchFormRules"
                     :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="tSysLogSqlSearchForm.likeStr" placeholder="请输入SQL搜索值"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tSysLogSqlRef" :options.sync="tSysLogSqlOpt"></ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysLogSql',
    data() {
        let columns = [
            {
                prop: 'fdDate',
                label: '日期',
                type: 'datePicker',
                datePickerType: 'date',
                datePickerFormat: 'yyyy-MM-dd',
                align: 'center',
                width: 80
            },{
                prop: 'ct',
                label: '计数',
                type: 'input',
                width: 50,
                align: 'right',
                help: '当日SQL执行次数'
            },{
                prop: 'fdStartTime',
                label: '开始时间',
                type: 'datePicker',
                datePickerType: 'datetime',
                datePickerFormat: 'HH:mm:ss',
                align: 'center',
                width: 80
            }, {
                prop: 'fdEndTime',
                label: '结束时间',
                type: 'datePicker',
                datePickerType: 'datetime',
                datePickerFormat: 'HH:mm:ss',
                align: 'center',
                width: 80
            }, {
                prop: 'fdQueryTime',
                label: '耗时/s',
                type: 'input',
                width: 60,
                align: 'right',
                html: function (value, row) {
                    return Math.round(value);
                }
            }, {
                prop: 'fdLockTime',
                label: '锁定时间/s',
                type: 'input',
                align: 'right',
                width: 80,
            }, {
                prop: 'fdRowsSend',
                label: '返回行',
                type: 'input',
                align: 'right',
                width: 70,
            }, {
                prop: 'fdRowsExamine',
                label: '检查行',
                type: 'input',
                align: 'right',
                width: 70,
            }, {
                prop: 'fdSql',
                label: 'SQL语句',
                type: 'input',
                showOverflowTooltip: true
            }
        ];
        let tableOpt = {
            title: "慢SQL日志",
            columns: columns,
            dataUrl: "/apm/dev/TSysLogSql/getTSysLogSqlGridList",
            toolbarBtn: [{
                btnType: "primary", text: "加载慢SQL文件", icon: "el-icon-download", onClick: () => {
                    this.initSQLData()
                },
            },{
                btnType: "danger", text: "清空慢SQL文件", icon: "el-icon-trash-o", onClick: () => {
                    this.clearSQLFile()
                },
            }, "separator", "refresh"],
            initData: true, // 默认false
            cellClickEvent: (row, column, cell, event) => {
                if (column.property != "fdSql") {
                    return;
                }
                let copyStr = cell.textContent;
                if (copyStr == undefined || copyStr == null || copyStr == "") {
                    return;
                }
                let ipt = document.createElement("input");
                ipt.setAttribute("value", copyStr);
                document.body.appendChild(ipt);
                ipt.select();
                document.execCommand("copy");
                document.body.removeChild(ipt);
                this.$message.success('复制成功!')
            },
            params: () => {
                return {
                    likeStr: this.tSysLogSqlSearchForm.likeStr
                }
            }
        };
        return {
            tSysLogSqlOpt: tableOpt,
            tSysLogSqlSearchForm: {
                likeStr: ""
            },
            tSysLogSqlSearchFormRules: {
                likeStr: [{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}]
            }
        }
    },
    methods: {
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysLogSqlSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysLogSqlRef.refresh();
            });
        },
        initSQLData() {
            this.$request({
                url: '/apm/dev/TSysLogSql/initSQLData',
                method: 'post',
                data: {}
            }).then(response => {
                this.$message.success("加载慢SQL成功(ap-slow.log)！");
            })
        },
        clearSQLFile() {
            this.$confirm(`该操作会清空服务器的慢SQL日志文件，确定要清空？`, '提示', {
                confirmButtonText: '清空',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apm/dev/TSysLogSql/clearSQLFile',
                    method: 'post',
                    data: {}
                }).then(response => {
                    this.$message.success("日志文件已清空！");
                })
            });
        }

    }
}
</script>

<style scoped>
</style>
