/**
井段数据分析
*/
<template>
    <el-container class="container">
        <!-- 左侧 Tab 区域 -->
        <el-aside width="320px" style="padding:0;margin: 0px;">
            <div class="apply-button-container" style="display: flex; margin-bottom: 5px;">
                <!-- <el-button type="success" @click="selectAll">全选</el-button>
            <el-button type="primary" @click="inverseAll">反选</el-button> -->
                <el-button v-show="activeTabName !== 'results'" type="success" @click="applyWellAndParam"
                    :icon="Check">应用</el-button>
                <el-button v-show="activeTabName == 'results'" type="danger" :disabled="!isDeleteEnabled"
                    @click="openDeleteDialog" :icon="Delete">删除</el-button>
            </div>
            <el-tabs type="border-card" :stretch="true" v-model="activeTabName" position="bottom"
                style="margin-top: 40px;padding: 0;">
                <el-tab-pane label="参数显示" name="params" style="margin: 0;padding: 0;">
                    <div class="scrollable-container">
                        <el-table ref="multipleParams" :data="paramData" @selection-change="updateSelectedParams"
                            style="width: 100%;margin: 0;padding: 0;">
                            <el-table-column type="selection" width="40"></el-table-column>
                            <el-table-column label="名称" prop="ParamName" width="160px"></el-table-column>
                            <el-table-column label="颜色" width="60">
                                <template v-slot="scope">
                                    <el-color-picker v-model="scope.row.Color"></el-color-picker>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="井显示" name="wells">
                    <div class="scrollable-container">
                        <el-table ref="multipleWell" :data="wellData" @selection-change="updateSelectedWells">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="JH" label="井号"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="结果列表" name="results">
                    <div class="scrollable-container">
                        <el-table ref="multipleResult" :data="resultList" @selection-change="updateSelectedResults"
                            @row-click="handleRowClick">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" label="结果名称"></el-table-column>
                            <el-table-column width="60" label="操作">
                                <template #default="scope">
                                    <el-tooltip content="打开" placement="top" @click="handleRowClick(scope.row)">
                                        <el-icon size="20" color='#409eff' style="cursor: pointer;">
                                            <Tickets />
                                        </el-icon>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-aside>

        <!-- 中间绘图区域 -->
        <el-main>
            <div class="chart-header">
                <el-dropdown @command="switchMode">
                    <el-button type="primary">
                        对比分析 <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <template v-slot:dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="wellRange">水平段对比分析</el-dropdown-item>
                            <el-dropdown-item command="paramRange">井对比分析</el-dropdown-item>
                            <el-dropdown-item command="well">单参数多井对比分析</el-dropdown-item>
                            <el-dropdown-item command="wellParamRange">单井多参数对比分析</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-dropdown v-if="selectedParamRows.length == 2" @command="switchMode" style="margin-left: 10px;">
                    <el-button type="primary">
                        交互分析 <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <template v-slot:dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="scatter">井交互分析</el-dropdown-item>
                            <el-dropdown-item command="scatterParamRange">水平段交互分析</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 动态显示的内容 -->
                <div v-if="!isScatterChartMode" style="display: inline-block; margin-left: 10px;">
                    <label for="data-type-select">{{ selectionLabel }}:</label>
                    <el-select v-model="selectedOption" placeholder="选择数据类型" style="margin-left: 10px; width: 150px;">
                        <el-option v-for="(value, key) in wellParamData" :key="key" :label="key"
                            :value="key"></el-option>
                    </el-select>
                </div>
                <el-button type="danger" v-if="isScatterChartMode" @click="reverseData"
                    style="margin-left: 10px;">反转数据</el-button>

                <!-- 保存和新建按钮 -->
                <el-button type="success" :disabled="!isUpdateEnabled" @click="openUpdataDialog"
                    style="float: right; margin-left: 10px;">保存</el-button>
                <el-button type="primary" @click="openSaveDialog" style="float: right;">新建</el-button>
            </div>


            <div class="chart-area">
                <ChartComponent :data="paramData" :title="chartTitle" :titleSize="titleSize"
                    :titlePosition="titlePosition" :showAxis="showAxis" :showYAxis="showYAxis" :barWidth="barWidth"
                    :yXAxisMaxValue="yXAxisMaxValue" :chartType="chartType" :chartNum='chartNum'
                    :wellParamData="convertListToDictionary(wellParamData, selectedOption)"
                    :reverseScatter='reverseScatter' />
                <TableComponent :tableData="convertListToDictionary(wellParamData, selectedOption)"
                    :chartNum='chartNum' />
            </div>

        </el-main>

        <!-- 保存名称的弹出框 -->
        <el-dialog title="新建结果" v-model="showSaveDialog" width="20%">
            <el-form>
                <el-form-item label="名称">
                    <el-input v-model="saveName" placeholder="请输入保存的名称"></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer>
                <span class="dialog-footer">
                    <el-button @click="closeSaveDialog">取消</el-button>
                    <el-button type="primary" @click="saveCurrentSettings">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除的弹出框 -->
        <el-dialog title="删除" v-model="showDeleteDialog" width="20%">
            <span>确认删除？</span>
            <template v-slot:footer>
                <span class="dialog-footer">
                    <el-button @click="closeDeleteDialog">取消</el-button>
                    <el-button type="primary" @click="deleteParamsResult">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 更新名称的弹出框 -->
        <el-dialog title="保存结果" v-model="showUpdataDialog" width="20%">
            <el-form>
                <el-form-item label="名称">
                    <el-input v-model="saveName" placeholder="请输入保存的名称"></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer>
                <span class="dialog-footer">
                    <el-button @click="closeUpdataDialog">取消</el-button>
                    <el-button type="primary" @click="saveCurrentSettings">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 右侧控制面板区域 -->
        <el-aside width="280px" style="padding: 0;overflow: hidden;margin: 0;display: flex;flex-direction: column;">
            <div class="setting-title">图表设置</div>
            <div class="settings-panel">
                <el-collapse v-model="activeSettings">
                    <!-- 标题设置 -->
                    <el-collapse-item title="标题设置" name="title">
                        <el-form-item label="图表标题"><el-input v-model="chartTitle"
                                placeholder="输入标题"></el-input></el-form-item>
                        <el-form-item label="标题大小"><el-input-number v-model="titleSize" :min="10"
                                :max="50" /></el-form-item>
                        <el-form-item label="标题位置">
                            <el-select v-model="titlePosition">
                                <el-option label="左" value="left"></el-option>
                                <el-option label="中" value="center"></el-option>
                                <el-option label="右" value="right"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-collapse-item>
                    <!-- 坐标轴设置 -->
                    <el-collapse-item title="坐标轴设置" name="axis">
                        <el-form-item label="显示横轴"><el-switch v-model="showAxis"></el-switch></el-form-item>
                        <el-form-item label="显示纵轴"><el-switch v-model="showYAxis"></el-switch></el-form-item>
                        <el-form-item label="纵坐标最大值"><el-input-number v-model="yXAxisMaxValue"
                                :min="0" /></el-form-item>
                    </el-collapse-item>
                    <!-- 样式设置 -->
                    <el-collapse-item v-if="!isScatterChartMode" title="样式设置" name="style"><el-form-item
                            label="柱宽"><el-input-number v-model="barWidth" :min="1" /></el-form-item></el-collapse-item>
                    <!-- 图表格式 -->
                    <el-collapse-item v-if="!isScatterChartMode" title="图表格式" name="format">
                        <el-select v-model="chartType" placeholder="选择图表类型">
                            <el-option label="柱状图" value="bar"></el-option>
                            <el-option label="折线图" value="line"></el-option>
                            <el-option label="饼图" value="pie"></el-option>
                            <el-option label="散点图" value="scatter"></el-option>
                        </el-select>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-aside>
    </el-container>
</template>
<script setup>
definePageMeta({
    requiresAuth: true
});
import { ref, onMounted } from 'vue';
import { Check, Delete } from "@element-plus/icons-vue";
import { fetchWellData, fetchParamData, fetchWellParamRangeChart, saveWellRangeParams, getAllResult, deleteResult, getCurrentParam } from '~/services/wellRangeService.ts';
import { ElLoading } from 'element-plus';

const activeTabName = ref("params");
const activeRightTabName = ref("chart-settings");
const chartTitle = ref("默认标题");
const titleSize = ref(20);
const titlePosition = ref("center");
const showAxis = ref(true);
const showYAxis = ref(true);
const selectedOption = ref("type1");
const wellParamData = reactive({});
const selectedWellRows = ref([]);
const selectedParamRows = ref([]);
const selectedResultRows = ref([]);
const barWidth = ref(20);
const yXAxisMaxValue = ref();
const reverseScatter = ref(false);
const activeSettings = ref(["title", "axis", "style", "format"]);
const chartType = ref("bar");
const selectionLabel = ref("参数选择");
const instance = getCurrentInstance();
const chartNum = ref(0);
const loading = ref(null); // 添加 loading 状态
const currentNodeId = ref(null);
const currentResultName = ref("");
const showSaveDialog = ref(false); // 控制弹出框显示
const showDeleteDialog = ref(false);
const showUpdataDialog = ref(false);
const saveName = ref(''); // 保存名称
const isScatterChartMode = ref(false);
const isDeleteEnabled = ref(false);
const isUpdateEnabled = ref(false);

const getRowStyle = ({ row }) => {
    const rowColor = row.Color || '#ffffff';
    return {
        backgroundColor: rowColor
    }
}

// 打开弹出框
const openSaveDialog = () => {
    const now = new Date();
    const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    saveName.value = `RESULT-${dateStr}`;  // 设置默认名称
    showSaveDialog.value = true;
};

// 关闭弹出框
const closeSaveDialog = () => {
    showSaveDialog.value = false;
};

const openUpdataDialog = () => {
    if (currentResultName.value == "") {
        const now = new Date();
        const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
        const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        saveName.value = `${dateStr} ${timeStr}`;  // 设置默认名称
    } else {
        saveName.value = currentResultName.value;
    }

    showUpdataDialog.value = true;
};

const closeUpdataDialog = () => {
    showUpdataDialog.value = false;
};

// 打开弹出框
const openDeleteDialog = () => {
    showDeleteDialog.value = true;
};

// 关闭弹出框
const closeDeleteDialog = () => {
    showDeleteDialog.value = false;
};

// 保存当前设置
const saveCurrentSettings = async () => {
    startLoading();
    try {
        if (!saveName.value) {
            return;  // 如果未输入保存名称，则不执行保存操作
        }

        const paramList = paramData.map(item => {
            const existsInList2 = selectedParamRows.value.some(otherItem => otherItem.ParamName === item.ParamName);
            return {
                ...item,
                Select: existsInList2
            };
        });
        const wellList = selectedWellRows.value;
        const chartTableParams = {
            Title: chartTitle.value,
            TitleSize: titleSize.value,
            TitlePosition: titlePosition.value,
            ShowXAxis: showAxis.value,
            ShowYAxis: showYAxis.value,
            YMaxSize: yXAxisMaxValue.value,
            ColumnWidth: barWidth.value,
            TableFormat: chartType.value
        };
        const params = {
            Name: saveName.value,
            ParameterXyzs: paramList,
            WellResponses: wellList,
            ChartTableParams: chartTableParams,
            CurrentNodeId: currentNodeId.value
        };
        currentNodeId.value = null;
        await saveWellRangeParams(params);
        await getResult();
        closeUpdataDialog();
        closeSaveDialog();
    } finally {
        stopLoading();
    }
};

const updateSelectedParams = (val) => selectedParamRows.value = val;
const updateSelectedWells = (val) => selectedWellRows.value = val;
const updateSelectedResults = (val) => {
    selectedResultRows.value = val;
    if (val.length > 0) {
        isDeleteEnabled.value = true;
    } else {
        isDeleteEnabled.value = false;
    }
};

const handleRowClick = async (val) => {
    startLoading();
    try {
        if (val.areaId) {
            isUpdateEnabled.value = true;
            currentNodeId.value = val.nodeId;
            currentResultName.value = val.name;
        }
        const response = await getCurrentParam(val.nodeId);
        if (response != null) {
            const rowChartTableParams = response.ChartTableParams;
            if (rowChartTableParams != null) {
                titlePosition.value = rowChartTableParams.TitlePosition;
                titleSize.value = rowChartTableParams.TitleSize;
                chartTitle.value = rowChartTableParams.Title;
                showAxis.value = rowChartTableParams.ShowXAxis;
                showYAxis.value = rowChartTableParams.ShowYAxis;
                yXAxisMaxValue.value = rowChartTableParams.YMaxSize;
                barWidth.value = rowChartTableParams.ColumnWidth;
                chartType.value = rowChartTableParams.TableFormat;
            }

            const rowWells = response.WellResponses.map(item => item.JH);
            wellData.forEach(row => {
                const isSelected = rowWells.includes(row.JH);
                instance.refs.multipleWell.toggleRowSelection(row, isSelected);
            })

            const paramListWells = response.ParameterXyzs;
            paramData.splice(0, paramData.length, ...paramListWells);
            paramData.forEach(row => {
                const paramRowData = paramListWells.find(item => item.ParamName == row.ParamName);
                instance.refs.multipleParams.toggleRowSelection(row, paramRowData != null ? paramRowData.Select : false);
            });

            getWellRangeChart();
        }
    } finally {
        stopLoading();
    }
};

const applyWellAndParam = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: chartNum.value
        };
        selectionLabel.value = "参数选择";
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

const startLoading = () => {
    loading.value = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
    });
};

const stopLoading = () => {
    if (loading.value) loading.value.close();
};

const selectAll = async () => {
    if (activeTabName.value == 'params') {
        selectAllRows(instance.refs.multipleParams, paramData);
    } else if (activeTabName.value == 'wells') {
        selectAllRows(instance.refs.multipleWell, wellData);
    } else {
        selectAllRows(instance.refs.multipleResult, resultList);
    }
};
const inverseAll = async () => {
    if (activeTabName.value == 'params') {
        inverseAllRows(instance.refs.multipleParams, paramData);
    } else if (activeTabName.value == 'wells') {
        inverseAllRows(instance.refs.multipleWell, wellData);
    } else {
        inverseAllRows(instance.refs.multipleResult, resultList);
    }
}

//按井段查看
const getWellRangeChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 0
        };
        chartNum.value = 0;
        selectionLabel.value = "参数选择";
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

//按参数段查看
const getParamRangeChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 1
        };
        chartNum.value = 1;
        selectionLabel.value = "井号选择";
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

//按井查看
const getWellChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 2
        };
        chartNum.value = 2;
        selectionLabel.value = "参数选择";
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

//按井参数查看
const getWellParamRangeChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 3
        };
        chartNum.value = 3;
        selectionLabel.value = "井号选择";
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

//按散点图查看
const getScatterChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 4
        };
        chartNum.value = 4;
        const response = await fetchWellParamRangeChart(wellParamRequest);
        if (response) {
            updateWellParamData(response);
        }
    } finally {
        stopLoading();
    }
};

//按散点图参数段查看
const getScatterRangeChart = async () => {
    startLoading();
    try {
        const wellParamRequest = {
            JH: selectedWellRows.value.map(row => row.JH),
            Param: selectedParamRows.value,
            ChartType: 1
        };
        chartNum.value = 5;
        const response = await fetchWellParamRangeChart(wellParamRequest);
        updateWellParamData(response);
    } finally {
        stopLoading();
    }
};

const deleteParamsResult = async () => {
    startLoading();
    try {
        currentNodeId.value = null;
        const nodeIds = selectedResultRows.value.map(item =>
            item.nodeId
        );
        await deleteResult(nodeIds);
        await getResult();
        closeDeleteDialog();
    } finally {
        stopLoading();
    }
};

const updateWellParamData = (data) => {
    Object.keys(wellParamData).forEach(key => {
        delete wellParamData[key];
    });
    Object.assign(wellParamData, data);
    selectedOption.value = Object.keys(wellParamData)[0] || null;
};

const updateView = (type, label) => {
    selectionLabel.value = label;
};

const wellData = reactive([]);
const paramData = reactive([]);
const resultList = reactive([]);

const getResult = async () => {
    const response = await getAllResult();
    console.log('结果：', response);
    const list = response.map(item => {
        return {
            name: item.NODE_NAME,
            areaId: item.AreaId,
            moduleId: item.ModuleID,
            nodeId: item.NODE_ID
        }
    });

    if (response.length > 0) {
        const rowVal = {
            nodeId: response[0].NODE_ID,
            name: response[0].NODE_NAME
        }
        handleRowClick(rowVal);
    }

    resultList.splice(0, resultList.length, ...list);
};

const getWells = async () => {
    const response = await fetchWellData();
    wellData.splice(0, wellData.length, ...response);
    // instance.refs.multipleWell.toggleRowSelection(wellData[3], true);
    selectWellRows(instance.refs.multipleWell, wellData);
};

const getParams = async () => {
    const response = await fetchParamData();
    paramData.splice(0, paramData.length, ...response);
    selectAllRows(instance.refs.multipleParams, paramData);
};

const selectWellRows = (tableRef, data) => {
    if (tableRef && data.length > 0) {
        data.forEach(row => {
            if (row.Check === true) {
                tableRef.toggleRowSelection(row, true);
            }
        });
    }
};

const selectAllRows = (tableRef, data) => {
    if (tableRef && data.length > 0) {
        data.forEach(row => tableRef.toggleRowSelection(row, true));
    }
};

const inverseAllRows = (tableRef, data) => {
    const selectRows = tableRef.getSelectionRows();
    if (tableRef && selectRows.length > 0) {
        selectRows.forEach(row => tableRef.toggleRowSelection(row, false));
    }
    const unSelectRows = data.filter(item => !selectRows.includes(item));
    if (tableRef && unSelectRows.length > 0) {
        unSelectRows.forEach(row => tableRef.toggleRowSelection(row, true));
    }
};

const convertListToDictionary = (dic, key) => {
    if (chartNum.value == 0) {
        const list = dic[key] || [];
        return list.reduce((acc, item) => {
            const key = item.JH; // 获取 JH 属性作为键
            if (!acc[key]) {
                acc[key] = []; // 初始化一个空数组
            }
            item.ParamName = selectedOption.value;
            acc[key].push(item); // 将当前 item 添加到对应的数组中
            return acc;
        }, {});
    } else if (chartNum.value == 1 || chartNum.value == 3) {
        const list = dic[key] || []
        return list.reduce((acc, item) => {
            const key = item.ParamName; // 获取 ParamName 属性作为键
            if (!acc[key]) {
                acc[key] = []; // 初始化一个空数组
            }
            acc[key].push(item); // 将当前 item 添加到对应的数组中
            return acc;
        }, {});
    } else if (chartNum.value == 2) {
        const list = dic[key] || []
        return list.reduce((acc, item) => {
            const key = item.JH; // 获取 ParamName 属性作为键
            if (!acc[key]) {
                acc[key] = []; // 初始化一个空数组
            }
            item.ParamName = selectedOption.value;
            acc[key].push(item); // 将当前 item 添加到对应的数组中
            return acc;
        }, {});
    } else { // (chartNum.value == 4 || chartNum.value == 5) 
        return dic;
    }
};

const switchMode = (mode) => {
    if (mode === 'scatter' || mode === 'scatterParamRange') {
        isScatterChartMode.value = true; // 切换到散点图模式
    } else {
        isScatterChartMode.value = false; // 切换到其他模式
    }

    // 根据按钮点击执行对应的操作
    if (mode === 'wellRange') {
        getWellRangeChart();
    } else if (mode === 'paramRange') {
        getParamRangeChart();
    } else if (mode === 'well') {
        getWellChart();
    } else if (mode === 'wellParamRange') {
        getWellParamRangeChart();
    } else if (mode === 'scatter') {
        getScatterChart();
    } else if (mode === 'scatterParamRange') {
        getScatterRangeChart();
    }
};

const reverseData = () => {
    reverseScatter.value = !reverseScatter.value;
}

onMounted(() => {
    getWells();
    getResult();
    getParams();
    getWellRangeChart();
});
</script>
<style scoped>
/* .el-container {
    background-color: white;
    color: black;
    min-height: 800px;
    height: calc(100vh - 80px);
} */

.el-aside,
.el-main {
    background-color: white;
    margin: 0;
    padding: 0;
}

.scrollable-container {
    /* height: calc(100vh - 190px); */
    overflow-y: auto;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0;
    /* padding: 0; */
    height: 100%;
}

.apply-button-container {
    display: inline;
    padding-left: 10px;
    position: fixed;
    z-index: 1000;
    width: 300px;
    height: 30px;
    background-color: white;
}

.chart-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebeef5;
}

.chart-area {
    border: 1px solid #ddd;
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.settings-panel {
    height: 100%;
    width: 98%;
    overflow-y: auto;
    padding: 0;
    margin-left: 5px;
    overflow-x: hidden;
}

.setting-title {
    color: #5399ff;
    justify-content: center;
    width: 100%;
    height: 30px;
    text-align: center;
}
</style>