<template>
    <!-- 设备列表 -->
    <div style="height: 100%; position: relative">
        <ChartsBox :boxTitle="`设备列表`">
            <div class="container" v-if="deviceList.length > 0">
                <div class="scroll-container">
                    <div
                        class="device-item"
                        v-for="(item, index) in deviceList"
                        :key="index"
                        @click="onHandleSelectDevice(index, item.id)"
                    >
                        <img
                            :src="
                                item.isOnline == 1
                                    ? `${require('@/assets/image/home-foundation-pit/line_big.png')}`
                                    : `${require('@/assets/image/home-foundation-pit/offline_big.png')}`
                            "
                            alt=""
                        />
                        <span
                            :style="activeIndex === index ? 'color:#0ff' : ''"
                        >
                            {{ item.devName }}
                        </span>
                        <span
                            :style="activeIndex === index ? 'color:#0ff' : ''"
                        >
                            {{ item.devCode }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="container" v-else>
                <EmptyModel />
            </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'
import EmptyModel from '@/components/EmptyModel/index.vue'
import { getMassConcreteListAPI } from '@/api/home-foundation-pit.js'
export default {
    components: { ChartsBox, EmptyModel },
    data() {
        return {
            deviceList: [],
            activeIndex: 0,
        }
    },
    methods: {
        async getMassConcreteListData() {
            const { data: res } = await getMassConcreteListAPI({
                typeCode: '9000300',
            })

            console.log(
                `%c🔍 深基坑监测 ----> 设备列表(左二) 数据出参 %c`,
                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                '',
                res,
            )
            this.deviceList = res
            if (res.length > 0) {
                this.$emit('handleSelectDevice', res[0].id)
            }
        },
        onHandleSelectDevice(index, id) {
            this.activeIndex = index
            this.$emit('handleSelectDevice', id)
        },
    },
    created() {
        this.getMassConcreteListData()
    },
}
</script>

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

    // transform: translateY(10px);

    .scroll-container {
        flex: 1; // 占据剩余空间
        overflow-y: auto; // 垂直滚动
        scrollbar-width: thin; // Firefox滚动条样式
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
        z-index: 9;
        padding: 0 12px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        color: #fff;
        font-size: 12px;

        /* Webkit浏览器滚动条样式 */
        &::-webkit-scrollbar {
            width: 6px;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
    }

    .device-item {
        width: calc((100% - 20px) / 4);
        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(4n) {
        margin-right: 0;
    }
}

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

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