<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tSysLogMysqlSearchForm" :model="tSysLogMysqlSearchForm" :rules="tSysLogMysqlSearchFormRules"
                     :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="tSysLogMysqlSearchForm.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="tSysLogMysqlRef" :options.sync="tSysLogMysqlOpt">
                <template #sql="slotProps">
                    <div class="ap-ellipse sql" @click="showSqlEvent(slotProps.rowData.fdSql)">{{ slotProps.rowData.fdSql }}</div>
                </template>
            </ap-table>
        </ap-main>

        <el-drawer title="慢SQL" :visible.sync="showSqlDialog" direction="rtl">
            <div v-html="currentSQL" style="background-color: rgb(249, 242, 244);color: #c7254e;"></div>
        </el-drawer>
    </ap-container>
</template>

<script>

export default {
    name: 'SysLogMysql',
    data() {
        let columns = [
            {
                prop: 'fdEndTime',
                label: '强制结束时间',
                align: "center",
                type: 'datePicker',
                datePickerFormat: 'yyyy-MM-dd HH:mm:ss',
                width: "150px",
                edit: false
            }, {
                prop: 'fdStartTime',
                label: 'SQL开始执行时间',
                align: "center",
                type: 'datePicker',
                datePickerFormat: 'yyyy-MM-dd HH:mm:ss',
                width: "150px",
                edit: false
            }, {
                prop: 'fdSql',
                label: 'SQL',
                type: "slot",
                slot: "sql",
                edit: false
            }, {
                prop: 'fdScript',
                label: '处理脚本',
                type: 'input',
                width: "180px",
                edit: false
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input'
            },
        ];
        let tableOpt = {
            title: "慢SQL处理日志",
            columns: columns,
            dataUrl: "/apm/TSysLogMysql/getTSysLogMysqlGridList",
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/TSysLogMysql/deleteTSysLogMysqlGridData",
            editPk: "fdId", //默认fdId
            saveUrl: "/apm/TSysLogMysql/saveTSysLogMysqlGridData",
            toolbarBtn: [{
                apButton: true, btnType: "primary", text: "Kill慢SQL", icon: "el-icon-top", onClick: () => {
                    return new Promise((resolve) => {
                        this.$request({
                            url: "/apm/TSysLogMysql/killSlowSQL",
                            method: "post",
                        }).then((res) => {
                            this.$message.success("清理完成");
                        }).finally(() => {
                            resolve();
                        });
                    });
                }
            }, "separator", "edit", "del", "refresh", "save"],
            initData: true, // 默认false
            params: () => {
                return {
                    likeStr: this.tSysLogMysqlSearchForm.likeStr
                }
            }
        };

        return {
            tSysLogMysqlOpt: tableOpt,
            tSysLogMysqlSearchForm: {
                likeStr: ""
            },
            tSysLogMysqlSearchFormRules: {
                // TODO 自定义rules
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            },
            currentSQL: "",
            showSqlDialog: false
        }
    },
    methods: {
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysLogMysqlSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysLogMysqlRef.refresh();
            });
        },
        showSqlEvent(sql) {
            this.showSqlDialog = true;
            this.currentSQL = sql;
        }
    }
}
</script>

<style scoped>
.sql {
    color: blue;
    text-decoration: underline;
}

.sql:hover {
    cursor: pointer;
}
</style>
