<template>
    <!-- 设备列表 -->
    <div style="height: 100%; position: relative">
        <ChartsBox :boxTitle="`设备列表`">
            <div class="container">
                <div
                    class="device-item"
                    v-for="(item, index) in deviceList"
                    :key="index"
                >
                    <img
                        :src="
                            item.onLine
                                ? `${require('@/assets/image/home-foundation-pit/line_big.png')}`
                                : `${require('@/assets/image/home-foundation-pit/offline_big.png')}`
                        "
                        alt=""
                    />
                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
                        {{ item.name }}
                    </span>
                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
                        {{ item.code }}
                    </span>
                </div>
            </div>
        </ChartsBox>

        <div class="case">
            <img src="@/assets/image/home-foundation-pit/line.png" alt="" />
            <span>在线</span>
            <img src="@/assets/image/home-foundation-pit/offline.png" alt="" />
            <span>离线</span>
        </div>
    </div>
</template>

<script>
import ChartsBox from '@/components/ChartsBox/index'
export default {
    components: { ChartsBox },
    data() {
        return {
            deviceList: [
                { name: '1号设备', code: 'YKD-231', onLine: true },
                { name: '2号设备', code: 'YKD-233', onLine: true },
                { name: '3号设备', code: 'YKD-232', onLine: false },
                { name: '3号设备', code: 'YKD-232', onLine: false },
                { name: '3号设备', code: 'YKD-232', onLine: false },
                { name: '3号设备', code: 'YKD-232', onLine: false },
            ],
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    color: #fff;
    font-size: 12px;

    // transform: translateY(10px);

    .device-item {
        width: calc((100% - 20px) / 6);
        margin-right: 4px;
        margin-bottom: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
            width: 30px;
            height: 30px;
        }
    }

    & .device-item:nth-child(6n) {
        margin-right: 0;
    }
}

.case {
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;

    span {
        padding: 0 12px 0 6px;
    }
}
</style>
