<template>
    <div class="flow_single">
        <div class="flow_single_title">
            {{ title }}
        </div>

        <!-- 实时值显示区域 -->
        <div class="value_area">
            <div class="value_label">实时值</div>
            <div class="value_content">
                <div class="value_display">
                    {{ sensorDataArr[0] || 0 }}
                </div>
                <div class="value_unit">{{ unit || '' }}</div>
            </div>
        </div>

        <!-- 设定值输入区域 -->
        <div class="set_value_area">
            <div class="set_value_label">设定值</div>
            <div class="set_value_content">
                <input class="set_value_input" v-model="setValue" @blur="handleSet" @keyup.enter="handleSet" />
                <div class="set_value_unit">{{ unit || '' }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getMainSetParam } from '@/api/hnyz/param'
import { setValues } from '@/api/dcs/flowControl';

const props = defineProps({
    title: String,
    dataArr: Array,
    code: String,
})

const unit = ref('')
const setValue = ref('')
const registerData = ref({})
const sensorDataArr = computed(() => props.dataArr || [3, 0]);

// 获取初始设置值和单位
onMounted(() => {
    if (props.code) {
        getMainSetParam(props.code)
            .then(res => {
                // 如果unitType是null、undefined或'none'，都赋值为空串
                unit.value = ['none', null, undefined].includes(res.data.unitType) ? '' : res.data.unitType;
                registerData.value = res.data
            })
            .catch(err => {
                console.error('获取设置值失败:', err)
            })
    }
})

// 提交设置值
const handleSet = () => {
    if (!props.code || setValue.value === '') return
    const data = {
        protocol: registerData.value.protocolId,                    // MODBUS_TCP 协议
        unitId: registerData.value.unitId,                      // 从站 ID
        dataType: registerData.value.dataType,                 // 数据类型
        offsetOrIndex: registerData.value.address,   // 起始地址
        lengthOrQos: 1,                // 数量
        data: [setValue.value],                 // 写入的值
        ipAddress: registerData.value.ipAddress,    // Modbus TCP 服务地址
        port: registerData.value.port                      // 端口
    }
    setValues(data)
}
</script>

<style lang="scss" scoped>
.flow_single {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #72e0ff;
    background: linear-gradient(to bottom, #0e1a2d, #11243e);

    .flow_single_title {
        padding: 4px 8px;
        text-align: center;
        color: #76e1ff;
        font-size: 18px;
        font-weight: bold;
        border-radius: 0px 0px 5px 5px;
        background: #192846;
    }

    .value_area,
    .set_value_area {
        display: flex;
        align-items: center;
        margin-top: 12px;
        padding: 0 4px;
    }

    .value_label,
    .set_value_label {
        font-size: 14px;
        margin-right: 8px;
        width: 50px;
        text-align: center;
        padding: 5px 0;
        background: #0e2b60;
        border-radius: 5px;
        color: #63c8c7;
    }

    .value_content,
    .set_value_content {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        gap: 8px;
    }

    .value_display {
        font-size: 22px;
        font-weight: bold;
        color: #3ecfff;
        padding: 6px 14px;
        border-radius: 6px;
        border: 1px solid #3ecfff;
        background: #0b1c2f;
        min-width: 100px;
        text-align: center;
    }

    .set_value_input {
        font-size: 22px;
        font-weight: bold;
        color: #3ecfff;
        padding: 6px 14px;
        border-radius: 6px;
        border: 1px solid #3ecfff;
        background: #0b1c2f;
        min-width: 100px;
        text-align: center;
        width: 100px;
    }

    .set_value_input:focus {
        outline: none;
        border-color: #76e1ff;
        box-shadow: 0 0 5px 1px rgba(118, 225, 255, 0.5);
    }

    .value_unit,
    .set_value_unit {
        font-size: 16px;
        color: #b8cee5;
        min-width: 20px;
        text-align: center;
    }
}
</style>