<template>
    <el-card>
        <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
            <el-row>
                <el-col :span="1"><br /></el-col>
                <el-col :span="9">
                    <el-form-item :label="$t('database.optimizationScheme')">
                        <el-select @change="changePlan" clearable v-model="plan">
                            <el-option
                                v-for="item in planOptions"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="1"><br /></el-col>
                <el-col :span="9">
                    <el-form-item label="key_buffer_size" prop="key_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.key_buffer_size">
                            <template #append>MB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="query_cache_size" prop="query_cache_size">
                        <el-input clearable v-model.number="mysqlVariables.query_cache_size">
                            <template #append>MB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="tmp_table_size" prop="tmp_table_size">
                        <el-input clearable v-model.number="mysqlVariables.tmp_table_size">
                            <template #append>MB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.tmpTableSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size">
                        <el-input clearable v-model.number="mysqlVariables.innodb_buffer_pool_size">
                            <template #append>MB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.innodbBufferPoolSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.innodb_log_buffer_size">
                            <template #append>MB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.innodbLogBufferSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="sort_buffer_size" prop="sort_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.sort_buffer_size">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.sortBufferSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="read_buffer_size" prop="read_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.read_buffer_size">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.readBufferSizeHelper') }}</span>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            icon="Collection"
                            @click="onSaveVariables(variableFormRef)"
                            type="primary"
                            size="default"
                        >
                            {{ $t('commons.button.save') }}
                        </el-button>
                        <el-button icon="RefreshLeft" size="default">
                            {{ $t('database.restart') }}
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2"><br /></el-col>
                <el-col :span="9">
                    <el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.read_rnd_buffer_size">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="join_buffer_size" prop="join_buffer_size">
                        <el-input clearable v-model.number="mysqlVariables.join_buffer_size">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="thread_stack" prop="thread_stack">
                        <el-input clearable v-model.number="mysqlVariables.thread_stack">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.threadStackelper') }}</span>
                    </el-form-item>
                    <el-form-item label="binlog_cache_size" prop="binlog_cache_size">
                        <el-input clearable v-model.number="mysqlVariables.binlog_cache_size">
                            <template #append>KB</template>
                        </el-input>
                        <span class="input-help">{{ $t('database.binlogCacheSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="thread_cache_size" prop="thread_cache_size">
                        <el-input clearable v-model.number="mysqlVariables.thread_cache_size" />
                        <span class="input-help">{{ $t('database.threadCacheSizeHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="table_open_cache" prop="table_open_cache">
                        <el-input clearable v-model.number="mysqlVariables.table_open_cache" />
                        <span class="input-help">{{ $t('database.tableOpenCacheHelper') }}</span>
                    </el-form-item>
                    <el-form-item label="max_connections" prop="max_connections">
                        <el-input clearable v-model.number="mysqlVariables.max_connections" />
                        <span class="input-help">{{ $t('database.maxConnectionsHelper') }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import { ElMessage, FormInstance } from 'element-plus';
import { Database } from '@/api/interface/database';
import { loadMysqlVariables, updateMysqlVariables } from '@/api/modules/database';
import i18n from '@/lang';
import { planOptions } from './../helper';

const plan = ref();

const variableFormRef = ref<FormInstance>();
const oldVariables = ref<Database.MysqlVariables>();
let mysqlVariables = reactive({
    mysqlName: '',
    key_buffer_size: 0,
    query_cache_size: 0,
    tmp_table_size: 0,
    innodb_buffer_pool_size: 0,
    innodb_log_buffer_size: 0,
    sort_buffer_size: 0,
    read_buffer_size: 0,
    read_rnd_buffer_size: 0,
    join_buffer_size: 0,
    thread_stack: 0,
    binlog_cache_size: 0,
    thread_cache_size: 0,
    table_open_cache: 0,
    max_connections: 0,

    slow_query_log: '',
    long_query_time: 0,
});
const variablesRules = reactive({
    key_buffer_size: [Rules.number],
    query_cache_size: [Rules.number],
    tmp_table_size: [Rules.number],
    innodb_buffer_pool_size: [Rules.number],
    innodb_log_buffer_size: [Rules.number],
    sort_buffer_size: [Rules.number],
    read_buffer_size: [Rules.number],
    read_rnd_buffer_size: [Rules.number],
    join_buffer_size: [Rules.number],
    thread_stack: [Rules.number],
    binlog_cache_size: [Rules.number],
    thread_cache_size: [Rules.number],
    table_open_cache: [Rules.number],
    max_connections: [Rules.number],

    slow_query_log: [Rules.requiredSelect],
    long_query_time: [Rules.number],
});

const mysqlName = ref();
interface DialogProps {
    mysqlName: string;
}
const acceptParams = (params: DialogProps): void => {
    console.log('adad');
    mysqlName.value = params.mysqlName;
    loadVariables();
};

const loadVariables = async () => {
    const res = await loadMysqlVariables(mysqlName.value);
    mysqlVariables.key_buffer_size = Number(res.data.key_buffer_size) / 1024 / 1024;
    mysqlVariables.query_cache_size = Number(res.data.query_cache_size) / 1024 / 1024;
    mysqlVariables.tmp_table_size = Number(res.data.tmp_table_size) / 1024 / 1024;
    mysqlVariables.innodb_buffer_pool_size = Number(res.data.innodb_buffer_pool_size) / 1024 / 1024;
    mysqlVariables.innodb_log_buffer_size = Number(res.data.innodb_log_buffer_size) / 1024 / 1024;

    mysqlVariables.sort_buffer_size = Number(res.data.sort_buffer_size) / 1024;
    mysqlVariables.read_buffer_size = Number(res.data.read_buffer_size) / 1024;
    mysqlVariables.read_rnd_buffer_size = Number(res.data.read_rnd_buffer_size) / 1024;
    mysqlVariables.join_buffer_size = Number(res.data.join_buffer_size) / 1024;
    mysqlVariables.thread_stack = Number(res.data.thread_stack) / 1024;
    mysqlVariables.binlog_cache_size = Number(res.data.binlog_cache_size) / 1024;
    mysqlVariables.thread_cache_size = Number(res.data.thread_cache_size);
    mysqlVariables.table_open_cache = Number(res.data.table_open_cache);
    mysqlVariables.max_connections = Number(res.data.max_connections);
    oldVariables.value = { ...mysqlVariables };
};

const changePlan = async () => {
    for (const item of planOptions) {
        if (item.id === plan.value) {
            mysqlVariables.key_buffer_size = item.data.key_buffer_size;
            mysqlVariables.query_cache_size = item.data.query_cache_size;
            mysqlVariables.tmp_table_size = item.data.tmp_table_size;
            mysqlVariables.innodb_buffer_pool_size = item.data.innodb_buffer_pool_size;

            mysqlVariables.sort_buffer_size = item.data.sort_buffer_size;
            mysqlVariables.read_buffer_size = item.data.read_buffer_size;
            mysqlVariables.read_rnd_buffer_size = item.data.read_rnd_buffer_size;
            mysqlVariables.join_buffer_size = item.data.join_buffer_size;
            mysqlVariables.thread_stack = item.data.thread_stack;
            mysqlVariables.binlog_cache_size = item.data.binlog_cache_size;
            mysqlVariables.thread_cache_size = item.data.thread_cache_size;
            mysqlVariables.table_open_cache = item.data.table_open_cache;
            mysqlVariables.max_connections = item.data.max_connections;
            break;
        }
    }
};
const onSaveVariables = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (!valid) return;
        let param = [] as Array<Database.VariablesUpdate>;
        if (oldVariables.value?.key_buffer_size !== mysqlVariables.key_buffer_size) {
            param.push({ param: 'key_buffer_size', value: mysqlVariables.key_buffer_size * 1024 * 1024 });
        }
        if (oldVariables.value?.query_cache_size !== mysqlVariables.query_cache_size) {
            param.push({ param: 'query_cache_size', value: mysqlVariables.query_cache_size * 1024 * 1024 });
        }
        if (oldVariables.value?.tmp_table_size !== mysqlVariables.tmp_table_size) {
            param.push({ param: 'tmp_table_size', value: mysqlVariables.tmp_table_size * 1024 * 1024 });
        }
        if (oldVariables.value?.innodb_buffer_pool_size !== mysqlVariables.innodb_buffer_pool_size) {
            param.push({
                param: 'innodb_buffer_pool_size',
                value: mysqlVariables.innodb_buffer_pool_size * 1024 * 1024,
            });
        }
        if (oldVariables.value?.innodb_log_buffer_size !== mysqlVariables.innodb_log_buffer_size) {
            param.push({ param: 'innodb_log_buffer_size', value: mysqlVariables.innodb_log_buffer_size * 1024 * 1024 });
        }

        if (oldVariables.value?.sort_buffer_size !== mysqlVariables.sort_buffer_size) {
            param.push({ param: 'sort_buffer_size', value: mysqlVariables.sort_buffer_size * 1024 });
        }
        if (oldVariables.value?.read_buffer_size !== mysqlVariables.read_buffer_size) {
            param.push({ param: 'read_buffer_size', value: mysqlVariables.read_buffer_size * 1024 });
        }
        if (oldVariables.value?.read_rnd_buffer_size !== mysqlVariables.read_rnd_buffer_size) {
            param.push({ param: 'read_rnd_buffer_size', value: mysqlVariables.read_rnd_buffer_size * 1024 });
        }
        if (oldVariables.value?.join_buffer_size !== mysqlVariables.join_buffer_size) {
            param.push({ param: 'join_buffer_size', value: mysqlVariables.join_buffer_size * 1024 });
        }
        if (oldVariables.value?.thread_stack !== mysqlVariables.thread_stack) {
            param.push({ param: 'thread_stack', value: mysqlVariables.thread_stack * 1024 });
        }
        if (oldVariables.value?.binlog_cache_size !== mysqlVariables.binlog_cache_size) {
            param.push({ param: 'binlog_cache_size', value: mysqlVariables.binlog_cache_size * 1024 });
        }
        if (oldVariables.value?.thread_cache_size !== mysqlVariables.thread_cache_size) {
            param.push({ param: 'thread_cache_size', value: mysqlVariables.thread_cache_size });
        }
        if (oldVariables.value?.table_open_cache !== mysqlVariables.table_open_cache) {
            param.push({ param: 'table_open_cache', value: mysqlVariables.table_open_cache });
        }
        if (oldVariables.value?.max_connections !== mysqlVariables.max_connections) {
            param.push({ param: 'max_connections', value: mysqlVariables.max_connections });
        }
        await updateMysqlVariables(mysqlName.value, param);
        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
    });
};

defineExpose({
    acceptParams,
});
</script>
