<template>
    <div class='low-voltage-cabinet'>
        <!-- 顶部条 -->
        <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
            <template #right>
                <i class='iconfont wanda-scan'></i>
            </template>
        </van-nav-bar>
        <!-- 搜索框 -->
        <div class='equipment-search-container'>
            <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
        </div>
        <!-- 配电室 -->
        <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
        <van-list
            class='switch-room-container'
            :class='{"one-list":list.length === 1}'
            v-model='loading'
            :finished='finished'
            @load='onLoad'
            finished-text
        >
            <div class='switch-room' v-for='(item,index) in list' :key='index'>
                <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
                <!-- 一个低压柜信息 -->
                <div class='info-container'>
                    <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.data' :key='dIndex'>{{detail.drawernum}}</div>
                    <!-- 加载更多 -->
                    <div class='load-more-container'>
                        <div
                            class='load-more'
                            v-show='item.loadMore && item.data && item.data.length >= innerSize'
                            @click='locationLoadMore(item,index)'
                        >加载更多</div>
                    </div>
                    <van-list
                        class='more-list'
                        v-model='item.loading'
                        v-show='!item.loadMore && item.list && item.list.length'
                        :finished='item.finished'
                        :immediate-check='false'
                        @load='locationOnLoad(item,index)'
                        finished-text='没有更多了'
                    >
                        <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.list' :key='dIndex'>{{detail.drawernum}}</div>
                    </van-list>
                </div>
                <div class='bottom'>
                    <div class='divider'></div>
                </div>
            </div>
        </van-list>
        <!-- 点击头部筛选,出现的右侧弹窗 -->
        <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 systemList' :key='index'>
                            <van-button class='m-btn' :class='item.active' @click='changeSwitchRoom(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>
        <!-- 无数据 -->
        <van-empty class='m-empty' v-if='finished &&(!list.length || noDataFlag)' 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, 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 { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
import { sleep } from '@/utils/util'
import { cloneDeep } from 'lodash'
export default {
    name: 'LowVoltageCabinet',
    props: {},
    components: {},
    data() {
        return {
            mock: 2,
            title: '配电室低压出线柜及出线明细',
            keyword: '',
            page: 1,
            size: 5,
            innerSize: 15,
            list: [],
            loading: false,
            finished: false,
            noDataFlag: false,
            showPopup: false,
            systemList: [{ text: '全部', location: '全部', active: 'active' }],
            modalData: {
                location: '全部',
            },
            modalDataBak: {
                location: '全部',
            },
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
    },
    created() {
        // 查询筛选条件(右弹窗)
        this.getFilterList()
        // this.onLoad()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        /**
         *
         */
        async onLoad() {
            console.log('onLoad')
            if (this.page > 1) {
                // await sleep(1000)
            }
            await this.getList()
            // list无数据,不执行后续分页查询
            console.log(this.list)
            console.log(this.count)
            if (!this.list.length) {
                this.finished = true
                this.loading = false
                return true
            }
            this.page++
            this.loading = false
            if (this.list.length >= this.count) {
                this.finished = true
            }
        },
        /**
         * 查询低压柜list
         */
        async getList() {
            let queryData = {
                data: {
                    page: this.page,
                    size: this.size,
                    plazaId: this.plazaId,
                },
                postParams: {
                    // location: '',
                    locflList: ['5201', '5204', '5209'], //低压柜
                    pageable: {
                        pageNumber: 1,
                        pageSize: this.innerSize,
                    },
                },
            }
            if (this.keyword) {
                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
            }
            // 筛选 配电室之后, location字段上送
            if (this.modalData.location && this.modalData.location !== '全部') {
                queryData.postParams.location = this.modalData.location
            }
            console.log(queryData)
            let res
            try {
                res = await queryDygjcxline(queryData)
            } catch (error) {
                console.log(error)
            }
            // mockData
            // res = require('./mockData').queryDygjcxlineData
            if (!res?.data?.data) {
                return false
            }
            res.data.data.map((item, index, arr) => {
                // console.log(item)
                if (item?.count >= this.innerSize || item?.data?.length >= this.innerSize) {
                    // console.log(item)
                    arr[index] = {
                        ...item,
                        loadMore: true,
                        loading: true,
                        finished: false,
                        list: [],
                        page: 2,
                        size: this.innerSize,
                    }
                } else {
                    item.loadMore = false
                }
                if (!item.data) {
                    item.data = []
                }
            })
            this.list = [...this.list, ...res.data.data]
            console.log('%csssss', 'color:blue')
            console.log(this.list)
            this.count = res.data.count
            // 是否显示无数据的标志
            let noDataFlag = !Boolean(this.list.filter((v) => v.data.length).length)
            console.log(noDataFlag)
            this.noDataFlag = noDataFlag
        },

        /**
         * 点击加载更多
         */
        locationLoadMore(item, index) {
            // console.log(item, index)
            item.loadMore = false
            this.$set(this.list, index, item)
            this.locationOnLoad(item, index)
        },
        /**
         *  查询一个location下的onLoad事件
         */
        async locationOnLoad({ location }, index) {
            console.log(location, index)
            let item = cloneDeep(this.list[index])
            console.log(item)
            if (item.page > 2) {
                // await sleep(1000)
            }
            await this.getLocationList({ location, index })
            // 调用接口后的item
            let currentItem = cloneDeep(this.list[index])
            // list无数据,不执行后续分页查询
            if (!currentItem.list.length) {
                currentItem.finished = true
                return true
            }
            currentItem.page++
            currentItem.finished = false
            currentItem.loading = false
            if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
                currentItem.finished = true
            }
            this.$set(this.list, index, currentItem)
        },
        /**
         * 查询一个location下的设备
         */
        async getLocationList(item) {
            console.log('=========')
            console.log('=========')
            console.log('=========')
            console.log('=========')
            console.log('=========')
            console.log('=========')
            console.log('getLocationList')
            console.log(item)
            const { location, index } = item
            let currentList = cloneDeep(this.list[index])
            console.log(currentList)
            console.log('getLocationList')
            let queryData = {
                data: {
                    page: Math.ceil((index + 1) / this.size), // 当前出线柜,所在的页码
                    size: currentList.size,
                    plazaId: this.plazaId,
                },
                postParams: {
                    locflList: ['5201', '5204', '5209'], //低压柜
                    location: item.location,
                    pageable: {
                        pageNumber: currentList.page,
                        pageSize: this.innerSize,
                    },
                },
            }
            if (this.keyword) {
                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
            }
            // 筛选 配电室之后, location字段上送
            console.log(queryData)
            let res
            try {
                res = await queryDygjcxline(queryData)
            } catch (error) {
                console.log(error)
            }
            // mockData
            // res = require('./mockData').queryDygjcxlineData1
            console.log('=============')
            console.log(res)
            console.log('=============')
            if (!res?.data?.data[0]?.data) {
                return false
            }
            currentList.list = [...currentList.list, ...res.data.data[0].data]
            this.$set(this.list, index, currentList)
            console.log('====================')
            console.log(this.list)
            console.log('====================')
        },

        /**
         * 查询筛选条件
         */
        async getFilterList() {
            let queryData = {
                data: {
                    // page: this.page,
                    // size: this.size,
                    plazaId: this.plazaId,
                },
                postParams: {
                    locflList: ['5201', '5204', '5209'], //低压柜
                    // location: '',
                    // system_code: this.smsxt,
                },
            }
            if (this.smsxt) {
                queryData.postParams.system_code = this.smsxt
            }
            let res = await querySmsLocation(queryData)
            console.log(res)
            if (!res?.data?.data) {
                this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
                return false
            }
            let data = res?.data?.data || []
            data.map((item) => {
                item.text = item.wzjc
                item.active = ''
            })
            console.log(data)
            this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
        },
        /**
         * 显示详情
         */
        showDetail(detail) {
            console.log(detail)
            this.$router.push({ name: 'LowVoltageCabinetDetail', params: { ...detail } })
        },
        /**
         * 点击右侧筛选
         */
        handleRightClick() {
            this.showPopup = true
            // 设置选中的专业系统
        },
        onSearch() {
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         * popup 更改配电室
         */
        changeSwitchRoom(data) {
            let systemList = this.systemList
            systemList.map((item) => {
                item.active = ''
                if (item.location === data.location) {
                    item.active = 'active'
                }
            })
            // 弹窗选中的系统
            this.$set(this.modalDataBak, 'location', data.location)
        },
        /**
         * 重置
         */
        reset() {
            this.modalDataBak = {
                location: '全部',
            }
            this.modalData = {
                location: '全部',
            }
            let { systemList } = this
            systemList.map((item) => {
                item.active = ''
                if (item.text === '全部') {
                    item.active = 'active'
                }
            })
            this.systemList = systemList
            this.showPopup = false
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         * 弹窗确认
         */
        confirm() {
            this.modalData = cloneDeep(this.modalDataBak)
            this.showPopup = false
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         *  初始化数据,查询列表
         */
        initData() {
            // this.finished = false
            // this.loading = false
            this.noDataFlag = false
            this.page = 1
            this.count = 0
            this.list = []
        },
    },
}
</script>
<style lang='less' scoped>
.low-voltage-cabinet {
    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: 100%;
            padding-left: 15px;
            padding-right: 15px;
            margin: 0 auto;
            background: none;
        }
        .van-search__content {
            background: #fff;
            border-radius: 50px;
        }
    }
    // 配电室列表
    .switch-room-container {
        width: 100%;
        // background-color: #fff;
        min-height: 1px;
        max-height: calc(100% - 100px);
        // overflow: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        .switch-room {
            width: 100%;
            position: relative;
            max-height: 300px;
            display: flex;
            background: #fff;
            flex-direction: column;
            // 浅蓝色title
            .title {
                padding: 0 10px;
                color: #025baa;
                height: 45px;
                background: rgba(2, 91, 170, 0.1);
                font-size: 16px;
                font-weight: 500;
                color: #025baa;
                line-height: 45px;
            }
            // 每个配电室出线明细信息
            .info-container {
                width: 100%;
                flex: 1;
                overflow: auto;
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
                padding: 12px 10px;
                // 每个配电室出线明细
                .card {
                    width: 32%;
                    // min-width: calc(33% - 8px);
                    // max-width: calc(33% - 8px);
                    // margin-right: 8px;
                    margin-bottom: 8px;
                    height: 30px;
                    background: #e4e6e7;
                    border-radius: 2px;
                    opacity: 0.74;
                    text-align: center;
                    line-height: 30px;
                }

                // .card:nth-child(3n) {
                //     margin-right: 0;
                // }
                .card:not(:nth-child(3n)) {
                    margin-right: 2%;
                }
                .load-more-container {
                    width: 100%;
                    .load-more {
                        width: 80px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        margin: 10px auto;
                        color: #025baa;
                        background: #e5eef6;
                    }
                }
                .more-list {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    // justify-content: space-between;
                    // padding: 12px 10px;
                    /deep/ .van-list__loading {
                        margin: 0 auto;
                    }
                    /deep/ .van-list__finished-text {
                        width: 100%;
                        margin: 0 auto;
                    }
                }
            }
        }
        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 10px;
            padding: 0 10px;
            background-color: #f5f6f7;
            .divider {
                background: #e6e6e6;
                height: 1px;
                width: 100%;
            }
        }
    }
    // 只有一个出线柜时,样式
    .one-list {
        height: calc(100% - 100px) !important;
        .switch-room {
            max-height: 100% !important;
            // height: 100% !important;
            .load-more {
                margin: 10px auto !important;
            }
        }
    }
    // 空状态
    .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: 55px 20px 10px 20px;
        .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: 100%;
                overflow: auto;
                // 专业系统按钮
                .system-btn-container {
                    display: flex;
                    width: 100%;
                    max-height: calc(100% - 80px);
                    overflow: auto;
                    flex-wrap: wrap;
                    flex-flow: wrap;
                    .system-btn {
                        width: 100% !important;
                        min-width: 100% !important;
                        max-width: 100% !important;
                        // min-height: 40px;
                        height: auto;
                        box-sizing: border-box;
                        padding: 5px 0 !important;
                        .m-btn {
                            width: 100%;
                            font-size: 14px;
                            height: 100%;
                            // height: 32px !important;
                            text-align: center;
                            background: #eff0f1;
                            border-radius: 2px;
                            padding: 5px 0 !important;
                        }
                    }
                }
                .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 {
                    width: 100%;
                    height: 40px;
                    flex: 1;
                    overflow: auto;
                    .system-btn {
                        width: 100% !important;
                        box-sizing: border-box;
                        background: #eff0f1 !important;
                        margin: 10px 0 10px 0;
                        .m-btn {
                            display: block !important;
                            width: 100% !important;
                            height: 32px !important;
                            text-align: center;
                            background: #eff0f1;
                            border-radius: 2px;
                        }
                    }
                }
                .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-around;
                .van-button {
                    width: 40%;
                    height: 100%;
                    max-width: 40%;
                    min-width: 40%;
                }
            }
        }
    }
}
</style>