<template>
    <div class="bgback">
        <div class="headbg">
            <div style="margin:10px 50px 10px 10px;display:flex;justify-content:space-between; height:50px;align-items:center;  ">
                <div style="width:430px;display:flex;justify-content:space-between;align-items:center; ">   
                    <!-- <img @click="tishou"  style="cursor:pointer;height:45px;object-fit:contain" src="/assets/loginreg/logo.png" alt=""> -->
                    <p  @click="tishou" style="font-weight:bold;color: #262626;cursor:pointer;font-size:20px;">
                        <img src="/assets/loginreg/logo1.png" style="width: 20px;vertical-align: middle;" alt="">  关键测试宝
                    </p>
                    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-radio-button type='text' :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group> -->
                    <!-- <p @click='opencollapse' style="cursor:pointer" >展开收齐</p> -->
                    <svg
                        @click='opencollapse'
                        :class="{'is-active':isCollapse}"
                        class="hamburger"
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        width="64"
                        height="64"
                        >
                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
                    </svg>
                    <el-breadcrumb separator="/" style="width:180px">
                        <el-breadcrumb-item v-for='(item,key) of breadcrumblist' :key="key" >{{item.name}}</el-breadcrumb-item>
                        <!-- <el-breadcrumb-item><a href="/"> :to="{ path: item.path }"活动管理</a></el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
                    </el-breadcrumb>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center; font-size:14px; ">
                <!-- <div style="width:300px;display:flex;justify-content:space-between;align-items:center; font-size:14px; "> -->
                    <!-- <div class="permissions" @click="mypermissions('shopping')">
                        <el-badge :value="cartCount" :max="100" :hidden="cartCount==0" :class="cartCount>0?'baggeitem':'baggeitemda'">                    
                            <img style="margin-right:5px" src="/assets/home/gouwuche(1).png" alt="">                        
                        </el-badge>
                        <p style="margin-left:5px">购物车</p>
                    </div> -->
                    <div class="permissions"  @click="mypermissions('message')"> 
                        <el-badge :value="messageCount" :max="100" :hidden="messageCount==0" :class="messageCount>0?'baggeitem':'baggeitemda'">                    
                            <img style="margin-right:5px" src="/assets/home/xiaoxi.png" alt="">                        
                        </el-badge>
                        <p style="margin-left:5px">站内消息</p>
                    </div>
                    <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" placement='bottom'>
                        <div class="avatar-wrapper">
                            <img style="width:54px;height:54px;margin:13px 0 5px 0px;cursor:pointer;border-radius:50%" :src="avatar" alt="">
                            <!-- <i style="margin-bottom:10px"  class="el-icon-caret-bottom"/> -->
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="mypermissions('imembers')">个人中心</el-dropdown-item>
                            <el-dropdown-item divided @click.native="logout">
                                <span>退出登录</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>     
        <div style="display:flex;justify-content:space-between;">     
            <div style="width:225px;position:fixed;margin-top:70px;">     
                <el-menu :default-active="currentactive" class="el-menu-vertical-demo" :collapse="isCollapse" router unique-opened text-color='#000000' active-text-color='#0066EB'>
                     <!--打开关闭导航栏 @open="handleOpen" @close="handleClose" -->
                    <!-- <el-menu-item index="/console">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item> -->
                    <el-submenu index="2">
                        <template slot="title">
                            <!-- <i class="el-icon-s-cooperation"></i> -->
                            <img class='imghd' style="margin-right:10px" src="/assets/personal/suichegongju.png" alt="" >
                            <span slot="title" >工具市场</span>
                        </template>
                        <el-menu-item-group >
                            <el-menu-item index="/console/toolsmarket">
                            <i class="el-icon-s-cooperation"></i>
                            <span>工具市场</span>
                            </el-menu-item>
                            <el-menu-item index="/console/orders">
                                <i class="el-icon-s-order"></i>
                            <span>我的订单</span>
                            </el-menu-item>
                            <!-- <el-menu-item index="/console/cart">
                                <i class="el-icon-shopping-cart-2"></i>
                            <span>我的购物车</span>
                            </el-menu-item> -->
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-finance"></i>
                            <span slot="title">测试管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/console/mytools">
                                <i class="el-icon-c-scale-to-original"></i>
                                <span>我的工具</span>
                            </el-menu-item>
                            <el-menu-item index="/console/mytasks">
                                <i class="el-icon-s-claim"></i>
                            <span>我的任务</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-management"></i>
                            <span slot="title">众包服务</span>
                        </template>
                        <el-menu-item-group>
                            <!-- <span slot="title">分组一</span> -->
                            <el-menu-item index="/console/myparticipate">
                                <i class="el-icon-document-copy"></i>
                                <span>我参与的</span>
                            </el-menu-item>
                            <!-- <el-menu-item index="/console/mycrowd"> -->
                            <el-menu-item v-if="userinform.companyStatus==2" index="/console/myrelease">
                                <i class="el-icon-user"></i>
                                <span>我发布的</span>
                            </el-menu-item>
                            <!-- <el-menu-item v-if="userinform.companyStatus==2" index="/console/pendingtask">
                                <i class="el-icon-notebook-2"></i>
                                <span>待付款任务</span>
                            </el-menu-item> -->
                        </el-menu-item-group>
                    </el-submenu>
                  
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">人才服务</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/console/demand">
                                <i class="el-icon-s-unfold"></i>
                                <span>我要用人</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="/console/account">
                        <i class="el-icon-s-shop"></i>
                        <span slot="title">账户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/console/myBm">
                        <i class="el-icon-chat-line-round"></i>
                        <span slot="title">我的培训班</span>
                    </el-menu-item>
                    <el-menu-item index="/console/myreview">
                        <i class="el-icon-tickets"></i>
                        <span slot="title">我的评价</span>
                    </el-menu-item>
                    <!-- <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-shop"></i>
                            <span slot="title">账户管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/console/accountoverview">
                                <i class="el-icon-s-unfold"></i>
                                <span>账户概览</span>
                            </el-menu-item>
                            <el-menu-item index="/console/transaction">
                                <i class="el-icon-s-order"></i>
                                <span>交易记录</span>
                            </el-menu-item>
                            <el-menu-item index="/console/tranpassword">
                                <i class="el-icon-lock"></i>
                                <span>交易密码</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu> -->
                    
                </el-menu>
            </div>
            <div  class="content-wrapper" :style="[{'padding-left':isCollapse?'100px':'240px'}]">
                <transition name="fade" mode="out-in" >
                    <router-view></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import store from "@/store";
    import {listMyMessageCount} from '@/api/system/message'
    export default{
        data(){
            return{
                isCollapse: false ,
                currentactive:'',
                screenWidth: document.body.clientWidth,
                breadcrumblist:[],//面包屑数组
                messageCount: 0,
                cartCount: 0
            }
        },
        watch:{
            $route:{
                handler(val, old) {
                    let curetoter=val.path.substr(10);
                    this.breadcrumblist=[];
                    if(val.meta.type==1){
                        this.breadcrumblist.push({name:'首页'},{name:val.meta.title}) 
                    }
                    if(val.meta.type==2){
                        this.breadcrumblist.push({name:'工具市场'},{name:val.meta.title}) 
                    }
                    if(val.meta.type==3){
                        this.breadcrumblist.push({name:'测试管理'},{name:val.meta.title}) 
                    }
                    if(val.meta.type==4){
                        this.breadcrumblist.push({name:'众包服务'},{name:val.meta.title}) 
                    } 
                },
                immediate:true
            },
            screenWidth(val){
                // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                if(!this.timer){
                    // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function(){
                        // 打印screenWidth变化的值
                        if(that.screenWidth<1500){
                                that.isCollapse=true
                        }else{
                             that.isCollapse=false
                        }
                        that.timer = false
                    },400)
                }
            },
            count(newVal, oldVal) {
                this.messageCount = newVal;
            },
            cartCountW(newVal, oldVal) {
                this.cartCount = newVal;
            }
        },
        created(){
            if(this.token){
                listMyMessageCount().then(response => {
                    this.messageCount = response.data;
                    this.cartCount = response.cartCount;
                    store.commit('SET_MESSAGECOUNT', this.messageCount);
                    store.commit('SET_CARTCOUNT', this.cartCount);
                })
            }
        },
        computed: {
            ...mapGetters(['token','logindate','avatar','userinform']),
            count() {
                return store.getters.messageCount;　　//需要监听的数据
            },
            cartCountW() {
                return store.getters.cartCount;　//需要监听的数据
            },
        },
        mounted(){
            // this.currentactive=this.$route.path.substr(10);
            this.currentactive=this.$route.path
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            } 
        },
        methods:{
            //logo跳转首页
            tishou(){
                this.$router.push('/')
            },
            //我的功能
            mypermissions(type){
                let currentdata=Date.parse(new Date()); 
                let logindate=this.logindate;
                let timedifference=currentdata-(parseInt(logindate)+432000000);
                if(timedifference>0){
                    this.$confirm('登录状态失效，请您重新登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                    })
                }else{
                    if(type=='message'){
                        this.$router.push('/console/message')
                    }else if(type=='shopping'){
                        this.$router.push('/console/cart')
                    }else if(type=='imembers'){
                        this.$router.push('/console/profile')
                    }
                }
            },
              //退出登录
            logout() {
                this.$confirm('确定退出登录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        // this.$router.push('/')
                        this.$router.push('/login?type=log')
                    })
                })
            },
            //展开收起
            opencollapse(){
                this.isCollapse=!this.isCollapse
            },
            // //打开导航栏
            // handleOpen(key, keyPath) {
            // },
            // //关闭导航栏
            // handleClose(key, keyPath) {
            // },
        },

    }
</script>
<style scoped>
    .bgback{
       /* background-color:#F0F2F5!important;
       background-color: #FFFFFF!important; */
       width:100vw;
       height:100vh;
       
    }
    .headbg{
        /* width:1200px;
        margin:0 auto; */
        width: 100vw;
        position: fixed;
        /* padding:10px 50px 10px 10px; */
        /* display:flex;
        justify-content:space-between;
        align-items:center;     */
        /* height:50px; */
        z-index:99;
        background-color: #FFFFFF;   
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
    }
    .permissions{
        display:flex;
        align-items:center;
        margin-left:10px;
        margin-right: 20px;
        cursor:pointer;
    }
    .avatar-wrapper img:hover{
        opacity:0.5;
        /* transition: 0.3s; */
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width:100%;
        min-height: 400px;
        height:95vh
    }
    .hamburger {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
    }
    .hamburger.is-active {
        transform: rotate(180deg);
    }
    .el-menu--collapse{
        height:92vh
    }
    .content-wrapper{
        padding:100px 20px 0 249px;
        box-sizing: border-box;
        width: 100vw;
        /* background:#666666!important */
    }
    .baggeitem {
        margin-top:5px;
        margin-right:15px;
    }
    .baggeitemda {
        margin-top:5px;
        /* margin-right:10px; */
    }
      .el-dropdown-menu__item{
        padding:0 20px!important;
    }
    .el-dropdown-menu{
        top:56px!important
    }
</style>