<template>
    <!-- <div class="border_body"> -->
    <div class="data_item">
        <div class="item_left">
            <div class="title" v-if="title">
                <div class="title_icon"></div>
                <text>{{ title }}</text>
            </div>
            <div class="item_switch">
                <el-switch v-model="switchValue" active-text="开" inactive-text="关" />
                <div class="switch_name">阀门</div>
            </div>
        </div>

    </div>
    <!-- </div> -->
</template>

<script setup>
import { ref, toRefs } from 'vue';


const props = defineProps({
    title: {
        type: String,
        required: false
    },
    type: {
        type: String,
        required: true
    },
    value: {
        type: Number,
        required: true, // 这里的required: true是为了在父组件中使用时，必须传入value值
    },
});

const switchValue = ref(props.value)



</script>

<style scoped lang="scss">
.data_item {
    display: flex;
    height: 101px;
    padding: 8px;
    align-items: center;
    align-content: center;
    gap: 60px 20px;
    flex-wrap: wrap;
    border-radius: 10px;
    background: #EFF7FF;

    .item_left {
        display: flex;
        padding: 10px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;

        .title {
            display: flex;
            // justify-content: center;
            align-items: center;
            gap: 5px;

            .title_icon {
                width: 4px;
                height: 10px;
                border-radius: 10px;
                background: #1465BE;
            }

            text {
                color: #1465BE;
                // font-family: OPPOSans;
                font-size: 14px;

            }
        }

        text {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

    }

    .item_switch {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

    }

    .switch_name {
        color: #919EB1;
        font-family: OPPOSans;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
</style>
