<template>
    <!-- 阀门组件 -->
    <div class="flow_single">
        <div class="flow_single_title">{{ title }}</div>
        <div class="flow_single_body">
            <div class="body_show">
                <i class="icon iconfont icon-waterValve valve">
                    <div class="pointer" :class="pointerClass"></div>
                </i>
            </div>
        </div>
        <div class="flow_single_btn">
            <el-button type="primary" @click="clickValves" v-if="!valveArr[0]">
                开
            </el-button>
            <el-button type="primary" @click="clickValves" v-else>
                关
            </el-button>
        </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
    },
    valveArr: {//阀门数组
        type: Array,
    },
    code: {//设备标识
        type: String,
    },
})


// 计算 pointer 的 class
const pointerClass = computed(() => {
    //未传阀门状态数组时，默认为关状态
    if (props.valveArr.length === 0) {
        return 'pointer_close'
    }
    // 未传入阀门信号状态时，该阀门为N阀门
    if (props.valveArr.length === 1) {
        // console.log('未传入阀门信号状态')
        return props.valveArr[0] ? 'pointer_open' : 'pointer_close'
    }
    // 传入阀门信号状态时，该阀门为D阀门，根据信号状态判断指针样式
    if (props.valveArr[0]) {
        return 'pointer_open'
    } else {
        if (props.valveArr[1]) {
            return 'pointer_close'
        } else {
            return props.valveArr[2] ? 'pointer_to_open' : 'pointer_to_close'
        }
    }
})

function clickValves() {
    getMainSetParam(props.code).then(res => {
        const registerData = res.data
        const data = {
            protocol: registerData.protocolId,                    // MODBUS_TCP 协议
            unitId: registerData.unitId,                      // 从站 ID
            dataType: registerData.dataType,                 // 1 表示布尔型
            resource: '05',                  // 功能码，05 是写单个线圈
            offsetOrIndex: registerData.address,   // 起始地址
            lengthOrQos: 1,                // 数量
            data: [!props.valveArr[0]],                 // 写入的值，例如 [true]
            ipAddress: registerData.ipAddress,    // 你的 Modbus TCP 服务地址
            port: registerData.port                      // 默认端口
        }
        setValues(data)
    }).catch(err => {
        console.log('获取设备参数失败：', err);
    });
}


</script>


<style scoped lang="scss">
.flow_single {
    min-width: 100px;
    width: fit-content;
    display: flex;
    padding: 4px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #72E0FF;

    .flow_single_title {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        // color: aliceblue;
        color: #76E1FF;
        font-size: 18px;
        font-weight: bold;
        border-radius: 0px 0px 5px 5px;
        background: #192846;
    }

    .flow_single_body {
        display: flex;
        color: aliceblue;
        align-items: center;
        // justify-content: space-between;
        justify-content: center;
        width: -webkit-fill-available;

        .body_name {
            min-width: 90px;
            color: #008BB1;
            font-family: OPPOSans;
            font-size: 17px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-left: 10px;
        }

        .body_show {
            display: flex;
            align-items: center;
            // margin-right: 45px;
            gap: 5px;

            .valve {
                //银色
                color: #C7D2E0;
                font-size: 50px !important;
                position: relative;
                // margin-left: 18px;

                //顺时针旋转动画
                @keyframes rotate-clockwise {
                    from {
                        transform: rotate(0deg);
                    }

                    to {
                        transform: rotate(90deg);
                    }
                }

                //逆时针旋转动画
                @keyframes rotate-counterclockwise {
                    from {
                        transform: rotate(90deg);
                    }

                    to {
                        transform: rotate(0deg);
                    }
                }

                .pointer {
                    border-radius: 4px;
                    width: 8px;
                    height: 25.3px;
                    position: absolute;
                    left: 21.5px;
                    top: 20.7px;
                }

                .pointer_close {
                    background-color: #f10909;
                }


                .pointer_to_open {
                    animation: rotate-clockwise 15s linear infinite;
                    background-color: yellow;
                }

                .pointer_to_close {
                    animation: rotate-counterclockwise 15s linear infinite;
                    background-color: yellow;
                }

                .pointer_open {
                    //旋转90度
                    transform: rotate(90deg);
                    background-color: #2fb31e;
                }
            }

            :deep(.el-switch) {
                .el-switch__label {
                    color: #FFF;
                }

                .el-switch__label.is-active {
                    color: var(--el-color-primary);
                }

                .el-switch__core {
                    height: 25px;
                    min-width: 50px;
                }
            }
        }
    }
}
</style>