<template>
    <!-- 阀门组件 -->
    <div class="flow_single">
        <div class="flow_single_title">
            {{ formatTitle(title) }}
        </div>

        <!-- 状态指示灯区域 -->
        <div class="status_indicator_area">
            <div class="status_label">状态</div>
            <div class="status_indicators">
                <!-- 绿色灯（打开） -->
                <div class="indicator green" :class="{ active: valveStatus === 'open' }"></div>
                <!-- 红色灯（关闭） -->
                <div class="indicator red" :class="{ active: valveStatus === 'close' }"></div>
                <!-- 黄色灯（过渡/异常） -->
                <div class="indicator yellow" :class="{ active: valveStatus === 'transition' }"></div>
            </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="operation_area">
            <div class="operation_label">操作</div>
            <div class="operation_buttons">
                <el-button type="success" size="small" @click="setValve(true)" :disabled="valveStatus === 'open'">
                    开
                </el-button>
                <el-button type="danger" size="small" @click="setValve(false)" :disabled="valveStatus === 'close'">
                    关
                </el-button>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps({
    title: { type: String, required: true },
    dataArr: { type: Array, default: () => [] },
    code: { type: String }
})

// 处理标题显示逻辑的方法
const formatTitle = (title) => {
    if (!title) return '';

    // 分割标题为前缀和后缀
    const [prefix, suffix] = title.split('-');

    // 如果没有分隔符，直接添加"阀门"前缀
    if (suffix === undefined) {
        return `阀门${title}`;
    }

    // 如果前缀是null或空，使用"阀门-后缀"
    if (prefix === 'null' || !prefix.trim()) {
        return `阀门-${suffix}`;
    }

    // 其他情况保持原标题
    return title;
}

// 阀门状态计算
const valveStatus = computed(() => {
    if (!props.dataArr || props.dataArr.length === 0) return 'close'
    if (props.dataArr.length === 1) {
        return props.dataArr[0] ? 'open' : 'close'
    }
    if (props.dataArr[0]) return 'open'
    if (props.dataArr[1]) return 'close'
    return 'transition'
})

// 控制阀门
function setValve(open) {
    getMainSetParam(props.code)
        .then(res => {
            const registerData = res.data
            const data = {
                protocol: registerData.protocolId,
                unitId: registerData.unitId,
                dataType: registerData.dataType,
                resource: '05',
                offsetOrIndex: registerData.address,
                lengthOrQos: 1,
                data: [open],
                ipAddress: registerData.ipAddress,
                port: registerData.port
            }
            setValues(data)
        })
        .catch(err => {
            console.log('获取设备参数失败：', 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: 50px;
        text-align: center;
        padding: 5px 0;
        background: #0e2b60;
        border-radius: 5px;
        color: #63c8c7;
    }

    .status_indicators {
        display: flex;
        gap: 12px;
        padding: 8px 0;
        flex: 1;
        justify-content: center;
    }

    .indicator {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        opacity: 0.3;
        transition: all 0.3s ease;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .indicator.active {
        opacity: 1;
        box-shadow: 0 0 10px 2px currentColor;
    }

    .green {
        background-color: #4cd964;
        color: #4cd964;
    }

    .yellow {
        background-color: #ffcc00;
        color: #ffcc00;
    }

    .red {
        background-color: #ff3b30;
        color: #ff3b30;
    }

    .operation_buttons {
        display: flex;
        gap: 8px;
        flex: 1;
        justify-content: center;
    }
}
</style>
