

<template>
    <div class='electric-well-page'>
        <!-- 顶部条 -->
        <van-nav-bar title='电井间商铺控制范围' left-arrow @click-left='backPage' @click-right='handleRightClick'>
            <template #right>
                <i class='iconfont wanda-scan'></i>
            </template>
        </van-nav-bar>
        <!-- 搜索框 -->
        <div class='search-container'>
            <van-search class='search' v-model='keyword' placeholder='请输入电井间或商铺编号' @search='onSearch'></van-search>
        </div>
        <!-- 电井列表 -->
        <div class='electric-well-list' v-if='list.length'>
            <div class='floor' v-for='(item,index) in list' :key='`${index}_${item.floor}`'>
                <!-- 楼层 -->
                <div class='title'>
                    <div class='floor-left'>
                        <i class='iconfont wanda-floor-func-active'></i>
                        {{item.floor}}
                    </div>
                    <div class='floor-right' @click='goToMapView(item.floor)'>
                        查看平面图
                        <van-icon name='arrow' />
                    </div>
                </div>
                <!-- 电井 -->
                <div class='well-container'>
                    <div class='well' v-for='(detail) in item.data.slice(0,2)' :key='detail.meterbox'>
                        <div class='well-title'>{{detail.welldes}}</div>
                        <div class='meterbox'>
                            <span class='well-left'>商铺电表箱:</span>
                            <span class='value'>{{detail.meterbox}}</span>
                        </div>
                        <div class='meterbox'>
                            <span class='well-left'>商铺编号:</span>
                            <span class='value'>{{detail.shopsnumList}}</span>
                        </div>
                    </div>

                    <!-- 第三条以上 -->
                    <div v-show='item.loadMore &&  item.data.length>2' :key='key'>
                        <div class='well' v-for='(detail) in item.data.slice(2)' :key='detail.meterbox'>
                            <div class='well-title'>{{detail.welldes}}</div>
                            <div class='meterbox'>
                                <span class='well-left'>商铺电表箱:</span>
                                <span class='value'>{{detail.meterbox}}</span>
                            </div>
                            <div class='meterbox'>
                                <span class='well-left'>商铺编号:</span>
                                <span class='value'>{{detail.shopsnumList}}</span>
                            </div>
                        </div>
                    </div>

                    <!-- </div> -->
                </div>
                <!-- 加载更多 -->
                <div class='load-more-container' v-show='!item.loadMore && item.data.length>2' @click='loadMore(item)'>
                    <div class='load-more'>加载更多</div>
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
            <template #image>
                <img src='../../assets/images/search_null.png' alt />
            </template>
        </van-empty>

        <!-- 点击头部筛选,出现的右侧弹窗 -->
        <van-popup class='m-popup-container' v-model='showPopup' position='right'>
            <div class='m-popup'>
                <!-- 系统 -->
                <div class='system'>
                    <h1 class='title'>楼层</h1>
                    <div class='system-btn-container'>
                        <div class='system-btn' v-for='(item,index) in floorList' :key='index'>
                            <van-button class='m-btn' :class='item.active' @click='changeFloor(item)'>{{item.code}}</van-button>
                        </div>
                    </div>
                </div>
                <div class='divider'></div>
                <!-- 设备设施 -->
                <div class='sbss'>
                    <h1 class='title'>电井类型</h1>
                    <div class='system-btn-container'>
                        <div class='system-btn' v-for='(item,index) in wellTypeList' :key='index'>
                            <van-button class='m-btn' :class='item.active' @click='changeWellType(item)'>{{item.text}}</van-button>
                        </div>
                    </div>
                </div>
                <div class='footer'>
                    <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
                    <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
/**
 * 电井间控制商铺范围
 */
import Vue from 'vue'
import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
import { mapGetters } from 'vuex'

import { queryShops } from '@/api/equipmentList'
import { sleep } from '@/utils/util'
import { cloneDeep } from 'lodash'
export default {
    name: 'ElectricWell',
    props: {},
    data() {
        return {
            keyword: '',
            page: 1,
            size: 20,
            list: [],
            key: new Date().getTime(),
            loading: false,
            showPopup: false,
            floorList: [],
            wellTypeList: [
                { text: '全部', id: '全部', active: 'active' },
                { text: '强电井', id: '强电井', active: '' },
                { text: '弱电井', id: '弱电井', active: '' },
                { text: '强弱电井', id: '强弱电井', active: '' },
            ],
            currentFloor: '全部',
            currentWellType: '全部',
            // 弹窗中使用数据
            modalData: {
                floor: '',
                wellType: '',
            },
            // 弹窗中使用备份数据
            modalDataBak: {
                floor: '',
                wellType: '',
            },
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId', 'floorsArr']),
    },
    components: {},
    created() {
        // code:"F6"
        // gcname:"f6"
        // gcode:"6F"
        // gname:"f6"
        // seq:600

        let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '全部', seq: null, active: 'active' }]
        this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
            floorList.push({ code, gcname, gcode, gname, seq, active: '' })
        })
        this.floorList = floorList
        console.log(this.floorList)
        this.getList()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        /**
         * 点击右侧筛选
         */
        handleRightClick() {
            this.showPopup = true
            // 设置选中的专业系统
            this.changeFloor({ gname: this.currentFloor })
        },
        /**
         * 获取电井列表
         */
        async getList() {
            console.log('getList')
            let getParams = {
                orderBy: `floor,1;welldesm,1;meterbox,1;`,
                plazaId: this.plazaId,
            }
            // 输入框搜索关键字
            if (this.keyword) {
                getParams.keyword = `${this.keyword}:welldes,meterbox,shopsnumList;`
            }
            // 右侧弹窗 筛选楼层的类型
            if (this.currentFloor && this.currentFloor !== '全部') {
                getParams.floor = this.currentFloor
            }
            // 右侧弹窗 筛选的电井类型
            if (this.currentWellType && this.currentWellType !== '全部') {
                getParams.keyword = getParams.keyword || ''
                getParams.keyword += `${this.currentWellType}:welldes;`
            }
            let resData = await queryShops({ getParams })
            if (!resData && !resData?.data) {
                this.list = []
                return false
            }
            let res_data = resData.data[0] || []
            let list = []
            for (const item in res_data) {
                console.log(item)
                list.push({
                    floor: item,
                    seq: res_data[item][0].seq,
                    data: res_data[item],
                })
            }
            // 楼层降序排序 RF,F6-F1,B1
            list = list.sort((a, b) => b.seq - a.seq)
            this.list = list
            console.log(this.list)
            // console.log(JSON.stringify(res_data, null, 2))
        },
        /**
         * 点击的楼层,跳转楼层平面图
         */
        goToMapView(chooseFloor) {
            let { floorsArr } = this
            let currentFloor = floorsArr.filter((v) => v.code === chooseFloor)[0]
            let floor = {
                FloorId: currentFloor.gname,
                FloorName: currentFloor.code,
            }
            this.$router.push({ name: 'MapView', params: { floor } })
        },
        /**
         * 点击加载更多,显示该楼层下的更多数据
         */
        loadMore(item) {
            item.loadMore = true
            this.key = new Date().getTime()
        },
        /**
         * 搜索
         */
        onSearch() {
            // 初始化数据,查询列表
            this.initData()
            this.getList()
        },
        /**
         *  初始化数据,查询列表
         */
        initData() {
            this.list = []
        },
        /**
         * popup 更改楼层
         */
        changeFloor(data) {
            console.log(data)
            let floorList = this.floorList
            floorList.map((item) => {
                item.active = ''
                if (item.gname === data.gname) {
                    item.active = 'active'
                }
            })
            // 弹窗选中的系统
            this.$set(this.modalDataBak, 'floor', data.gname)
        },
        changeWellType(data) {
            let { wellTypeList } = this
            wellTypeList.map((item) => {
                item.active = ''
                if (item.text === data.text) {
                    item.active = 'active'
                }
            })
            this.$set(this.modalDataBak, 'wellType', data.text)
        },
        /**
         * 重置
         */
        reset() {
            this.modalDataBak = {
                floor: '',
                wellType: '',
            }
            this.modalData = {
                floor: '',
                wellType: '',
            }
            this.wellTypeList = [
                { text: '全部', id: '全部', active: 'active' },
                { text: '强电井', id: '强电井', active: '' },
                { text: '弱电井', id: '弱电井', active: '' },
                { text: '强弱电井', id: '强弱电井', active: '' },
            ]
            this.currentFloor = '全部'
            this.currentWellType = '全部'
            this.showPopup = false
            // 初始化数据,查询列表
            this.initData()
            this.getList()
        },
        /**
         * 弹窗确认
         */
        confirm() {
            this.modalData = cloneDeep(this.modalDataBak)
            this.showPopup = false
            this.currentFloor = this.modalData.floor
            this.currentWellType = this.modalData.wellType
            // 初始化数据,查询列表
            this.initData()
            this.getList()
        },
    },
}
</script>
<style lang='less' scoped>
.electric-well-page {
    width: 100%;
    height: 100%;

    // display: flex;
    // flex-direction: column;
    background-color: #f5f6f7;
    // 返回箭头修改
    /deep/ .van-nav-bar .van-icon {
        color: #000;
    }
    // 搜索
    .search-container {
        width: 100%;
        height: 55px;
        // background-color: #fff;
        text-align: center;
        .search {
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            margin: 0 auto;
            background: none;
        }
        .van-search__content {
            background: #fff;
            border-radius: 50px;
        }
    }
    // 设备列表
    .electric-well-list {
        width: 100%;
        // flex: 1;
        height: calc(100% - 100px);
        // padding: 0 10px;
        background-color: #fff;
        overflow: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        .floor {
            width: 100%;
            max-height: 410px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            // 楼层title
            .title {
                width: 100%;
                height: 40px;
                min-height: 40px;
                max-height: 40px;
                padding: 0 15px;
                background: #dce5ee;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .floor-left {
                    color: #025baa;
                    font-size: 16px;
                }
                .floor-right {
                    color: #025baa;
                    display: flex;
                    align-items: center;
                    i {
                        margin-left: 5px;
                    }
                }
            }
            // 电井列表
            .well-container {
                padding: 0 15px;
                flex: 1;
                overflow: auto;
                .well {
                    width: 100%;
                    // height: 130px;
                    padding: 15px 0;
                    border-bottom: 1px solid #e6e6e6;
                    .well-title {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;
                    }
                    .meterbox,
                    .shopsnumList {
                        width: 100%;
                        height: auto;
                        margin-top: 8px;
                        display: flex;
                        color: #666;
                        .well-left {
                            width: 80px !important;
                        }
                        .value {
                            flex: 1;
                            height: auto;
                            word-wrap: break-word;
                            word-break: break-all;
                        }
                    }
                }
            }
            .load-more-container {
                width: 100%;
                height: 50px;
                background: #f5f6f7;
                text-align: center;
                padding-top: 12px;
                .load-more {
                    width: 80px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    margin: 0 auto;
                    color: #025baa;
                    background: #e5eef6;
                }
            }
        }
    }
    // 空状态
    .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;
            }
        }
    }
    // 筛选弹窗
    .m-popup-container {
        width: 80%;
        height: 100%;
        padding: 10px 15px;
        .m-popup {
            width: 100%;
            height: calc(100% - 80px);
            display: flex;
            flex-direction: column;
            .title {
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                margin-bottom: 15px;
            }
            // 专业
            .system {
                width: 100%;
                height: auto;
                // 专业系统按钮
                .system-btn-container {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    flex-flow: wrap;
                    .system-btn {
                        width: calc(33.333% - 5.34px) !important;
                        min-width: calc(33.333% - 5.34px) !important;
                        max-width: calc(33.333% - 5.34px) !important;
                        height: 32px;
                        margin-bottom: 8px;
                        box-sizing: border-box;
                        .m-btn {
                            width: 100%;
                            height: 32px !important;
                            text-align: center;
                            background: #eff0f1;
                            border-radius: 2px;
                        }
                    }
                    .system-btn:not(:nth-child(3n)) {
                        margin-right: 8px;
                    }
                }
                .active {
                    background-color: #025baa !important;
                    color: #fff;
                }
            }
            // 电井类型
            .sbss {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: auto;
                .title {
                    width: 100%;
                    height: 25px;
                }
                .system-btn-container {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    flex-flow: wrap;
                    .system-btn {
                        width: calc(33.333% - 5.34px) !important;
                        min-width: calc(33.333% - 5.34px) !important;
                        max-width: calc(33.333% - 5.34px) !important;
                        height: 32px;
                        margin-bottom: 8px;
                        box-sizing: border-box;
                        .m-btn {
                            width: 100%;
                            height: 32px !important;
                            text-align: center;
                            background: #eff0f1;
                            border-radius: 2px;
                            padding: 0 !important;
                        }
                    }
                    .system-btn:not(:nth-child(3n)) {
                        margin-right: 8px;
                    }
                }
                .active {
                    background-color: #025baa !important;
                    color: #fff;
                }
                .load-more {
                    width: 80px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    margin: 0 auto;
                    color: #025baa;
                    background: #e5eef6;
                }
            }
            .divider {
                border-bottom: 1px solid #e6e6e6;
                margin: 20px 0;
            }
            .footer {
                position: absolute;
                bottom: 30px;
                right: 0;
                width: 100%;
                height: 35px;
                display: flex;
                justify-content: space-between;
                padding: 0 15px;
                .van-button {
                    width: calc(50% - 7px) !important;
                    min-width: calc(50% - 7px) !important;
                    max-width: calc(50% - 7px) !important;
                    height: 100%;
                }
                .van-button:first-child {
                    margin-right: 14px;
                }
            }
        }
    }
}
</style>