<template>
    <!-- 阀门组件 -->
    <div class="body_show">
        <i class="icon iconfont icon-waterValve valve" :style="{ fontSize: `${props.iconSize}px` }">
            <div :class="pointerClass" :style="pointerStyle"></div>
        </i>
        <div class="title" ref="titleRef" :style="titleStyle">{{ title }}</div>
    </div>
</template>

<script setup>
import { defineProps, computed, ref, onMounted, watch, nextTick } from 'vue'
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    // 阀门开信号状态（非必填，默认 null）
    valveOpenSignalStatus: {
        type: Boolean,
        default: null
    },
    // 阀门关闭信号状态（非必填，默认 null）
    valveCloseSignalStatus: {
        type: Boolean,
        default: null
    },
    // 开阀门对应的对象的状态
    valveOpenObj: {
        type: Boolean,
        required: true
    },
    //旋转角度
    rotateAngle: {
        type: Number,
        default: 0
    },
    //阀门图标大小
    iconSize: {
        type: Number,
        default: 50
    }
})

const titleRef = ref(null)
const topValue = ref('122%') // 默认值
// 初次挂载时获取宽度
onMounted(() => {
    updateTop()
})

// 如果 rotateAngle 或 title 变化，可能需要更新 top
watch(() => [props.rotateAngle, props.title], () => {
    updateTop()
})
// 获取实际 DOM 宽度并计算 top
const updateTop = () => {
    nextTick(() => {
        const el = titleRef.value
        if (el) {
            const height = el.offsetWidth
            // 根据高度偏移一定值
            topValue.value = props.rotateAngle == 0? topValue.value : `calc(92% + ${height/2}px)`
        }
    })
}


// 计算 titleStyle 标题样式(50-16px)
const titleStyle = computed(() => {
    return {
        fontSize: `${props.iconSize * 0.32}px`,
        transform: `translate(-50%, -50%) rotate(${-props.rotateAngle}deg)`,
        top: topValue.value,
    }
})


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


// 计算 pointerStyle指针样式
const pointerStyle = computed(() => {
    return {
        borderRadius: '4px',
        width: `${props.iconSize * 0.16}px`,
        height: `${props.iconSize * 0.506}px`,
        position: 'absolute',
        left: '43%',
        top: '41.4%',
    }
})


</script>


<style scoped lang="scss">
.body_show {
    display: flex;
    align-items: center;
    // margin-right: 45px;
    gap: 5px;

    .title {
        color: #C7D2E0;
        position: absolute;
        // top: 122%;
        left: 50%;
        z-index: 10;
    }

    .valve {
        //银色
        color: #C7D2E0;
        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_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>