<template>
    <div class="app_container">
        <div class="eqList">
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[0].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[0].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[0].value" :type="eqList[0].type" :setValue="eqList[0].setValue"
                        :title="eqList[0].title"></EqListComponent>
                </div>

            </div>
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[1].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[1].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[1].value" :type="eqList[1].type" :setValue="eqList[1].setValue">
                    </EqListComponent>
                </div>

            </div>
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[2].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[2].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[2].value" :type="eqList[2].type" :setValue="eqList[2].setValue">
                    </EqListComponent>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import EqListComponent from '@/components/DCS/EqListComponent.vue'
//初始化数据
const eqList = [
    {
        name: '输送机',
        status: '运行中',
        type: 'speed',
        value: 500,
        setValue: 500,
    },
    {
        name: '打浆机',
        status: '运行中',
        type: 'speed',
        value: 500,
        setValue: 500,
    },
    {
        name: '螺杆泵',
        status: '运行中',
        type: 'speed',
        value: 500,
        setValue: 500,
    }
]
</script>
<style scoped lang="scss">
.app_container {
    background: #D4E3EE;
    padding: 20px;
    min-height: inherit;

    .eqList {
        border-radius: 5px;
        background: #F6FBFF;
        min-width: -webkit-fill-available;
        min-height: inherit;
        display: inline-flex;
        padding: 24px 32px;
        align-items: flex-start;
        gap: 60px;
        flex-wrap: wrap;

        .eqList_border {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            border-radius: 10px;
            border: 1px solid #CCDBEB;
            background: #E6EEF8;
            box-shadow: 4px 4px 8.6px 0px rgba(203, 213, 224, 0.43);

            .border_header {
                display: flex;
                align-items: center;
                gap: 100px;

                .header_title {
                    display: flex;
                    width: 160px;
                    height: 40px;
                    padding: 9px 44px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    border-radius: 10px 0px 20px 0px;
                    background: #008BB1;

                    text {
                        color: #FFF;
                        font-family: OPPOSans;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }
                }

                .header_text {
                    color: #2AA525;
                    font-family: OPPOSans;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }
            }

            .border_body {
                display: flex;
                padding: 10px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    }
}
</style>