<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="3" class="logo">
                <!-- <div class="purchasing-bag"><img :src="logo"/></div> -->
                <!-- <img :src="logoFont" class="purchasing-title"/> -->
								物流配置中心
            </el-col>
            <el-col :span="3">
                <div class="tools" @click.prevent="collapseClick">
                    <i class="fa el-icon-s-fold f20"></i>
                    <!-- <i class="fa el-icon-full-screen f20 pl20" @click.stop="screenfull"></i> -->
                </div>
            </el-col>
            <el-col :span="18" class="dis-flex flex-d">
							<div class="userinfo pl16">
                <el-dropdown trigger="hover">
									<span class="el-dropdown-link userinfo-inner">
										<span>{{ sysUserName }}</span>
											<i class="el-icon-caret-bottom el-icon--right"></i>
											<img :src="user" class="purchasing-bag"/>
									</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="screenfull">
                            <i class="fa el-icon-full-screen f14"/>
                            <span class="f12">全屏查看</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click.native="goHelpCenter">
                            <i class="fa fa-question-circle-o f14" />
                            <span class="f12">帮助中心</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click.native="clearCache">
                            <i class="fa fa-undo f14"/>
                            <span class="f12">清除缓存</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click.native="switchRolesDialog = true" v-if="isMultiRoles">
                            <i class="fa fa-exchange f14"/>
                            <span class="f12">切换角色</span>
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="logout" divided>
                            <i class="fa fa-sign-out f14"/>
                            <span class="f12">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            	</div>
              <!-- <div v-for="(item,index) in topMenu" :key="index" class="pl16 pr16 poi" @click="topClick(item.path)">{{ item.name }}</div> -->
            </el-col>
        </el-col>
        <section>
            <div class="grid-content bg-purple-light">
                <el-col :span="24" class="main">
                    <leftMenu></leftMenu>
                    <div class="content-container">
                        <!-- <topTags></topTags> -->
                        <transition name="fade" mode="out-in" v-if="$route.meta.keepAlive">
                            <keep-alive v-if="isRouteAlive">
                                <router-view>
                                </router-view>
                            </keep-alive>
                        </transition>
                        <transition name="fade" mode="out-in" v-else>
                            <router-view v-if="isRouteAlive">
                            </router-view>
                        </transition>
                    </div>
                </el-col>
            </div>
            <el-dialog title="切换角色" :visible.sync="switchRolesDialog" width="30%" :before-close="dictionaryClose">
                <el-form :model="switchData" label-width="80px" class="demo-form-inline">
                    <el-form-item label="当前角色:" prop="organization" label-width="85px">
                        <el-col :span="10">
                            <span>{{ roleName }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="切换角色:" prop="roleId" v-if="chooseRole">
                        <el-select v-model="roleId" placeholder="请选择角色" auto-complete="off" size="small"
                                   @keyup.enter.native="switchRoles()">
                            <el-option v-for="role in roleList" :key="role.id" :label="role.name"
                                       :value="role.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="切换角色:" prop="roleId" v-if="chooseOrg">
                        <el-select v-model="roleId" placeholder="请选择角色" size="small"
                                   @keyup.enter.native="switchRoles()">
                            <el-option v-for="org in orgList" :key="org.id" :label="org.name"
                                       :value="org.ids"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="85px">
                        <el-button @click="switchRoles" size="mini" type="primary">切换</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </section>
    </el-row>
</template>
<script>
import logo from '@/assets/img/logo1.png'
import logoFont from '@/assets/img/logoFont.png'
import user from '@/assets/img/user.png'
import screenfull from 'screenfull'
import leftMenu from "@/components/leftMenu";
import topTags from "@/components/topTags";

export default {
    data() {
        return {
						user,
            logo: logo,
            logoFont: logoFont,
            collapsed: false,
            sysUserName: '',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            cacheList: [],
            isFullscreen: false,
            isMultiRole: false,
            roleList: [],
            orgList: [],
            chooseRole: false,
            chooseOrg: false,
            roleId: '',
            token: '',
            keySuffix: '',
            roleName: '',
            topMenu: [{name: '运营人员结算', path: '/balance/operationSettlement'},{name: '无运费订单', path: '/balance/noFreightOrder'}, {name: '无成本SKU',path: '/balance/noCostSku'},{name: '物流渠道账单', path: '/logistics/trackingBill'},{name: '导入平台账单', path: '/platformBill/importPlatformBill'},],
            isRouteAlive: true,
            switchRolesDialog: false,
            isMultiRoles: false
        }
    },
    components: {
        leftMenu, topTags
    },
    provide() {
        return {
            reload: this.reload
        }
    },
    computed: {
        // 当前左侧菜单
        getCurSide() {
            let treeData = localStorage.getItem('menuTree') || []
            let currentTreeData = JSON.parse(treeData)
            if (JSON.parse(localStorage.getItem('user')).isPrivateGroup != 'false') {
                currentTreeData[1].children.splice(1, 1)
            }
            return currentTreeData
				},
				dynamicTags() {
            return this.$store.state.global.dynamicTags
        }
    },
    methods: {
        screenfull() {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: 'Your browser does not work',
                    type: 'warning'
                })
                return false
            }
            screenfull.toggle()
            this.isFullscreen = true
        },
        checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
            // to fix : false || undefined == undefined
            if (isFull === undefined) {
                isFull = false
            }
            return isFull
        },
        changePage(tag) {
            this.dynamicTags.map((v) => {
                v.type = 'info'
                if (tag.name === v.name) {
                    v.type = ''
                }
            })
            this.$router.push(tag.path)
        },
        //切换角色
        switchRoles() {
            let that = this;
            let roleData = {
                roleId: that.roleId,
                token: that.token
            };
            that.axios({
                url: "finance/login/roleLogin",
                method: "POST",
                data: roleData
            }).then(res => {
                if (!res.success) {
                    that.$message.error("登录失败!");
                    that.logining = false;
                    return false;
                }
                if (res.module == null) {
                    than.$message.warning('该角色未拥有该系统的任何菜单权限!');
                    return false;
                }
                that.saveMenuInfo(res);
                that.$router.push({name: "index"});
                that.$router.go(0);
                that.switchRolesDialog = false;
            });
        },
        saveMenuInfo(menuInfo) {
            let that = this;
            let info = menuInfo.module;
            localStorage.setItem("menuTree", JSON.stringify(info));
            that.$router.push({name: "index"});
            let roleId = that.roleId;
            let logInfo = {
                roleIds: '',
                orgId: '',
                name: '',
                code: '',
                isRole: false,
                isMultiRole: false,
                roleList: [],
                orgList: []
            };
            if (that.chooseRole) {
                that.roleList.forEach(item => {
                    if (roleId !== item.id) {
                        return;
                    }
                    logInfo.roleIds = roleId;
                    logInfo.name = item.name;
                    logInfo.code = item.code;
                    logInfo.roleList = that.roleList;
                    logInfo.isRole = true;
                });
                if (that.roleList.length > 1) {
                    logInfo.isMultiRole = true;
                }
            } else if (that.chooseOrg) {
                that.orgList.forEach(item => {
                    if (roleId !== item.ids) {
                        return;
                    }
                    logInfo.roleIds = roleId;
                    logInfo.orgId = item.id;
                    logInfo.name = item.name;
                    logInfo.code = item.code;
                    logInfo.orgList = that.orgList;
                });
                if (that.orgList.length > 1) {
                    logInfo.isMultiRole = true;
                }
            }
            localStorage.setItem("logInfo", JSON.stringify(logInfo));
        },
        //退出登录
        logout: function () {
            var _this = this;
            this.$confirm('确认退出吗?', '提示', {
                //type: 'warning'
                // center: true
            }).then(() => {
                localStorage.removeItem('user');
                _this.$store.commit('getTopMenu', []);
                _this.$router.push({name:'login'});
            })
        },
        // 清除缓存
        clearCache: function () {
            let that = this;
            that.axios({
                url: "finance/login/clear/cache",
                method: "post"
            }).then(res => {
                if (res.success) {
                    that.$message.success("清除成功");
                }
            }).catch(() => {
            });

        },
        collapseClick () {
					this.collapsed = !this.collapsed
					// let obj = document.getElementsByClassName("ceiling-pagination")[0]
					// 			console.log(obj)
					// if(obj){
					// 	if(this.collapsed){
					// 		obj.style.cssText="width:calc(100% - 64px)"
					// 	}else{
					// 		obj.style.cssText="width:calc(100% - 180px)"
					// 	}
					// }
					this.$store.commit('collapsedChange', this.collapsed)
				},
				reload () {
					this.isRouteAlive = false
					this.$nextTick (() => {
						this.isRouteAlive = true
					})
				},
				topClick(key){
					this.$router.push(key)
					let isHas = this.dynamicTags.some((item) => {
							return item.path == key
					})
					this.getCurSide.map((item) => {
							item.children.map((v) => {
									if (v.path === key && !isHas) {
											this.dynamicTags.map((m) => {
													return m.type = 'info'
											})
											this.dynamicTags.push(v)
									}
							})
					})
					if (this.dynamicTags.length > 1) {
							this.dynamicTags.map((m) => {
									if (key == m.path) {
											this.$set(m, 'type', '')
									} else {
											this.$set(m, 'type', 'info')
									}
							})
					}
					this.$store.commit('getTopMenu', this.dynamicTags);
				},
				goHelpCenter(){
					let routeData = this.$router.resolve({
						name:'helpCenter',
					});
					window.open(routeData.href, '_blank');
				}
		},
		// created(){
		// 	if(this.$route.path !== '/index/index'){
		// 		this.$router.replace('/index/index')
		// 	}
		// },
    mounted() {
			let that = this;
			var user = localStorage.getItem('user');
			var logInfo = localStorage.getItem('logInfo');
			if (user) {
					user = JSON.parse(user);
					logInfo = JSON.parse(logInfo);
					that.token = user.token;
					that.isMultiRole = logInfo.isMultiRole;
					if (logInfo.isRole) {
							that.chooseRole = true;
							that.roleList = logInfo.roleList;
							if (logInfo.roleList.length > 1) {
									that.isMultiRoles = true;
							}
					} else {
							that.orgList = logInfo.orgList;
							that.chooseOrg = true;
							if (logInfo.orgList.length > 1) {
									that.isMultiRoles = true;
							}
					}
					that.keySuffix = user.account + logInfo.roleIds;
					that.roleName = logInfo.name;
					that.sysUserName = user.name === '' || user.name == null ? user.account : user.name;
					that.sysUserAvatar = user.avatar || '';
			}
			window.onresize = () => {
					if (!this.checkFull()) {
							this.isFullscreen = false
					}
			}
    }
}

</script>

<style scoped lang="less">
@import '../assets/css/variable.less';
.ml {
    margin-left: 5px;
}
.mt {
    margin-top: 5px;
}
.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    font-size: 12px;
    min-width: 1280px;

    .header {
        height: 50px;
        line-height: 50px;
        background: @color-primary;
        color: #fff;
        // min-width:1200px;
        // padding:0 30px;
        box-sizing: content-box;
				.pl16{padding-left: 16px}
				.pr16{padding-right: 16px}
        .purchasing-bag {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            float: left;
            margin-top: 8px;
            background: #fff;
            margin-right: 8px;
        }

        .userinfo {
            text-align: right;
            padding-right: 35px;
            float: right;
            .userinfo-inner {
                cursor: pointer;
                color: #fff;
            }
        }

        .logo {
            font-size: 20px;
            padding-left: 20px;
            padding-right: 20px;

            .purchasing-title {
                // width: 96px;
                float: left;
                margin: 11px 10px 10px 18px;
            }

            .txt {
                color: #fff;
            }
        }

        .logo-collapse-width {
            width: 60px
        }

        .tools {
            padding: 0px 12px;
            width: 14px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            display: flex;
            align-items: center
        }
    }
}
</style>