<template>
    <div class="dcs">
        <HeaderComponent title="参数配置" :backTo="'/flowSelect'"></HeaderComponent>
        <el-card class="card">
            <!-- 表单区域 -->
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="120px" class="form">
                <div class="form_grid">
                    <el-form-item v-for="param in parameters" :key="param.key" :label="param.label" :prop="param.key">
                        <component :is="param.type === 'number' ? 'el-input-number' : 'el-input'"
                            v-model="formModel[param.key]" v-bind="param.attrs" style="width: 100%;" />
                    </el-form-item>
                </div>
            </el-form>

            <!-- 参数说明 -->
            <div class="description" v-if="hasDescriptions">
                <h3>参数说明</h3>
                <ul>
                    <template v-for="param in parameters" :key="param?.key">
                        <li v-if="param && param.description">
                            <strong>{{ param.label }}:</strong> {{ param.description }}
                        </li>
                    </template>

                </ul>
            </div>

            <!-- 按钮组 -->
            <div class="button_group">
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="submitForm">保存配置</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)// 表单引用
//表单模型
const formModel = reactive({
    temperatureThreshold: null,//温度阈值
    pressureLimit: null,//压力限制
    LB3Speed: null,
    LB6Speed: null,
})

//参数说明
const parameters = [
    {
        key: 'temperatureThreshold',
        label: '温度阈值 (℃)',
        type: 'number',
        attrs: { min: 0, max: 100, placeholder: '请输入温度阈值' },
        description: '当设备温度超过该值时触发报警',
    },
    {
        key: 'pressureLimit',
        label: '压力限制 (Pa)',
        type: 'number',
        attrs: { min: 0, max: 500, placeholder: '请输入压力限制' },
        description: '设备运行过程中允许的最大压力值',
    },
    {
        key: 'LB3Speed',
        label: 'LB3转速',
        type: 'number',
        attrs: { min: 1, max: 5000, placeholder: '请输入转速设置' },
        description: '默认转速设置, 单位rpm',
    },
    {
        key: 'LB6Speed',
        label: 'LB6转速',
        type: 'number',
        attrs: { min: 1, max: 5000, placeholder: '请输入转速设置' },
        description: '',
    },
]

const hasDescriptions = computed(() => parameters.some(p => p.description))//是否有参数说明

//表单验证规则
const formRules = {
    temperatureThreshold: [{ required: true, message: '请输入温度阈值', trigger: 'blur' }],
    pressureLimit: [{ required: true, message: '请输入压力限制', trigger: 'blur' }],
    LB3Speed: [{ required: true, message: '请输入转速设置', trigger: 'blur' }],
}

//重置表单
function resetForm() {
    formRef.value.resetFields()
}
//提交表单
function submitForm() {
    formRef.value.validate(valid => {
        if (valid) {
            console.log('提交的参数：', { ...formModel })
            ElMessage.success('参数已保存！')
        }
    })
}
</script>

<style lang="scss" scoped>
.dcs {
    width: 100%;
    height: 100%;
    min-width: fit-content;
    min-height: max-content;
    background-color: #141414;

    .card {
        margin: 20px auto;
        width: 100%;
        max-width: 1520px;
        padding: 30px;

        .title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 24px;
        }

        .form {
            .form_grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
                gap: 20px;
            }

        }

        .description {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px 20px;
            margin-top: 30px;

            h3 {
                font-size: 16px;
                margin-bottom: 10px;
            }

            ul {
                padding-left: 18px;

                li {
                    margin-bottom: 6px;
                    font-size: 14px;
                }
            }
        }

        .button_group {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 30px;
        }
    }
}
</style>