<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="onClickOpen" v-if="!valveOpenObj?.value">
                开
            </el-button>
            <el-button type="primary" @click="onClickClose" v-else>
                关
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import { setCoils } from '@/api/dcs/flowControl';
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    // 阀门开信号状态（非必填，默认 null）
    valveOpenSignalStatus: {
        type: Boolean,
        default: null
    },
    // 阀门关闭信号状态（非必填，默认 null）
    valveCloseSignalStatus: {
        type: Boolean,
        default: null
    },
    // 开阀门对应的对象
    valveOpenObj: {
        type: Object,
        required: true
    },
})



// 计算 pointer 的 class
const pointerClass = computed(() => {
    // 未传入阀门信号状态时，该阀门为N阀门
    if(null === props.valveOpenSignalStatus || null === props.valveCloseSignalStatus){
        // console.log('未传入阀门信号状态')
        return props.valveOpenObj?.value ? 'pointer_open' : 'pointer_close'
    }
    // 传入阀门信号状态时，该阀门为D阀门，根据信号状态判断指针样式
    if (props.valveOpenSignalStatus) {
        return 'pointer_open'
    } else {
        if (props.valveCloseSignalStatus) {
            return 'pointer_close'
        } else {
            return props.valveOpenObj?.value ? 'pointer_to_open' : 'pointer_to_close'
        }
    }
})

//阀门开启事件
function onClickOpen() {
    console.log('点击开启')
    const param = {
        dataArr: [true],
        startAddress: props.valveOpenObj.address,
        quantity: 1
    }
    setCoils(param).then(res => {
        console.log(res)
    })
}
//阀门关闭事件
function onClickClose() {
    console.log('点击关闭')
    const param = {
        dataArr: [false],
        startAddress: props.valveOpenObj.address,
        quantity: 1
    }
    setCoils(param).then(res => {
        console.log(res)
    })
}
</script>


<style scoped lang="scss">
.flow_single {
    min-width: 100px;
    display: flex;
    padding: 4px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    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>