// 头部
Vue.component('template-header', {
    template: `<header class="header">
                    <div class="header-wrap clear-float">
                        <div class="header-logo">
                            <img :src="headerObj.logo" alt="logo">
                        </div>
                        <ul class="header-nav">
                             <li class="header-li" v-for="(nav,index) in headerObj.navs">
                                <a :href="nav.href" :class="{'activeLi':nav.id==item}">{{nav.headerText}}</a>
                             </li>
                        </ul>
                        <div class="header-btn">
                             <button v-if="headerObj.login" class="login-btn">登录</button>
                        </div>
                      </div>
                    </header>`,
    props: {
        'header': {
            type: Object,
        },
        'page':{
          type: Number,
        }
    },
    data:function () {
       return {
          item:this.page,
          headerObj:this.header  
       }
    },
    created:function () {
       console.log(this.item)
        console.log(this.headerObj)
    },
})
// 底部
Vue.component('template-footer', {
    template: `<footer class='footer'>
                       <p>
                           <span>{{footer.recordNumber}}</span>
                           <span>版权所有:{{footer.copyright}}</span>
                        </p>
                   </footer>`,
    props: {
        'footer': {
            type: Object,
        }
    },
})
Vue.component('template-sidebar', {
    template: `<div class="sidebar" :class="[appearSide?'sideAnim':'sideAnim2']">
                        <div v-if='appearSide' class='side-box'>
                            <div @mouseover='hover' class="box-hov">
                               <p class='sidebar-title' style="margin-top: 10px">在线客服</p>
                               <p class="sidebar-qq">
                                 <img src="./images/qq2.png" alt="">
                               </p>
                               <p class="sidebar-wx">
                                 <img   src="./images/wx.png" alt="">
                               </p>
                            </div>
                            <div class='slide-top' @click="goTop">
                               <p class='sidebar-title'>返回顶部</p>
                            </div>
                      </div>
                      <div class="appearSide">
                           <ul>
                              <li>
                                   <p class="sidebar-title">在线咨询</p>
                                    <a :href="'tencent://message/?uin='+sidebar.qq+'&Site=&Menu=yes'" class="sidebar-com" >
                                     <img class='qq' src="./images/qq.png" alt="">
                                     <span class="sidebar-deputy">商户代表:{{sidebar.deputy}}</span>
                                    </a>
                              </li>
                              <li>
                                  <p class="sidebar-title">微信咨询</p>
                                    <div class="sidebar-com">
                                      <img class='wx'  :src="sidebar.wx" alt="">
                                    </div>
                              </li>
                              <li>
                                  <p class="sidebar-title">服务热线</p>
                                    <div class="sidebar-com">
                                       <span class="phone">{{sidebar.phone}}</span>
                                    </div>
                              </li>
                              <li>
                                   <div class="sidebar-wrap">
                                    <div class="sidebar-com">
                                      <img class="com-img" src="./images/sidebar.png" alt="">
                                      <p>官方商城</p>
                                    </div>
                                    <div class="sidebar-com" @click="goTop">
                                      <img class="com-img"  src="./images/sidebarTop.png" alt="">
                                      <p>返回顶部</p>
                                    </div>
                                   </div>
                              </li>
                              <li>
                                    <p class="sidebar-com">返回首页</p>
                              </li>
                           </ul>
                           <img @click="closeSidebar" class="close-sidebar" src="./images/close.png" alt="关闭">
                      </div>

                   </div>`,
    data: function () {
        return {
            appearSide: false,
            scrollTop: 0,
        }
    },
    props: {
        'sidebar': {
            type: Object
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop)
    },
    methods: {
        scrollToTop() {//检测滚动条
            this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
           // console.log(this.scrollTop)
        },
        goTop: function () {
            let timer = null, _that = this;
            cancelAnimationFrame(timer)
            timer = requestAnimationFrame(function fn() {
                if (_that.scrollTop > 0) {
                    _that.scrollTop -= 50;
                    document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
                    timer = requestAnimationFrame(fn)
                } else {
                    cancelAnimationFrame(timer);
                    _that.goTopShow = false;
                }
            })
        },
        closeSidebar: function () {
            var _this = this
            if (this.appearSide) {
                _this.appearSide = !_this.appearSide
            } else {
                _this.appearSide = !_this.appearSide
            }
        },
        hover: function () {
            this.appearSide = !this.appearSide
        }

    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop);
    }
})