<template>
    <div class="container" @scroll="menu" id='container' @resize='getSize'>
        <div style="min-width:1190px">
            <mini-head></mini-head>
            <div style="background-color:#fff;box-shadow: 0px 1px 2px 0px rgba(199, 199, 199, 0.5);">
                <div class="Head">
                    <div class="HeadTop">
                        <img class="logo" @click="goNext('index')" src="../assetsPre/logo.png" alt="">
                        <div class="Head-right">
                            <el-input class="search" v-model="searchKey" placeholder="搜索店铺">
                                <template slot="append">
                                    <button @click="search">搜索</button>
                                </template>
                            </el-input>

                            <div class="shop-enter" @click="goNext('userCertification')">
                                <img src="../assetsPre/shop.png" alt="">
                                <span>入驻接单</span>
                            </div>
                        </div>

                    </div>
                    <div class="HeadBottom">
                        <div class="service-list" @mousemove="showMenu=true" @mouseout="showMenu=false">
                            <div class="name">
                                <span>服务列表</span>
                                <img src="../assetsPre/menu.png" alt="">
                            </div>
                            <transition name='slide-down' v-if="showMenu">
                                <div class="service-content">
                                    <div class="serive-item" v-for="(item,index) in serviceType">
                                        <div class="title">{{item.serviceType}}</div>
                                        <div class="serive-val-list">
                                            <router-link :to='{name:"business",query:{serviceId:(index+1),littleId:todo.id}}' class="service-val" v-for="todo in item.serviceTypeDetailList">{{todo.typeName}}</router-link>
                                        </div>
                                    </div>
                                </div>
                            </transition>

                        </div>

                        <div class="menuList">
                            <router-link id='menuItem0' class="menu-item" :style="{color:nowMenu==0?'#0B9EC0':'#333'}" :to='{name:"index"}'>首页</router-link>
                            <div :id='"menuItem"+(index+1)' v-for="(item,index) in serviceType" class="menu-item" :style="{color:nowMenu==(index+1)?'#0B9EC0':'#333'}" @click="goMenu(index+1)">{{item.shortName}}</div>
                            <!-- <router-link id='menuItem2' class="menu-item" :style="{color:nowMenu==2?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:2}}'>影楼</router-link>
                            <router-link id='menuItem3' class="menu-item" :style="{color:nowMenu==3?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:3}}'>样片</router-link>
                            <router-link id='menuItem4' class="menu-item" :style="{color:nowMenu==4?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:4}}'>营销</router-link>
                            <router-link id='menuItem5' class="menu-item" :style="{color:nowMenu==5?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:5}}'>周边</router-link> -->
                            <div class="menu-line" :style="{left:lineLeft+'px',width:lineWidth+'px'}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <keep-alive exclude="shop,product">
                <router-view ref='child' @showHide='showHide' @startChat='startChat'></router-view>
            </keep-alive>
            <logo-foot :isBottom='false'></logo-foot>
        </div>

        <div class="little-menu">
            <div class="little-item" v-if='hideShow1' @click="showHide({index:1,hide:false})">
                <img src="../assetsPre/newShop.png" style="width:20px;height:18px;" alt="">
                <div>新入驻</div>
            </div>
            <div class="little-item" v-if="hideShow2" @click="showHide({index:2,hide:false})">
                <img src="../assetsPre/newInfo.png" style="width:20px;height:18px;" alt="">
                <div>新订单</div>
            </div>

            <div class="little-item" @click="sendMsg" style="text-align:center">
                <el-badge is-dot :hidden="hasNew==0">
                    <img src="../assetsPre/fankui1.png" style="width:17px;height:18px;" alt="">
                    <div>咨询</div>
                </el-badge>
            </div>
            <!-- <div class="little-item">
                <img src="../assetsPre/fankui2.png" style="width:20px;height:20px;" alt="">
                <div>反馈</div>
            </div> -->
            <div class="little-item" @click="goTop">
                <img src="../assetsPre/fankui3.png" style="width:24px;height:20px;" alt="">
            </div>
        </div>

        <chatContent ref='chatContent'></chatContent>

    </div>
</template>

<script>
import logo from '../components/Logo'
import { mapState } from 'vuex'
import logoFoot from '../pagesPre/LogoFoot'
import miniHead from '../components/MiniHead'
import chatContent from '../pagesPre/ChatContent'
import eventBus from '../eventBus'
export default {
    name: 'App',
    created() {
        eventBus.$on('receiveMessage', this.onReceiveMessage)
        setTimeout(() => {

            console.log(this.$route.name)
            if (this.$route.name == 'index') {
                this.nowMenu = 0
                this.isBottom = false
            } else if (this.$route.name == 'business') {
                this.nowMenu = parseInt(this.$route.query.serviceId)
                this.isBottom = true
            } else {
                this.nowMenu = -1
                this.isBottom = true
            }

            if (this.hrefHistory.length > 0) {
                this.nowMenu = 0
            }

            if (this.hrefHistory.length > 1) {
                if (this.hrefHistory[1].href == 'business') {
                    this.serviceType.forEach((item, index) => {
                        console.log(this.hrefHistory[1].name, item.shortName)
                        if (item.shortName == this.hrefHistory[1].name) {
                            this.nowMenu = index + 1
                        }
                    })
                }
            }



            console.log(this.nowMenu)





            var length = -2
            for (var i = 0; i < this.nowMenu; i++) {
                if (document.getElementById('menuItem' + i)) {
                    length += document.getElementById('menuItem' + i).offsetWidth + 36
                }
            }
            this.lineLeft = length
        }, 500)
    },
    mounted() {



    },
    data() {
        return {
            showMenu: false,
            nowMenu: 0,
            searchKey: '',
            lineLeft: -2,
            isBottom: false,
            hideShow1: false,
            hideShow2: false
        }
    },
    beforeDestroy() {
        eventBus.$off('receiveMessage', this.onReceiveMessage)
    },
    computed: {
        ...mapState(['userInfo', 'serviceType', 'conversationList', 'IMConnected', 'myStoreInfo']),
        lineWidth() {
            var width = 40
            if (document.getElementById('menuItem' + this.nowMenu)) {
                width = document.getElementById('menuItem' + this.nowMenu).offsetWidth + 4
            }

            if (this.nowMenu === -1) {
                width = 0
            }

            return width
        },
        hrefHistory() {
            var list = []
            var breHrefs = []
            if (this.$route.query.breHref) {
                breHrefs = this.$route.query.breHref.split('_;')
            }

            breHrefs.forEach(item => {
                if (item) {
                    var jsonp = {
                        name: item.split(',')[0],
                        href: item.split(',')[1]
                    }
                    list.push(jsonp)
                }
            })
            return list
        },
        routeName() {
            return this.$route.name
        },
        hasNew() {
            var num = 0
            this.conversationList.forEach(item => {
                num += item.amount
            })
            return num
        }
    },
    methods: {
        showHide(style){
            console.log(style)
            if(style.index==1){
                this.hideShow1=style.hide
                this.$refs.child.hideShow1=style.hide
            }
            else{
                 this.hideShow2=style.hide
                 this.$refs.child.hideShow2=style.hide
            }
        },
        search() {
            if (!this.searchKey) {
                this.$message.warning('搜索内容不能为空！');
                return
            }

            this.$router.push({
                name: 'search',
                query: {
                    searchKey: this.searchKey
                }
            })
        },
        menu() {
            this.$refs.child.scrollMenu()
        },
        getSize() {
            console.log('bvbbbbbbbbb')
        },
        goTop() {
            document.getElementById('container').scrollTop = 0
        },
        goMenu(index) {
            this.$router.replace({
                name: "business",
                query: {
                    serviceId: index
                }
            })
        },
        goNext(str) {
            this.$router.push({
                name: str
            })
        },
        onReceiveMessage(message) {
            this.$http.get({
                url: '/usersSession/all',
                data: {
                    userId: this.userInfo.id,
                    type: 1
                }
            }).then(res => {
                if (res.success) {
                    this.$store.commit('updateConversationList', res.data)
                }
            })

        },
        sendMsg() {
            if (!this.userInfo) {
                this.$router.push({
                    name: 'login'
                })
            }
            else if (this.userInfo.storeFlag == 'Y') {
                window.open(window.location.origin + window.location.pathname + '?storeId=' + this.myStoreInfo.id + '#/storeChat')
            }
            else {
                this.$refs.chatContent.showBox = true
                this.$refs.chatContent.isLeft = true
                this.$refs.chatContent.storeId = 0
                this.$refs.chatContent.canBack = true
            }

        },
        startChat(id) {
            if (!this.userInfo) {
                this.$router.push({
                    name: 'login'
                })
            }
            else {
                this.$refs.chatContent.showBox = true
                this.$refs.chatContent.storeId = id
                this.$refs.chatContent.getChatInfo(id)
                this.$refs.chatContent.canBack = false
            }
        }
    },
    watch: {
        $route() {
            if (this.$route.name == 'index') {
                this.nowMenu = 0
                this.isBottom = false
            }
            else if (this.$route.name == 'business') {
                this.nowMenu = parseInt(this.$route.query.serviceId)
                this.isBottom = true
            }
            else {
                this.nowMenu = -1
                this.isBottom = true
            }

            if (this.hrefHistory.length > 0) {
                this.nowMenu = 0
            }

            if (this.hrefHistory.length > 1) {
                if (this.hrefHistory[1].href == 'business') {
                    this.serviceType.forEach((item, index) => {
                        console.log(this.hrefHistory[1].name, item.shortName)
                        if (item.shortName == this.hrefHistory[1].name) {
                            this.nowMenu = index + 1
                        }
                    })
                }
            }



            var length = -2
            for (var i = 0; i < this.nowMenu; i++) {
                if (document.getElementById('menuItem' + i)) {
                    length += document.getElementById('menuItem' + i).offsetWidth + 36
                }
            }
            this.lineLeft = length
            document.getElementById('container').scrollTop = 0
        }
    },
    components: {
        logo, logoFoot, miniHead, chatContent
    }
}
</script>

<style lang="less" scoped>
.container {
    background: rgba(249, 249, 249, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.Head {
    // overflow: hidden;
    width: 1196px;
    margin: auto;
    background-color: #fff;

    .HeadTop {
        overflow: hidden;
        padding: 32px 0 30px;
        .logo {
            float: left;
            width: 300px;
            height: 54px;
            cursor: pointer;
        }

        .Head-right {
            float: right;
            margin: 7px 0 4px;

            .shop-enter {
                width: 105px;
                height: 45px;
                background: rgba(254, 168, 60, 1);
                float: left;
                margin-left: 5px;
                cursor: pointer;
                img {
                    width: 19px;
                    height: 19px;
                    display: block;
                    float: left;
                    margin: 13px 5px 14px 12px;
                }
                span {
                    font-size: 14px;
                    font-family: MicrosoftYaHei-Bold;
                    color: rgba(255, 255, 255, 1);
                    line-height: 45px;
                    font-weight: bold;
                }
            }
        }

        .search {
            float: left;
            width: 681px;
            height: 45px;

            button {
                width: 100%;
                color: #fff;
                font-size: 14px;
                cursor: pointer;
            }
        }
    }
    .HeadBottom {
        // overflow: hidden;
        height: 40px;
        .service-list {
            width: 220px;
            height: 40px;
            position: relative;
            float: left;
            .name {
                width: 220px;
                height: 40px;
                background: rgba(26, 205, 225, 1);
                background: linear-gradient(112.5deg, rgba(26, 205, 225, 1), rgba(11, 158, 192, 1));
                cursor: pointer;
                span {
                    font-size: 16px;
                    font-family: MicrosoftYaHei-Bold;
                    color: rgba(255, 255, 255, 1);
                    line-height: 40px;
                    font-weight: bold;
                    margin-left: 12px;
                    float: left;
                }

                img {
                    width: 17px;
                    height: 15px;
                    float: right;
                    margin: 14px 12px;
                }
            }
            .service-content {
                position: absolute;
                top: 40px;
                left: 0;
                background: #f1f7fe;
                padding: 0 14px 10px 10px;
                width: 196px;
                z-index: 500;

                .serive-item {
                    .title {
                        font-size: 12px;
                        font-family: MicrosoftYaHei;
                        color: rgba(51, 51, 51, 1);
                        line-height: 16px;
                        margin-top: 12px;
                    }

                    .serive-val-list {
                        padding-bottom: 12px;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-flex-wrap: wrap;
                        -webkit-box-lines: multiple;
                        -moz-flex-wrap: wrap;
                        flex-wrap: wrap;
                        a {
                            font-size: 12px;
                            font-family: MicrosoftYaHei;
                            color: rgba(102, 102, 102, 1);
                            line-height: 16px;
                            margin-top: 6px;
                            text-decoration: none;
                            padding: 0 5px;
                        }
                    }

                    &:not(:last-child) {
                        border-bottom: 1px solid rgba(223, 237, 236, 1);
                    }
                }
            }
        }

        .menuList {
            float: left;
            margin-left: 78px;
            position: relative;
            font-size: 0;

            .menu-item {
                margin-right: 36px;
                font-size: 18px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 40px;
                font-weight: bold;
                display: inline-block;
                cursor: pointer;
            }

            .menu-line {
                width: 40px;
                height: 7px;
                background: rgba(11, 158, 192, 1);
                transition: all 0.3s ease-in-out;
                position: absolute;
                bottom: 0;
                left: -2px;
            }
        }
    }
}

.little-menu {
    position: fixed;
    right: 0px;
    bottom: 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(234, 234, 234, 1);
    cursor: pointer;
    z-index: 999;
    .little-item {
        padding: 8px 11px 8px;
        &:not(:last-child) {
            border-bottom: 1px solid rgba(234, 234, 234, 1);
        }

        img {
            display: block;
            margin: auto;
        }

        div {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            margin-top: 4px;
            text-align: center;
        }
    }
}
</style>
