

<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' @focus='focus'>
                <!-- TODO: 空状态 自定义图标 -->
                <!-- <template #action>
                <div class='search' @click='onSearch'>搜索</div>
                </template>-->
            </van-search>
        </div>
        <!-- 设备列表 -->
        <div class='equipment-list' v-if='list.length'>
            <van-list v-model='loading' :finished='finished' finished-text='没有更多了' :offset='20' :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.classstructureid'>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class='number'>{{item.classstructureid}}</span>
                        <span class='name'>{{item.sbjc}}</span>
                    </template>
                    <template #right-icon>
                        <span class='wx' v-if='item._type === "维修"'>维修</span>
                        <span class='wb' v-else-if='item._type === "维保"'>维保</span>
                        <van-icon 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>

        <!-- 点击头部筛选,出现的右侧弹窗 -->
        <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>
                    <!-- TODO: 1 -->
                    <div class='system-btn-container'>
                        <div class='system-btn' v-for='(item,index) in sbssList.slice(0,3)' :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>3' class='load-more' @click='loadMore= true'>加载更多</div>
                        <div v-if='loadMore'>
                            <div class='system-btn' v-for='(item,index) in sbssList.slice(3)' :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>
    </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 { queryEquipmentList, queryAssetClass } from '@/api/equipmentList'
import { sleep } from '@/utils/util'
import { cloneDeep } from 'lodash'
export default {
    name: 'EngineRoomPicture',
    props: {},
    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: '' },
            ],
            system_code: '', //系统code
            sbss_code: '', //设备设施code
            sbssList: [{ text: '全部', code: '全部', active: 'active' }], //设备设施筛选条件
            loadMore: false,
            // 弹窗中使用数据
            modalData: {
                system: '',
                sbss: '全部',
            },
            // 弹窗中使用备份数据
            modalDataBak: {
                system: '',
                sbss: '全部',
            },
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
    },
    components: {},
    created() {
        this.system_code = this.smsxt
        let { title, category_code } = this.$route.params
        this.title = title
        this.category_code = category_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' }]
            // 查询筛选条件的 设备设施
            this.getSbss()
        },
        /**
         * 获取设备列表
         */
        async getList() {
            console.log('getList')
            let data = {
                page: this.page,
                size: this.size,
                plazaId: this.plazaId,
                onlyMainAsset: true,
            }

            let postParams = {
                system_code: this.system_code,
                category_code: this.category_code,
            }
            // 筛选后,专业系统选择全部, 删除上传system_code的字段
            if (!this.system_code || this.system_code === '全部') {
                delete postParams.system_code
            }
            // TODO:  筛选后, 使用classstructureid字段,删除category_code字段
            if (this.sbss_code) {
                this.sbss_code !== '全部' && (data.classstructureid = this.sbss_code)
                delete postParams.category_code
            }
            // TODO: keyword
            if (this.keyword) {
                data.keyword = `${this.keyword}:sbjc,assetnum;`
            }
            let resData = await queryEquipmentList({ data, postParams })
            if (!resData && !resData?.data) {
                return false
            }
            let res_data = resData.data?.data || []
            res_data.map((item) => {
                item._type = '正常'
                // 检测中
                if (item.is_detecting) {
                    item._type = '维保'
                }
                // 异常
                if (item.is_exception) {
                    item._type = '维修'
                }
            })
            this.list = this.list.concat(res_data)
            this.count = resData.data?.count
            // console.log(JSON.stringify(res_data, null, 2))
        },
        async onLoad() {
            console.log('onload')
            if (this.page > 1) {
                await sleep(1000)
            }
            await this.getList()
            this.page++
            this.loading = false
            if (this.list.length >= this.count) {
                this.finished = true
            }
        },
        /**
         * 搜索
         */
        onSearch() {
            // 初始化数据,查询列表
            this.initData()
            this.onLoad()
        },
        focus() {
            console.log(1123123123123)
        },
        /**
         *  初始化数据,查询列表
         */
        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)
            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'
                }
            })
            // 弹窗选中的系统
            // TODO: 111
            console.log(data)
            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()
            this.onLoad()
        },
        /**
         * 弹窗确认
         */
        confirm() {
            this.modalData = cloneDeep(this.modalDataBak)
            this.showPopup = false
            this.system_code = this.modalData.system
            this.sbss_code = this.modalData.sbss
            // 初始化数据,查询列表
            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>