<template>
    <div class="detecter">
        <div class="other-people">
            <div class="other-people-title">
                <div class="image-border image-border1"></div>
                <div class="image-border image-border2"></div>
                <div class="image-border image-border3"></div>
                <div class="image-border image-border4"></div>
                探测设备列表
            </div>
        </div>
        <div class="detecterList">
            <ul>
                <el-row :gutter="21" justify="space-between">
                    <el-col :span="8" v-for="(detecter,i) in detecterList">
                        <div :class="[{'detecterItem':true},{'active':loftIndex }]" @click="handleSelect(detecter)">
                            <div class="grid-content bg-purple"> {{detecter.TagName}}</div>
                        </div>
                    </el-col>
                    <h5 v-if="detecterList == ''">尚未添加探测设备</h5>
                    <h5 v-if="detecterList == null">尚未添加探测设备</h5>
                </el-row>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loftIndex: 0,
                navs: [],
            }
        },
        props: ['detecterList'],
        methods: {
            handleSelect(detecter) {
                this.$router.push({path: '/equip', query: {id: detecter.Id,name:detecter.TagName}});
            },
        }
    }
</script>

<style scoped>
    .detecter {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }

    ul {
        width: 90%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }

    .detecterItem {
        border: 1px solid #005EA2;
        background: rgba(27,86,200,0.14);
        color: #fff;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 8px;
        border-radius: 0px;
        cursor: pointer;
        font-size: 14px;
    }

    .detecterItem.active {
        background: #005EA2;
    }
    .detecterList {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        min-height: 100px;
    }
    .detecterList h5 {
        color: #fff;
        font-weight: normal;
    }
</style>
