<template>
    <div class='low-voltage-cabinet-detail'>
        <!-- 顶部条 -->
        <van-nav-bar :title='wzjc' 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'>
            <!-- 解决input搜索,页面卡顿的情况,将swiper抽离成组件 -->
            <MSwiper :list='list' v-if='list.length' @itemClick='itemClick' />
        </div>
        <div class='info-container' v-show='list.length'>
            <div class='border'></div>
            <div class='title'>{{currentInfo.drawernum}}</div>
            <div class='info'>
                <div class='label'>出线规格:</div>
                <div class='value'>{{currentInfo.outspec}}</div>
            </div>
            <div class='info'>
                <div class='label'>楼 层:</div>
                <div class='value'>{{currentInfo.floor}}</div>
            </div>
            <div class='info'>
                <div class='label'>电井编号:</div>
                <div class='value'>{{currentInfo.wellnum}}</div>
            </div>
            <div class='info'>
                <div class='label'>电箱编号:</div>
                <div class='value'>{{currentInfo.boxnum}}</div>
            </div>
            <div class='info'>
                <div class='label'>供电容量:</div>
                <div class='value'>{{currentInfo.capacitynum}} kw</div>
            </div>
            <div class='info'>
                <div class='label'>控制回路:</div>
                <div class='value'>{{currentInfo.control}}</div>
            </div>
        </div>
        <van-empty class='m-empty' v-if='noDataFlag && !list.length' description='暂无数据'>
            <template #image>
                <img class='no-data' src='../../assets/images/search_null.png' alt />
            </template>
        </van-empty>
    </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'
import { queryDygjcxline } from '@/api/equipmentList'
import { mapGetters } from 'vuex'
import { cloneDeep } from 'lodash'
import MSwiper from '@/components/equipmentFacilities/MSwiper'
// let swiperVm = null
export default {
    name: 'LowVoltageCabinetDetail',
    props: {},
    components: {
        Swiper,
        SwiperSlide,
        MSwiper,
    },
    directives: {
        swiper: directive,
    },
    data() {
        return {
            pageKey: `key_${new Date().getTime()}`,
            keyword: '',
            noDataFlag: false,
            list: [],
            currentInfo: {},
            location: '', //路由传递的参数
            wzjc: '', //位置简称
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
    },
    created() {
        // 将this指向swiperVm,供swiper点击事件使用
        // swiperVm = this
        this.control = '步行街分区2中庭用电'
        this.drawernum = '1-5AA-2'
        this.floor = '1F'
        this.glsms_proimgupid = 37206
        this.outspec = '4*150+1*70'

        const { location, wzjc } = this.$route.params
        this.location = location
        this.wzjc = wzjc
        this.getList()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        onSearch() {
            console.log('sssss')
            this.initData()
            this.getList()
        },
        itemClick(currentInfo) {
            this.currentInfo = cloneDeep(currentInfo)
        },
        handleTap(text) {
            console.log(text)
            console.time(1)
            //
            if (text.indexOf('\n') !== -1) {
                return false
            }
            this.list.map((item, index) => {
                item.active = false
                if (text === item.drawernum) {
                    item.active = true
                    this.currentInfo = cloneDeep(item)
                }
            })
            console.timeEnd(1)
            console.log(this.currentInfo)
            // this.key = `key_${new Date().getTime()}`
        },
        initData() {
            this.noDataFlag = false
            this.list = []
            this.currentInfo = {}
        },
        async getList() {
            let getParams = {
                page: 1,
                size: 500,
                plazaId: this.plazaId,
                location: this.location,
            }
            if (this.keyword) {
                getParams.keyword = `${this.keyword}:drawernum,control,floor`
            }
            let res = await queryDygjcxline({ getParams })
            if (!res?.data) {
                this.noDataFlag = true
                this.list = []
                this.currentInfo = {}
                return false
            }
            this.noDataFlag = false
            let list = res.data
            list.map((item, index) => {
                item.active = false
                index === 0 && (item.active = true)
            })
            this.list = list
            this.currentInfo = cloneDeep(list[0])
        },
    },
}
</script>
<style lang='less' scoped>
.low-voltage-cabinet-detail {
    width: 100%;
    height: 100%;
    // background-color: #f5f6f7;
    background-color: #fff;
    // 返回箭头修改
    /deep/ .van-nav-bar .van-icon {
        color: #000;
    }
    // 搜索
    .equipment-search-container {
        width: 100%;
        height: 55px;
        // background-color: #fff;
        background-color: #f5f6f7;
        text-align: center;
        .equipment-search {
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            margin: 0 auto;
            background: none;
        }
        .van-search__content {
            background: #fff;
            border-radius: 50px;
        }
    }
    // 轮播
    .card-container {
        margin-top: 12px;
        padding: 10px 15px 0 15px;
        background: #fff;
    }
    // 下方信息
    .info-container {
        padding: 15px;
        background: #fff;
        .border {
            border-top: 1px solid #e4e6e7;
            margin-bottom: 23px;
        }
        .title {
            height: 24px;
            font-size: 16px;
            font-weight: 500;
            color: #025baa;
            line-height: 24px;
            margin-bottom: 16px;
        }
        .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;
        }
    }
    // 空状态
    .m-empty {
        // position: fixed;
        // top: 0;
        // left: 0;
        // width: 100%;
        // height: 100%;
        display: flex;
        align-items: center;
        /deep/ .van-empty__image {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            img {
                width: auto;
                height: auto;
            }
        }
    }
}
</style>