/** 
 * 常用组件库
 *
**/

var linkCss_1 = document.createElement('link')
linkCss_1.setAttribute('rel', 'stylesheet')
linkCss_1.setAttribute('href', 'plugins/css/common.css')
document.head.appendChild(linkCss_1)
var linkCss_2 = document.createElement('link')
linkCss_2.setAttribute('rel', 'stylesheet')
linkCss_2.setAttribute('href', 'plugins/css/conponent.css')
document.head.appendChild(linkCss_2)


/* 对象继承 */
function extend(defaultVal, newVal) {
  for(var e in newVal) {
    defaultVal[e] = newVal[e]
  }
}

/* 网站右下角悬浮常用组件 */
// 构造悬浮组件
function Fixed() {
  this.fixed = null
  this.setting = {
    fixedStyle: 'default',
    dataValue: {
      phone: '0551-6668888',
      vxQrcode: 'plugins/img/icon-qrcode_1.png'
    }
  }
}
// 初始化
Fixed.prototype.init = function(opt){
  extend(this.setting, opt)
  this.create()
  this.addEvent()
}
// 创建元素
Fixed.prototype.create = function() {
  this.fixed = document.createElement('div')
  this.fixed.className = 'conponent_fixed'
  this.fixed.innerHTML = `
    <div class="conponent_fixed_item feedback">
      <div class="item">
        <span class="icon"></span>
        <span class="text">意见<br />反馈</span>
      </div>
    </div>
    <div class="conponent_fixed_item qrcode">
      <div class="item">
        <span class="icon"></span>
        <span class="icon_hover"></span>
      </div>
      <div class="pop">
        <div class="img">
          <p>微信公众号</p>
          <img src="${this.setting.dataValue.vxQrcode}" alt="">
        </div>
      </div>
    </div>
    <div class="conponent_fixed_item phone">
      <div class="item">
        <span class="icon"></span>
        <span class="text">客服<br />电话</span>
      </div>
      <div class="pop">
        <div class="msg"><span>${this.setting.dataValue.phone}</span></div>
      </div>
    </div>
    <div class="conponent_fixed_item totop">
      <div class="item">
        <span class="icon"></span>
        <span class="text word_2">置顶</span>
      </div>
    </div>
  `
  if (this.setting.fixedStyle !== '') {
    this.fixed.classList.add(this.setting.fixedStyle)
  }
  document.body.appendChild(this.fixed)
}
// 事件绑定
Fixed.prototype.addEvent = function() {
  var totop = document.getElementsByClassName('totop')[0];
  var scrollTop = document.documentElement.scrollTop
  setToTop();
  totop.onclick = function() {
    scrollTop = document.documentElement.scrollTop
    var timer = setInterval(function() {
      if (scrollTop > 0) {
        scrollTop -= 20
        scrollTo(0, scrollTop)
      } else {
        clearInterval(timer)
      }
    }, 8)
  }
  
  window.onscroll = function() {
    scrollTop = document.documentElement.scrollTop;
    setToTop();
  }
  
  function setToTop() {
    if (scrollTop > 400) {
      totop.classList.add('_show');
      totop.classList.remove('_hide');
    } else {
      totop.classList.add('_hide');
      totop.classList.remove('_show');
    }
  }
}