

<template>
    <div class='equipment-page'>
        <!-- 顶部条 -->
        <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>
        <!-- 设备列表 -->
        <div class='equipment-list' v-if='list.length'>
            <van-list v-model='loading' :finished='finished' finished-text='没有更多了' :offset='100' :immediate-check='false' @load='onLoad'>
                <!-- <van-cell v-for='item in list' :key='item' :title='item' /> -->
                <van-cell is-link v-for='item in list' :key='item.wzjm'>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class='name'>{{item.wzjc}}</span>
                    </template>
                    <template #right-icon>
                        <span @click='showPhoto(item)'>{{item.photos_num}}张</span>
                        <van-icon @click='showPhoto(item)' name='arrow' class='arrow-icon' />
                    </template>
                </van-cell>
            </van-list>
        </div>
        <!-- 无数据 -->
        <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>
        <!-- 预览照片 -->
        <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
        <!-- 点击头部筛选,出现的右侧弹窗 -->
        <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='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 { querySmsLocation } from '@/api/equipmentList'
import { queryPic } from '@/api/public'
import ImagePreview from '@/components/ImagePreview'
import { sleep } from '@/utils/util'
import { cloneDeep } from 'lodash'
export default {
    name: 'EngineRoomPicture',
    props: {},
    components: { ImagePreview },
    data() {
        return {
            title: '机房平面布置图',
            keyword: '',
            page: 1,
            size: 20,
            list: [],
            loading: false,
            finished: false,
            category_code: '',
            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: '' },
            ],
            showImgPreview: false, //是否展示图片预览
            imgKey: new Date().getTime(),
            imgList: [],
            system_code: '', //系统code,右弹窗使用
            // 弹窗中使用数据
            modalData: {
                system: '',
            },
            // 弹窗中使用备份数据
            modalDataBak: {
                system: '',
            },
            globalFlag: false, //是否是从全局搜索进入的
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
    },

    created() {
        const { type } = this.$route.params
        this.globalFlag = Boolean(type)
        console.log(this.globalFlag)
        if (this.globalFlag) {
            this.system_code = '全部'
        } else {
            this.system_code = this.smsxt
        }
        this.onLoad()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        /**
         * 点击右侧筛选
         */
        handleRightClick() {
            this.showPopup = true
            // 设置选中的专业系统
            this.changeSystem({ smsxt: this.system_code })
        },
        /**
         * 获取设备列表
         */
        async getList() {
            let data = {
                plazaId: this.plazaId,
                page: this.page,
                size: this.size,
            }
            let postParams = {
                system_code: this.smsxt,
                photosNumGte: 1, //查询数量大于等于1的
            }
            // 搜索 设备间名称
            if (this.keyword) {
                data.keyword = `${this.keyword}:wzjc;`
            }
            // 右弹窗选择专业之后
            if (this.system_code && this.system_code !== '全部') {
                postParams.system_code = this.system_code
            } else if (this.system_code === '全部') {
                postParams = {}
            }
            let res = await querySmsLocation({ data, postParams })
            console.log(res.data)
            if (!res.data || !res.data?.data) {
                this.list = []
                return false
            }
            let resData = res.data.data || []
            console.log(resData)
            this.list = this.list.concat(resData)
            this.count = res.data.count || 0
        },
        async onLoad() {
            if (this.page > 1) {
                await sleep(1000)
            }
            await this.getList()
            // list无数据,不执行后续分页查询
            if (!this.list.length) {
                this.finished = true
                return true
            }
            this.page++
            this.loading = false
            if (this.list.length >= this.count) {
                this.finished = true
            }
        },
        /**
         * 显示图片
         */
        async showPhoto(data) {
            this.imgKey = `img${new Date().getTime()}`
            let getParams = {
                module: '1002', // 设备设施
                plazaId: this.plazaId,
                typename: '位置布置图',
                system: data.system_code,
                location: data.location,
            }
            let res = await queryPic({ getParams })
            if (!res?.data) {
                this.imgList = []
                return false
            }
            let imgList = []
            res.data.map((item) => {
                imgList.push(item.url)
            })
            this.imgList = imgList
            imgList.length && (this.showImgPreview = true)
        },
        /**
         * 搜索
         */
        onSearch() {
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         *  初始化数据,查询列表
         */
        initData() {
            this.finished = false
            this.page = 1
            this.count = 0
            this.list = []
        },
        /**
         * popup 更改系统
         */
        changeSystem(data) {
            console.log(data)
            let systemList = this.systemList
            systemList.map((item) => {
                item.active = ''
                if (item.smsxt === data.smsxt) {
                    item.active = 'active'
                }
            })
            // 弹窗选中的系统
            this.$set(this.modalDataBak, 'system', data.smsxt)
        },
        /**
         * 重置
         */
        reset() {
            this.modalDataBak = {
                system: '',
            }
            this.modalData = {
                system: '',
            }
            this.system_code = this.smsxt
            if (this.globalFlag) {
                this.system_code = '全部'
            }
            this.showPopup = false
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        /**
         * 弹窗确认
         */
        confirm() {
            this.modalData = cloneDeep(this.modalDataBak)
            this.showPopup = false
            this.system_code = this.modalData.system
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
    },
}
</script>
<style lang='less' scoped>
.equipment-page {
    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;
        }
    }
    // 设备列表
    .equipment-list {
        width: 100%;
        padding: 0 10px;
        background-color: #fff;
        min-height: 1px;
        max-height: calc(100% - 100px);
        overflow: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        /deep/ .van-cell {
            display: flex;
            align-items: center;
            .van-cell__title {
                display: flex;
                vertical-align: center;
                .number {
                    width: 35px;
                    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;
        }
    }
    // 空状态
    .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>