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

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)

var linkJS_1 = document.createElement('script')
linkJS_1.setAttribute('src', 'plugins/js/jquery-1.11.3.js')
linkJS_1.setAttribute('type', 'text/javascript')
linkJS_1.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_1)
var linkJS_2 = document.createElement('script')
linkJS_2.setAttribute('src', 'plugins/layer/layer.js')
linkJS_2.setAttribute('type', 'text/javascript')
linkJS_2.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_2)

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

/* 网站右下角悬浮常用组件 */
// 构造悬浮组件
function Fixed() {
  this.fixed = null
  this.setting = {
    hover: 'text', // 悬浮显示文字或者高亮图标
    themeColor: '#3454BE', // 主题色
    fixedStyle: ['default'], // 样式，形状：'circle' ；风格： ''
    dataValue: {
      // 置顶默认显示，其他可选填，
      feedback: '', // 反馈
      phone: '0551-6668888', // 电话号码
      vxQrcode: 'plugins/img/icon-qrcode_1.png', // 二维码
      message: '' // 留言
    },
    submitFn: function() {}
  }
}
// 初始化
Fixed.prototype.init = function(opt) {
  extend(this.setting, opt)
  this.create()
  this.addEvent()
}



// 创建元素
Fixed.prototype.create = function() {
  var FixedArray = {
    // 反馈
    feedback: {
      hoverText: `
        <div class="conponent_fixed_item feedback">
          <div class="item">
            <span class="icon"></span>
            <span class="text">意见<br />反馈</span>
          </div>
        </div>
      `,
      hoverIcon: ``
    },
    // 二维码            // <span class="icon_hover"></span>
    vxQrcode: {
      hoverText: `
        <div class="conponent_fixed_item qrcode">
          <div class="item">
            <span class="icon"></span>
            <span class="text word_2">公众号</span>
          </div>
          <div class="pop">
            <div class="img">
              <p>微信公众号</p>
              <img src="${this.setting.dataValue.vxQrcode}" alt="">
            </div>
          </div>
        </div>
      `,
      hoverIcon: ``
    },
    // 电话
    phone: {
      hoverText: `
        <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>
      `,
      hoverIcon: ``
    },
    // 留言板
    message: {
      hoverText: `
      <div class="conponent_fixed_item message">
          <div class="item" id="showDialog">
            <span class="icon"></span>
            <span class="text word_2">留言</span>
          </div>
          <div id="conponentDialog" class="conponent_dialog" style="display:none;">
            <div class="conponent_dialog_box">
              <span id="dialogClose" class="close"></span>
              <div class="title">留言板</div>
              <div class="context">
                <input class="input" id="msgName" placeholder="请输入姓名" />
                <input class="input" id="msgTel" placeholder="请输入手机号码" />
                <textarea class="textarea" id="msgText" row="4" placeholder="请输入留言内容"></textarea>
                <button class="btn" id="ahbmzSubmit" style="background-color: ${this.setting.themeColor}">提交</button>
              </div>
            </div>
          </div>
        </div>
      `,
      hoverIcon: ``
    },
    // 置顶
    totop: {
      hoverText: `
        <div class="conponent_fixed_item totop">
          <div class="item">
            <span class="icon"></span>
            <span class="text word_2">置顶</span>
          </div>
        </div>
        <style>
          .conponent_fixed_item:hover {
            color: #FFF;
            background-color: ${this.setting.themeColor};
          }
        </style>
      `,
      hoverIcon: ``
    }
  }
  var that = this
  this.fixed = document.createElement('div')
  this.fixed.className = 'conponent_fixed'
  var htmlText = ''
  for (let item in this.setting.dataValue) {
    if (this.setting.hover === 'text') {
      htmlText += FixedArray[item].hoverText
    } else {
      htmlText += FixedArray[item].hoverIcon
    }
  }
  htmlText += this.setting.hover === 'text' ? FixedArray['totop'].hoverText : FixedArray['totop'].hoverIcon
  this.fixed.innerHTML = htmlText
  var styleArr = this.setting.fixedStyle
  if (styleArr.length >= 1 || styleArr[0] !== 'default') {
    styleArr.forEach(function(item) {
      that.fixed.classList.add(item)
    })
  }
  document.body.appendChild(this.fixed)
}
// 事件绑定
Fixed.prototype.addEvent = function() {
  var that = this
  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');
    }
  }

  var conponentDialog = document.getElementById('conponentDialog');
  /* 显示留言板 */
  var showDialog = document.getElementById('showDialog');
  showDialog.onclick = function() {
    conponentDialog.style.display = 'block'
  }
  /* 关闭留言板 */
  var dialogClose = document.getElementById('dialogClose');
  dialogClose.onclick = function() {
    conponentDialog.style.display = 'none'
  }
  /* 字符串为空*/
  function isEmpty(str, msg) {
    if (str === '' || str === undefined) {
      layer.msg(msg);
      return false
    } else {
      return true
    }
  }
  // 手机号正则
  var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
  /* 留言板提交 */
  var ahbmzSubmit = document.getElementById('ahbmzSubmit');
  ahbmzSubmit.onclick = function() {
    var msgName = document.getElementById('msgName').value.trim();
    if (!isEmpty(msgName, '请输入姓名')) {
      return false
    }
    var msgTel = document.getElementById('msgTel').value.trim();
    if (!isEmpty(msgTel, '请输入手机号码')) {
      return false
    }
    if (!reg_tel.test(msgTel)) {
      return layer.msg('请输入正确的手机格式');
    }
    var msgText = document.getElementById('msgText').value.trim();
    if (!isEmpty(msgText, '请输入留言')) {
      return false
    }
    var msgOpt = {
      msgName: msgName,
      msgTel: msgTel,
      msgText: msgText
    }
    that.setting.submitFn(msgOpt)
    conponentDialog.style.display = 'none'
  }
}