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

        <!-- 当前模式显示区域 -->
        <div class="status_indicator_area">
            <div class="status_label">当前模式</div>
            <div class="status_values">
                <div class="status_value">
                    {{ getModeText(sensorDataArr[0]) }}
                </div>
                <div class="status_unit">{{ unit || '' }}</div>
            </div>
        </div>

        <!-- 模式设置区域 -->
        <div class="operation_area">
            <div class="operation_label">设置模式</div>
            <div class="operation_controls">
                <select class="mode_select" v-model="selectedMode" @change="handleSet">
                    <option :value="mode.value" v-for="mode in modes" :key="mode.value">
                        {{ mode.label }}
                    </option>
                </select>
                <div class="operation_unit">{{ unit || '' }}</div>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps({
    title: { type: String, default: '工作模式' },
    dataArr: { type: Array, default: () => [] },
    code: { type: String }
})

// 定义模式映射关系
const modes = [
    { value: 1, label: '工作模式' },
    { value: 2, label: '待机模式' },
    { value: 3, label: '维护模式' }
    // 可以根据需要添加更多模式
]

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

// 根据数值获取模式文本
const getModeText = (value) => {
    const mode = modes.find(m => m.value === Number(value))
    return mode ? mode.label : '未知模式'
}

// 获取初始设置值和单位
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
                
                // 初始化选中的模式为当前模式
                selectedMode.value = sensorDataArr.value[0] || modes[0].value
            })
            .catch(err => {
                console.error('获取设置值失败:', err)
            })
    }
})

// 提交设置值
const handleSet = () => {
    if (!props.code || !selectedMode.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: [Number(selectedMode.value)],                 // 写入的值
        ipAddress: registerData.value.ipAddress,    // Modbus TCP 服务地址
        port: registerData.value.port                      // 端口
    }
    
    setValues(data)
        .then(() => {
            // 可以添加设置成功的提示
            console.log('模式设置成功')
        })
        .catch(err => {
            console.error('模式设置失败:', err)
        })
}
</script>

<style scoped lang="scss">
.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;
    }

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

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

    .status_values {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
        flex: 1;
        justify-content: center;
    }

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

    .status_unit, .operation_unit {
        font-size: 16px;
        color: #b8cee5;
        width: 25px;
        text-align: center;
    }

    .operation_controls {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        justify-content: center;
        padding: 8px 0;
    }

    .mode_select {
        font-size: 20px;
        font-weight: bold;
        color: #3ecfff;
        padding: 6px 14px;
        border-radius: 6px;
        border: 1px solid #3ecfff;
        background: #0b1c2f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233ecfff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;
        min-width: 100px;
        text-align: center;
        appearance: none;
        cursor: pointer;
    }

    .mode_select:focus {
        outline: none;
        border-color: #76e1ff;
    }
}
</style>