<template>

    <el-container class="conatinerPage">
        <el-header height='106px'>
            <mini-head></mini-head>
            <div class="Head">
                <div class="HeadContent">
                    <img class="logo" @click="goNext('index')" src="../assetsPre/logoWhite.png" alt="">
                    <div class="title">
                        {{pageMenu}}
                    </div>

                    <div class="menu">
                        <div class="menu-item" @click="goNext(pageMenu=='个人中心'?'userCenterHome':'userShop')">
                            {{pageMenu}}
                        </div>
                        <div class="menu-item" @click="goNext(pageMenu=='个人中心'?'userSet':'customerServices')">
                            账户设置
                        </div>

                        <i class="el-icon-caret-top sanjiao" :style="{left:nowMenu*100+13+'px'}"></i>
                    </div>

                    <el-input placeholder="请输入内容" v-model="searchKey" class="use-search">
                        <template slot="append">
                            <button @click="search">搜索</button>
                        </template>

                    </el-input>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="order">
                <el-container>
                    <el-aside width="150px" class="aside" v-if="nowMenuList.length>0">
                        <el-menu :default-active="nowStep" class="el-menu-vertical-demo">
                            <el-menu-item :index="item.index" v-for="item in nowMenuList" @click="goNext(item.href)">
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <el-main :style="{paddingLeft:nowMenuList.length>0?'20px':0}">

                        <!-- <el-alert v-if="coveListNum>0&&pageMenu=='商家中心'&&pageName=='商家首页'" :title="'当前有'+coveListNum+'条未读消息，请尽快去客户咨询处回复。'" type="warning" show-icon style='margin-bottom:10px;'>
                        </el-alert> -->

                        <router-view ref='child' @startChat='startChat'></router-view>
                    </el-main>
                </el-container>

            </div>
        </el-main>
        <el-footer height='104px'>
            <logo-foot :isBottom='isBottom'></logo-foot>
        </el-footer>


        <chatContent ref='chatContent'></chatContent>
    </el-container>

</template>

<script>
import miniHead from '../components/MiniHead'
import menuFoot from '../pagesPre/MenuFoot'
import logoFoot from '../pagesPre/LogoFoot'
import { mapState } from 'vuex'
import chatContent from '../pagesPre/ChatContent'
export default {
    name: 'order',
    mounted() {
        if (this.pageMenu == '商家中心') {
            this.$http.get({
                url: '/usersSession/all',
                data: {
                    storeId: this.userInfo.storeInfo.id,
                    type: 0
                }
            }).then(res => {
                if (res.success) {
                    this.$store.commit('updateStoreConversationList', res.data)
                }
            }).catch(e => {
                console.log(e)

            })
        }
    },
    data() {
        return {
            isBottom: false,
            searchKey: '',
            menuList: {
                '个人中心': {
                    '首页': [{
                        name: '订单管理',
                        index: '1',
                        href: 'userOrder'
                    }, {
                        name: '我的收藏',
                        index: '2',
                        href: 'userCollection'
                    }, {
                        name: '我的评价',
                        index: '3',
                        href: 'userComment'
                    }
                        // , {
                        //     name: '我的图库',
                        //     index: '4'
                        // }
                        , {
                        name: '我的积分',
                        index: '6',
                        href: 'memberPoint'
                    }
                    // , {
                    //     name: '我的优惠券',
                    //     index: '5'
                    // }
                    ],
                    '账户设置': [{
                        name: '基本信息',
                        index: '1',
                        href: 'userSet'
                    }, {
                        name: '安全设置',
                        index: '2',
                        href: 'userSafe'
                    }, {
                        name: '认证开店',
                        index: '3',
                        href: 'userCertification'
                    }],
                    '无': []
                },
                '商家中心': {
                    '首页': [{
                        name: '订单管理',
                        index: '1',
                        href: 'shopOrder'
                    }, {
                        name: '店铺管理',
                        index: '2',
                        href: 'userStore'
                    }, {
                        name: '商品管理',
                        index: '3',
                        href: 'userProductCon'
                    }, {
                        name: '店铺评论',
                        index: '4',
                        href: 'storeComment'
                    }, {
                        name: '客户咨询',
                        index: '5',
                        href: 'userChat'
                    }],
                    '账户设置': [{
                        name: '客服管理',
                        index: '1',
                        href: 'customerServices'
                    }],
                    '无': []
                }
            },
            pageName:''
        }
    },
    watch: {
        $route() {
            if (this.pageMenu == '商家中心') {
                this.$http.get({
                    url: '/usersSession/all',
                    data: {
                        storeId: this.userInfo.storeInfo.id,
                        type: 0
                    }
                }).then(res => {
                    if (res.success) {
                        this.$store.commit('updateStoreConversationList', res.data)
                    }
                }).catch(e => {
                    console.log(e)

                })
                this.pageName=this.$route.meta.title
            }
        }
    },
    computed: {
        ...mapState(['userInfo', 'storeConversationList', 'myStoreInfo']),
        pageMenu() {
            var str = '个人中心'
            if (this.$route.meta.pageMenu) {
                str = this.$route.meta.pageMenu
            }
            return str
        },
        nowMenuList() {
            var list = []
            if (this.$route.meta.pageMenu) {
                list = this.menuList[this.$route.meta.pageMenu][this.$route.meta.pageMenu2]
            }
            return list
        },
        nowStep() {
            var step = '0'
            this.nowMenuList.forEach(item => {
                if (item.href == this.$route.name) {
                    step = item.index
                }
            })
            return step
        },
        nowMenu() {
            var menu = 0
            if (this.$route.meta.pageMenu2 == '账户设置') {
                menu = 1
            }
            return menu
        },
        coveListNum() {
            var num = 0
            this.storeConversationList.forEach(item => {
                num += item.amount
            })
            return num
        }
    },
    mounted() {
    },
    methods: {
        goNext(nextName) {
            if (nextName) {
                if (nextName == 'userChat') {
                    window.open(window.location.origin + window.location.pathname + '?storeId=' + this.myStoreInfo.id + '#/storeChat')
                }
                else {
                    this.$router.push({
                        name: nextName,
                    })
                }

            }

        },
        search() {
            if (!this.searchKey) {
                this.$message.warning('搜索内容不能为空！');
                return
            }

            this.$router.push({
                name: 'search',
                query: {
                    searchKey: this.searchKey
                }
            })
        },
         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
            }
        }
    },
    components: {
        miniHead, menuFoot, logoFoot,chatContent
    }
}
</script>

<style lang="less" scoped>
.conatinerPage {
    background: #f9f9f9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1190px;
}
.Head {
    height: 70px;
    background: #0b9ec0;
    box-shadow: 0px 1px 2px 0px rgba(199, 199, 199, 0.5);
    .HeadContent {
        width: 1190px;
        margin: auto;
        height: 70px;
        line-height: 70px;

        img {
            width: 300px;
            height: 54px;
            vertical-align: middle;
            cursor: pointer;
        }

        .title {
            font-size: 20px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
            line-height: 26px;
            padding: 0 15px;
            border-left: 1px solid #fff;
            vertical-align: middle;
            display: inline-block;
            margin-left: 16px;
        }

        .menu {
            display: inline-block;
            line-height: 70px;
            position: relative;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
            margin-left: 78px;

            .menu-item {
                display: inline-block;
                cursor: pointer;
                margin-right: 40px;
            }

            .sanjiao {
                position: absolute;
                font-size: 24px;
                bottom: 0;
                line-height: 8px;
                color: #f9f9f9;
                left: 3px;
                transition: left 0.3s ease-in-out;
            }
        }

        .use-search {
            float: right;
            width: 335px;
            margin-top: 17px;
        }
    }
}

.order {
    width: 1190px;
    margin: 20px auto;
}

.aside {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 10px 0;
}
</style>
