<template>
    <div class='other'>
        <div class='other-top'>
            <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
                <img :src='item.id==matterId?item.icon1:item.icon' alt />
                {{item.name}}
            </span>
        </div>
        <div class='other-bottom' v-if='matterId!=1'>
            <div class='other-left'>
                <ul>
                    <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
                        <span class='circle'></span>
                        <span class='hanzi'>{{item.label}}</span>
                    </li>
                </ul>
            </div>
            <!-- 楼层 -->
            <div class='other-right' v-if='matterId!=1'>
                <floor-list v-if='floorData.length>0' :floorsArr='floorData' @emitFloor='emitFloor'></floor-list>
            </div>
            <!-- 图例 -->
            <!-- <div class='legend-boxs' v-if='matterId!=1'>
                <Legend></Legend>
            </div>-->
        </div>
        <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
        <!-- 综合事项管理 -->
        <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
        <!-- 辅助用房管理 -->
        <div class='qtfugl' v-if='matterId==2'>
            <div class='fzyfImg'>
                <img :src='picFloorImg' alt />
            </div>
        </div>
        <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
    </div>
</template>

<script>
import ZhsxOther from './zhsxOther'
import GcfzDialog from './gcfzDialog'
import OtherDialog from './otherDialog'
import { queryPic, queryTab } from '@/api/public.js'
import floorList from '@/components/floorList.vue'
import { matter } from '@/utils/plugins/components.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            matter,
            everySystem: [],
            matterId: 1,
            systemName: '供电系统',
            floorInfo: {
                floorName: 'F1',
                floorId: 'f1'
            },
            picFloor: '',
            picFloorImg: [],
            dialogInfo: {},
            floorData: []
        }
    },
    components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
    methods: {
        tabSyatem(item) {
            this.matterId = item.id
            this.everySystem = item.children
            this.systemName = item.name
        },
        emitFloor(item) {
            console.log(item)
            this.queryPicter(item.gname)
            this.floorInfo = item
            this.picFloor = this.floorInfo.gname
        },
        dialogVisible(item) {
            this.$refs.gcfzDialog.showModal(item)
        },
        queryPicter(floor) {
            this.picFloor = this.$cookie.get('floorNow')
            let getParams = {
                module: '1004',
                floor: floor,
                plazaId: this.$store.state.plazaId
            }
            queryPic({ getParams }).then(res => {
                console.log('库房管理图', res)
                this.picFloorImg = res.data[0].url ? res.data[0].url : ''
                console.log('this.picFloorImg', this.picFloorImg)
            })
        },
        // 查询哪几个楼层有库房图
        tabSize() {
            let data = { plazaId: this.$store.state.plazaId }
            let postParams = [
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f1' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f2' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f3' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f4' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f5' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'f6' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'b1' }
                },
                {
                    tableName: 'glsms_proimgup',
                    params: { module: '1004', floor: 'b2' }
                }
            ]
            queryTab({ data, postParams }).then(res => {
                console.log('查询哪几层楼有图', res)
                this.floorData = []
                let data = res.data.data
                data.forEach(el => {
                    console.log(el)
                    // gcode: "4F"
                    // name: "第4层"
                    // seq: 400
                    if (el.count > 0) {
                        let obj = {
                            gname: el.params.floor,
                            code: el.params.floor.toUpperCase(),
                            gcode: el.params.floor
                                .toUpperCase()
                                .split('')
                                .reverse()
                                .join(''),
                            seq:
                                el.params.floor.substring(1, 2) == 'b'
                                    ? el.params.floor.substring(1, 2) + '00'
                                    : -el.params.floor.substring(1, 2) + '00'
                        }
                        console.log(obj)
                        this.floorData.push(obj)
                    }
                })
                console.log('查询哪几层楼有图', this.floorData)
            })
        }
    },
    computed: {
        ...mapGetters(['floorsArr'])
    },
    mounted() {
        this.everySystem = this.matter[0].children
        // this.queryPicter()
        this.tabSize()
    }
}
</script>
<style lang="less" scoped>
.other {
    background: rgba(242, 245, 247, 1);
    height: 100%;
    overflow: hidden;
    .other-top {
        margin-top: 24px;
        position: fixed;
        text-align: center;
        width: 100%;
        z-index: 2;
        .other-system {
            padding: 12px 23px;
            color: #1f2429;
            background: #fff;
            font-size: 16px;
            cursor: pointer;
            vertical-align: bottom;

            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
                margin-bottom: 3px;
            }
        }
        .isActive {
            color: #025baa;
        }
    }
    .other-bottom {
        display: flex;
        .other-left {
            position: fixed;
            z-index: 2;
            padding-top: 100px;
            color: #646c73;
            font-size: 14px;
        }
        .li-style {
            padding: 0 0 8px 35px;
            cursor: pointer;
            display: flex;
            align-items: center;
            .circle {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                display: inline-block;
                margin-right: 10px;
                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
            }
            .hanzi {
                padding: 10px 2px;
                width: 200px;
                display: inline-block;
                &:hover {
                    color: rgba(2, 91, 170, 1);
                    background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
                }
            }
        }
        .other-right {
            margin-top: 24px;
            flex: 1;
        }
        .legend-boxs {
            position: fixed;
            right: 32px;
            top: 155px;
        }
    }
    .qtfugl {
        .fzyfImg {
            width: 1035px;
            height: 544px;
            margin: 0 auto;
            margin-top: 93px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style> 