<template>
    <!-- ios头部padding适配 -->
    <div id='app'>
        <div id='fengMap' class='fengMap'></div>
        <!-- 顶部navbar -->
        <NarBar class='nav-bar' v-if='!$route.meta.hideNarBar' />
        <!-- <div class='container'> -->
        <keep-alive>
            <router-view v-if='$route.meta.keepAlive' />
        </keep-alive>
        <router-view v-if='!$route.meta.keepAlive' />
        <!-- </div> -->
        <!-- 底部tabbar -->
        <van-tabbar v-show='$route.meta.showTabbar' class='tabber' v-model='active' :fixed='true' @change='changeTabbar'>
            <van-tabbar-item>
                <span>项目概况</span>
                <template #icon='props'>
                    <!-- style='color:#ffffff;background-color:#1989fa' -->
                    <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' />
                    <!-- <i v-if='props.active' class='iconfont wanda-xiangmugaikuang' style='color:red;background:blue' /> -->
                    <i v-else class='iconfont wanda-xiangmugaikuang'></i>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>楼层功能</span>
                <template #icon='props'>
                    <i v-if='props.active' class='iconfont wanda-floor-func-active' />
                    <i v-else class='iconfont wanda-louceng1'></i>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>设备设施</span>
                <template #icon='props'>
                    <i v-if='props.active' class='iconfont wanda-sbss-active' />
                    <i v-else class='iconfont wanda-shebeisheshi1'></i>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>其他事项</span>
                <template #icon='props'>
                    <i v-if='props.active' class='iconfont wanda-other' />
                    <i v-else class='iconfont wanda-qita1'></i>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { SFengParser } from '@saga-web/feng-map'
import { setFloor } from '@/api/public.js'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar).use(TabbarItem)
import store from './store/index'
import NarBar from './components/Navbar'
import { osInfo } from './utils/util'
window.fengmapData = null
export default {
    name: 'App',
    props: {},
    components: { NarBar },
    data() {
        return {
            active: 0,
            // 路由字典
            routeDict: {
                0: 'Overview',
                1: 'FloorFunc',
                2: 'EquipmentFacilities',
                3: 'OtherMatter',
            },
            // appTitle字典
            titleDict: {
                0: '管理说明书',
                1: '楼层功能',
                2: '设备设施',
                3: '其他事项',
            },
            isIOS: false, //是否是IOS
            key: '23f30a832a862c58637a4aadbf50a566',
            appName: '万达可视化系统',
            mapServerURL: `http://map.wanda.cn/editor`,
            mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
        }
    },
    beforeMount() {},
    created() {
        // window.vm = this
        this.handleUrl()
        // store.commit('SETSSOTOKEN', 'admin:liujiandong')
        // console.log(window.location.href)
        this.SETHAVEFENGMAP(false)
        // 判断 安卓,ios
        const { os } = osInfo()
        if (os === 'iOS') {
            this.isIOS = true
        } else {
            this.isIOS = false
        }
        // 获取楼层列表
        this.getFloorList()
        console.log('over')
    },
    mounted() {
        // console.log('环境变量', process.env.VUE_APP_RealEnv)
        if (this.plazaId) {
            this.getFengMap()
            store.dispatch('getBrand')
        } else {
            window.fengmapData = null
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'fmapID']),
    },
    methods: {
        ...mapActions(['getfmapID', 'getFloors']),
        ...mapMutations(['SETHAVEFENGMAP', 'SETCATEGORYID', 'SETSMSXT', 'SETSSOTOKEN', 'SETPLAZAID']),
        getFengMap() {
            this.getfmapID().then(() => {
                this.getMap()
            })
        },
        getMap() {
            window.fengmapData = new SFengParser(
                'fengMap',
                `${this.mapServerURL}/fmap/${this.fmapID}`,
                this.key,
                this.appName,
                null,
                this.mapthemeUrl
            )
            if (this.fmapID.includes('null')) {
                this.SETHAVEFENGMAP(0)
            }
            window.fengmapData.loadMap(this.fmapID, (a, b) => {
                const dataArr = b.map((item) => {
                    return item.gname
                })
                // 获取主题数据
                window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then((res) => {
                    this.SETHAVEFENGMAP(1)
                })
                // 缓存楼层数据
                if (dataArr.length) {
                    setFloor({ plazaId: this.plazaId }, dataArr)
                        .then((res) => {
                            // console.log('缓存楼层', res)
                        })
                        .catch((error) => {
                            // console.log('缓存楼层', error)
                        })
                }
            })
        },
        // 路由更改
        changeTabbar(active) {
            // console.log(active)
            if (active == 1) {
                this.SETCATEGORYID('LCGN')
                this.SETSMSXT('')
            }
            this.$router.push({ name: this.routeDict[active] })
            store.commit('SETAPPTITLE', this.titleDict[active])
        },
        /**
         * 查询楼层列表
         */
        getFloorList() {
            this.getFloors()
        },
        /**
         * 处理url参数
         */
        handleUrl() {
            let url = window.location.href
            let params = this.queryURLParams(url)
            console.log('%c 路径参数:', 'color:blue')
            console.log(params)
            let { username, plazaId } = params
            if (username) {
                this.SETSSOTOKEN(`admin:${username}`)
            }
            if (plazaId) {
                //  设置广场
                this.SETPLAZAID(plazaId)
            }
        },
        /**
         * 查询url参数
         */
        queryURLParams(url) {
            let obj = {}
            url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value))
            url.replace(/#([^?=&#]+)/g, (_, hash) => (obj['HASH'] = hash))
            return obj
        },
    },
    watch: {
        plazaId(plazaId) {
            // console.log('项目id', plazaId)
            window.fengmapData = null
            // 当获取到到项目id,请求底图
            if (plazaId) {
                // 请求该项目下的楼层数据
                this.getFengMap()
                store.dispatch('getBrand')
            } else {
                window.fengmapData = null
            }
        },
    },
}
</script>
<style lang="less">
@import './style/common.less';
.ios-padding {
    // padding-top: 15px;
    box-sizing: border-box;
}
// navbar高度
.nav-bar {
    width: 100%;
    height: 50px;
    /deep/.van-nav-bar {
        height: 100%;
    }
}
.fengMap {
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: -1;
    opacity: 0;
}
// .container {
//     height: calc(100% - 105px);
//     background-color: #aaa;
// }
.tabber {
    height: 50px;
    //
    /deep/ .van-tabbar-item--active {
        color: #025baa !important;
        i {
            color: #025baa !important;
        }
    }
}
</style>
