<template>
    <div class='more-equipment'>
        <!-- 顶部条 -->
        <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
            class='equipment-container'
            :class='{"one-list":list.length === 1}'
            v-model='loading'
            :immediate-check='false'
            :finished='finished'
            @load='onLoad'
            finished-text
        >
            <div class='switch-room' v-for='(item,index) in list' :key='index'>
                <!-- title -->
                <div class='title' v-show='item.data.length'>
                    <span>{{item.classqc}}</span>
                    <span>{{item.count}}</span>
                </div>
                <!-- 第1页 -->
                <div class='info-container'>
                    <van-cell
                        class='info'
                        is-link
                        v-for='detail in item.data.slice(0,4) || []'
                        @click='goToDetail(detail)'
                        :key='detail.classstructureid'
                    >
                        <!-- 使用 title 插槽来自定义标题 -->
                        <template #title>
                            <span class='number'>{{detail.assetnum}}</span>
                            <span class='name'>{{detail.sbjc}}</span>
                        </template>
                        <template #right-icon>
                            <span class='wx' v-if='detail.is_exception'>维修</span>
                            <span class='wb' v-else-if='detail.is_detecting'>维保</span>
                            <van-icon name='arrow' class='arrow-icon' />
                        </template>
                    </van-cell>
                    <!-- 加载更多 -->
                    <div class='load-more' v-show='item.loadMore && item.count>=5' @click='locationLoadMore(item,index)'>加载更多</div>
                    <!-- 后续页面 -->
                    <van-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='没有更多了'
                    >
                        <van-cell is-link class='info' v-for='detail in item.list' @click='goToDetail(detail)' :key='detail.classstructureid'>
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #title>
                                <span class='number'>{{detail.assetnum}}</span>
                                <span class='name'>{{detail.sbjc}}</span>
                            </template>
                            <template #right-icon>
                                <span class='wx' v-if='detail.is_exception'>维修</span>
                                <span class='wb' v-else-if='detail.is_detecting'>维保</span>
                                <van-icon name='arrow' class='arrow-icon' />
                            </template>
                        </van-cell>
                    </van-list>
                </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='changeSystem(item)'>{{item.text}}</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 sbssList.slice(0,4)' :key='index'>
                            <van-button size='small' class='m-btn' :class='item.active' @click='changeSbss(item)'>{{item.text}}</van-button>
                        </div>
                        <div v-if='!loadMore && sbssList.length>4' class='load-more' @click='loadMore= true'>加载更多</div>
                        <div v-if='loadMore'>
                            <div class='system-btn' v-for='(item,index) in sbssList.slice(4)' :key='index'>
                                <van-button size='small' class='m-btn' :class='item.active' @click='changeSbss(item)'>{{item.text}}</van-button>
                            </div>
                        </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' 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 { queryMoreAsset, queryAssetClass, queryEquipmentList } from '@/api/equipmentList'
import { queryPic } from '@/api/public'
import ImagePreview from '@/components/ImagePreview'
import { sleep } from '@/utils/util'
import { cloneDeep, debounce } from 'lodash'
export default {
    name: 'LowVoltageCabinet',
    props: {},
    components: { ImagePreview },
    data() {
        return {
            mock: 2,
            title: '更多设备',
            keyword: '',
            page: 1,
            size: 5,
            innerSize: 10,
            list: [],
            loading: false,
            finished: false,
            showPopup: false,
            systemList: [
                { text: '全部', smsxt: '全部', active: 'active' },
                { text: '供电系统', smsxt: '1001', active: '' },
                { text: '暖通系统', smsxt: '1002', active: '' },
                { text: '消防系统', smsxt: '1003', active: '' },
                { text: '弱电系统', smsxt: '1004', active: '' },
                { text: '给排水系统', smsxt: '1005', active: '' },
                { text: '电梯系统', smsxt: '1006', active: '' },
                { text: '燃气系统', smsxt: '1007', active: '' },
                { text: '土建系统', smsxt: '1008', active: '' },
            ],
            system_code: '', //系统code
            sbss_code: '', //设备设施code
            sbssList: [{ text: '全部', code: '全部', active: 'active' }], //设备设施筛选条件
            loadMore: false, //弹窗中加载更多
            // 弹窗中使用数据
            modalData: {
                system: '',
                sbss: '全部',
            },
            // 弹窗中使用备份数据
            modalDataBak: {
                system: '',
                sbss: '全部',
            },
            noDataFlag: false,
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
    },
    created() {
        this.system_code = this.smsxt
        // 从全局搜索跳转到该页面
        if (this.$route.params.type === 'all') {
            this.system_code = '全部'
        }
        this.onLoad()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        /**
         * 点击右侧筛选
         */
        handleRightClick() {
            this.showPopup = true
            // 设置选中的专业系统
            this.changeSystem({ smsxt: this.system_code })
            this.loadMore = false
            this.sbssList = [{ text: '全部', code: '', active: 'active' }]
        },
        /**
         * 获取设备列表
         */
        async getList() {
            let data = {
                page: this.page,
                size: this.size,
                subPage: 1,
                subSize: 4 || this.innerSize,
                plazaId: this.plazaId,
                onlyMainAsset: true,
            }
            let postParams = {
                system_code: this.system_code,
            }
            // 筛选后,专业系统选择全部, 删除上传system_code的字段
            if (!this.system_code || this.system_code === '全部') {
                delete postParams.system_code
            }
            if (this.sbss_code && this.sbss_code !== '全部') {
                postParams.classstructureid = this.sbss_code
            }
            // keyword
            if (this.keyword) {
                data.keyword = `${this.keyword}:sbjc,assetnum;`
            }
            let res = await queryMoreAsset({ data, postParams })
            if (!res?.data?.data) {
                return false
            }
            res.data.data.map((item, index, arr) => {
                // console.log(item)
                if (item?.count >= 4 || item?.data?.length >= 4) {
                    // console.log(item)
                    arr[index] = {
                        ...item,
                        loadMore: true,
                        loading: true,
                        finished: false,
                        list: [],
                        page: 1,
                        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
        },
        async onLoad() {
            console.log('onload')
            // console.trace('11111')
            if (this.page > 1) {
                await sleep(1000)
            }
            await this.getList()
            this.page++
            this.loading = false
            if (this.list.length >= this.count) {
                this.finished = true
            }
        },

        /**
         * 点击加载更多
         */
        locationLoadMore(item, index) {
            console.log(item, index)
            item.loadMore = false
            this.$set(this.list, index, item)
            this.locationOnLoad(item, index)
        },
        /**
         * 查询一个设备类下的onLoad事件
         */
        async locationOnLoad(data, index) {
            let item = cloneDeep(this.list[index])
            console.log(item)
            if (item.page > 2) {
                await sleep(1000)
            }
            await this.getLocationList({ ...data, 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)
            console.log(this.list[index])
        },
        /**
         * 查询一个设备类下的设备
         */
        async getLocationList(item) {
            // queryEquipmentList
            const { location, index } = item
            let currentList = cloneDeep(this.list[index])
            let queryData = {
                data: {
                    page: currentList.page,
                    size: currentList.size,
                    plazaId: this.plazaId,
                    onlyMainAsset: true,
                },
                postParams: {
                    system_code: this.system_code, // 专业系统
                    classstructureid: currentList.classstructureid,
                },
            }
            if (!this.system_code || this.system_code === '全部') {
                delete queryData.postParams.system_code
            }
            if (this.keyword) {
                queryData.data.keyword = `${this.keyword}:sbjc,assetnum;`
            }
            console.log(item)
            console.log(currentList)
            console.log(queryData)
            let res
            try {
                res = await queryEquipmentList(queryData)
            } catch (error) {
                console.log(error)
            }
            console.log('=============')
            console.log(res)
            console.log('=============')
            if (!res?.data?.data) {
                return false
            }
            if (currentList.page === 1) {
                currentList.list = [...currentList.list, ...res.data.data.slice(4)]
            } else {
                currentList.list = [...currentList.list, ...res.data.data]
            }
            this.$set(this.list, index, currentList)
            console.log('====================')
            console.log(this.list)
            console.log('====================')
        },
        /**
         * 跳转设备详情页
         */
        goToDetail(detail) {
            const { assetid } = detail
            console.log(detail)
            assetid && this.$router.push({ name: 'AssetDetail', query: { assetid } })
        },
        onSearch() {
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         *  初始化数据,查询列表
         */
        initData() {
            this.noDataFlag = false
            this.page = 1
            this.count = 0
            this.list = []
        },
        /**
         * popup 更改系统
         */
        changeSystem(data) {
            console.log(data)
            this.loadMore = false
            let systemList = this.systemList
            systemList.map((item) => {
                item.active = ''
                if (item.smsxt === data.smsxt) {
                    item.active = 'active'
                }
            })
            // 弹窗选中的系统
            this.$set(this.modalDataBak, 'system', data.smsxt)
            this.getSbss(data.smsxt)
        },
        /**
         * popup 更改设备设施
         */
        changeSbss(data) {
            let sbssList = this.sbssList
            sbssList.map((item) => {
                item.active = ''
                if (item.text === data.text && item.code === data.code) {
                    item.active = 'active'
                }
            })
            // 弹窗选中的系统
            this.$set(this.modalDataBak, 'sbss', data.code)
        },
        /**
         * 获取设备设施筛选条件
         * @param smsxt 右弹窗 更改专业系统传递参数
         */
        async getSbss(smsxt) {
            console.log(this.smsxt, this.system_code)
            let getParams = {
                system_code: smsxt || this.smsxt,
            }
            if (smsxt === '全部') {
                delete getParams.system_code
            }
            let resData = await queryAssetClass({ getParams })
            console.log(resData)
            if (!resData && !resData?.data) {
                this.sbssList = [{ text: '全部', code: '全部', active: 'active' }]
                return false
            }
            let res_data = resData.data || []
            let sbssList = []
            res_data.map((item) => {
                sbssList.push({
                    text: item.classqc,
                    active: '',
                    // code: detail.systemqm,
                    code: item.classstructureid,
                })
            })
            this.sbssList = [{ text: '全部', code: '全部', active: 'active' }, ...sbssList]
        },

        /**
         * 重置
         */
        reset() {
            this.modalDataBak = {
                system: '',
                sbss: '全部',
            }
            this.modalData = {
                system: '',
                sbss: '全部',
            }
            this.system_code = this.smsxt
            this.sbss_code = ''
            this.showPopup = false
            // 初始化数据,查询列表
            this.initData()
            if (this.finished) {
                this.finished = false
            } else {
                this.onLoad()
            }
        },
        /**
         * 弹窗确认
         */
        confirm() {
            console.log('confirm')
            this.showPopup = false
            this.modalData = cloneDeep(this.modalDataBak)
            this.system_code = this.modalData.system
            this.sbss_code = this.modalData.sbss
            // 初始化数据,查询列表
            this.initData()
            if (this.finished) {
                this.finished = false
            } else {
                this.onLoad()
            }
        },
    },
}
</script>
<style lang='less' scoped>
.more-equipment {
    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;
        }
    }
    // 配电室列表
    .equipment-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%;
            max-height: 390px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            // 浅蓝色title
            .title {
                padding: 0 15px;
                color: #025baa;
                height: 45px;
                background: rgba(2, 91, 170, 0.1);
                font-size: 16px;
                font-weight: 500;
                color: #025baa;
                line-height: 45px;
                display: flex;
                justify-content: space-between;
            }
            // 每个配电室出线明细信息
            .info-container {
                width: 100%;
                flex: 1;
                overflow: auto;
                // 每个配电室出线明细
                .info {
                }
                .load-more {
                    width: 80px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    margin: 10px auto;
                    color: #025baa;
                    background: #e5eef6;
                }
            }
            /deep/ .van-cell {
                display: flex;
                align-items: center;
                .van-cell__title {
                    display: flex;
                    vertical-align: center;
                    .number {
                        width: 40px;
                        display: flex;
                        align-items: center;
                    }
                    .name {
                        display: flex;
                        align-items: center;
                        padding: 0 10px;
                    }
                }
            }
            .arrow-icon {
                font-size: 16px;
                line-height: inherit !important;
                color: #333333 !important;
            }
            // 维修
            .wx,
            .wb {
                color: #d83931;
                display: inline-block;
                width: 44px;
                margin-right: 10px;
                background: #fbeceb;
                border-radius: 2px;
                text-align: center;
            }
            .wb {
                color: #0481e1;
                background: #e6f3fc;
            }
            // 加载更多
            .load-more {
                width: 80px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                margin: 10px auto;
                color: #025baa;
                background: #e5eef6;
            }
        }
    }
    .one-list {
        height: calc(100% - 100px) !important;
        .switch-room {
            max-height: 100% !important;
            height: 100% !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: auto;
                // 专业系统按钮
                .system-btn-container {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    flex-flow: wrap;
                    .system-btn {
                        width: 50% !important;
                        min-width: 50% !important;
                        max-width: 50% !important;
                        height: 40px;
                        box-sizing: border-box;
                        padding: 10px 10px 10px 0;
                        .m-btn {
                            width: 100%;
                            height: 32px !important;
                            text-align: center;
                            background: #eff0f1;
                            border-radius: 2px;
                        }
                    }
                }
                .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>