<template>
    <div class='low-voltage-cabinet-detail'>
        <!-- 顶部条 -->
        <van-nav-bar :title='drawernum' left-arrow @click-left='backPage'></van-nav-bar>
        <!-- 搜索框 -->
        <div class='equipment-search-container'>
            <!-- TODO: 配电室名称 -->
            <van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
        </div>
        <div class='card-container'>
            <swiper class='swiper' :options='swiperOption'>
                <swiper-slide>1-2AA1-11</swiper-slide>
                <swiper-slide>1-2AA1-112</swiper-slide>
                <swiper-slide>1-2AA1-113</swiper-slide>
                <swiper-slide>1-2AA1-114</swiper-slide>
                <swiper-slide>1-2AA1-115</swiper-slide>
                <swiper-slide>1-2AA1-116</swiper-slide>
                <swiper-slide>1-2AA1-117</swiper-slide>
                <swiper-slide>1-2AA1-118</swiper-slide>
                <swiper-slide>1-2AA1-119</swiper-slide>
                <swiper-slide>1-2AA1-1110</swiper-slide>
                <swiper-slide>1-2AA1-1111</swiper-slide>
                <swiper-slide>1-2AA1-1112</swiper-slide>
                <swiper-slide>1-2AA1-1113</swiper-slide>
                <swiper-slide>1-2AA1-1114</swiper-slide>
                <swiper-slide>1-2AA1-1115</swiper-slide>
                <swiper-slide>1-2AA1-1116</swiper-slide>
                <swiper-slide>1-2AA1-1117</swiper-slide>
                <swiper-slide>1-2AA1-1118</swiper-slide>
                <swiper-slide>1-2AA1-1119</swiper-slide>
                <swiper-slide>1-2AA1-1120</swiper-slide>
                <div class='swiper-pagination' slot='pagination'></div>
            </swiper>
        </div>
        <div class='info-container'>
            <div class='border'></div>
            <div class='info'>
                <div class='label'>出线规格:</div>
                <div class='value'>{{outspec}}</div>
            </div>
            <div class='info'>
                <div class='label'>楼 层:</div>
                <div class='value'>{{floor}}</div>
            </div>
            <div class='info'>
                <div class='label'>电井编号:</div>
                <div class='value'>{{wellnum}}</div>
            </div>
            <div class='info'>
                <div class='label'>电箱编号:</div>
                <div class='value'>{{boxnum}}</div>
            </div>
            <div class='info'>
                <div class='label'>供电容量:</div>
                <div class='value'>{{capacitynum}} kw</div>
            </div>
            <div class='info'>
                <div class='label'>控制回路:</div>
                <div class='value'>{{control}}</div>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 配电室低压柜及出线明细
 */
import Vue from 'vue'
import { NavBar, Search } from 'vant'
Vue.use(NavBar).use(Search)
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
    name: 'LowVoltageCabinetDetail',
    props: {},
    components: {
        Swiper,
        SwiperSlide,
    },
    directives: {
        swiper: directive,
    },
    data() {
        return {
            keyword: '',
            swiperOption: {
                slidesPerView: 3,
                // slidesPerGroup: 3,
                slidesPerColumn: 5,
                spaceBetween: 10,
                slidesPerColumnFill: 'row',
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                // autoplay: {
                //     //自动播放
                //     delay: 1500,
                //     disableOnInteraction: false,
                // },
                // speed: 1500, //播放速度
            },
            control: '',
            drawernum: '',
            floor: '',
            glsms_proimgupid: '',
            outspec: '',
            wellnum: '',
            boxnum: '',
            capacitynum: '',
        }
    },
    computed: {},
    created() {
        this.control = '步行街分区2中庭用电'
        this.drawernum = '1-5AA-2'
        this.floor = '1F'
        this.glsms_proimgupid = 37206
        this.outspec = '4*150+1*70'
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        onSearch() {},
    },
}
</script>
<style lang='less' scoped>
.low-voltage-cabinet-detail {
    width: 100%;
    height: 100%;
    background-color: #f5f6f7;
    // 返回箭头修改
    /deep/ .van-nav-bar .van-icon {
        color: #000;
    }
    // 搜索
    .equipment-search-container {
        width: 100%;
        height: 55px;
        // background-color: #fff;
        text-align: center;
        .equipment-search {
            width: 80%;
            margin: 0 auto;
            background: none;
        }
        .van-search__content {
            background: #fff;
            border-radius: 50px;
        }
    }
    .card-container {
        margin-top: 12px;
        padding: 20px 15px 0 15px;
        background: #fff;
        .swiper {
            max-height: 300px;
            width: 100%;
            .swiper-slide {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-weight: bold;
                font-size: 14px;
                background: #ebeded;
            }
        }

        .swiper {
            max-height: 300px;
            margin-left: auto;
            margin-right: auto;
            .swiper-slide {
                height: 30px;
            }
        }
        .swiper-pagination {
            position: relative;
            bottom: 0;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .info-container {
        padding: 15px;
        background: #fff;
        .border {
            border-top: 1px solid #e4e6e7;
            margin-bottom: 23px;
        }
        .info {
            display: flex;
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-bottom: 8px;
        }
        .label {
            color: #666;
            // width: 60px;
            // text-align: justify;
            // text-align-last: justify;
        }
        .value {
            color: #333;
            margin-left: 10px;
            flex: 1;
        }
    }
}
</style>