<template>
    <section>
        <div class="slide-bar">
            <div class="customer-service" @click="recordFn" v-if="kefuishow">
                <i class="iconfont icon-kefu"></i>
            </div>
            <template v-if="isWindow">
                <div class="backtop" v-backTopWindow v-show="show">
                    <i class="iconfont icon-xiangshang1"></i>
                </div>
            </template>
            <template v-else>
                <div class="backtop" v-backTop v-show="show">
                    <i class="iconfont icon-xiangshang1"></i>
                </div>
            </template>

        </div>
        <!--客服弹出框-->
        <van-dialog v-model="flag" :showConfirmButton="showButton" :showCancelButton="showButton" :closeOnClickOverlay="closeOnClickOverlay">
            <div class="van-dialog__message">
                <div class="kefu">
                    <p class="t0">
                        <i class="iconfont icon-kefu"></i>
                    </p>
                    <p class="t1">
                        <a href="tel:0755-88914841" class="but-blue">国内服务电话：0755-88914841</a>
                    </p>
                    <p class="t2">
                        <a target="_blank" @click="customsrService" :href="phpParams.kfqq_xk" data-href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzgwMDE1ODQzMl80ODY0NDVfODAwMTU4NDMyXzJf" data-ptag="right-layer" class="but-white kefuio kefuioxk">
                            <i class="icon iconfont icon-qq"></i>客服QQ
                        </a>
                    </p>
                </div>
            </div>
        </van-dialog>
    </section>
</template>

<script>

  import {mapState} from 'vuex'
  import Vue from 'vue';
  import {Dialog} from 'vant';

  Vue.use(Dialog);

  export default {
    name: 'sidebar',
      props: {
          kefuishow:{
              type: Boolean,//是否展示客服
              default: true
          },
          isWindow:{
              type: Boolean,//是否开启windows监听
              default: false
          }

      },
    data() {
      return {
        flag: false,
        show: false,
        showButton: false,
        closeOnClickOverlay: true
      }
    },
    computed: mapState({
      phpParams: state => state.common.phpParams,
    }),
    mounted() {
        if(this.isWindow){
            this.scrollFnWindow();
        }else{
            this.scrollFn();

        }

    },
    methods: {
      customsrService() {
        this.$store.dispatch({
          type: 'customsrService'
        })
      },
      //弹性布局监听不到window
      scrollFnWindow(){
          var self=this;
          window.onscroll= function(){
              var t = document.documentElement.scrollTop||document.body.scrollTop;
              if(t>=300){
                  self.show=true;
              }else{
                  self.show=false;
              }
          }
      },
      scrollFn() {
        var obj = document.querySelector('.container-wrap'), self = this;
        obj.onscroll = function () {
          var t = document.querySelector('.container-wrap').scrollTop;
          if (t >= 300) {
            self.show = true;
          } else {
            self.show = false;
          }
        }
      },
      recordFn() {
        this.flag = true;
        this.$store.dispatch({
          type: 'getCommonParams'
        })
        try {
          sensors.track('RNavClick', {
            right_nav_click: "h5-客服"
          });
        } catch (e) {
          
        }
      }
    }
  }
</script>