<template>
    <div class="detecter">
        <div class="other-people">
            <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 class="regionList">
                <div class="other-people-title">
                    探测设备列表
                </div>
                <ul>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(region,i) in regionList">
                            <div :class="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(i)">
                                <div class="grid-content bg-purple"> {{region.Name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loftIndex: 0,
                navs: [],
            }
        },
        props: ['regionList'],
        methods: {
            handleSelect(i) {
                this.loftIndex = parseInt(i);
                this.$emit('ClickGetInfo', i);//触发事件
            },
        }
    }
</script>

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

    /deep/ .other-people {
        width: 350px;
        height: 142px;
        margin-left: 0;
        padding: 0;
        padding-right: 5px;
    }
    ul {
        width: 90%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 50px;
    }
    .regionItem {
        border: 1px solid #6DC1FF;
        color: #6DC1FF;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 8px;
        border-radius: 5px;
        cursor: pointer;
    }
    .regionItem.active {
        background: #6DC1FF;
        color: #fff;
    }
</style>
