// 节流函数
function throttle(handle, wait) {
  let lastTime = 0
  return function (e) {
    let nowTime = new Date().getTime()
    if (nowTime - lastTime > wait) {
      handle()
      lastTime = nowTime
    }
  }
}
/* ................... 防抖函数 ................... */
function debounce(func, delay) {
  let timeout
  return function () {
    clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}
var currentUrlParam = getUrlData() // 获取当前链接参数
var channel = "PC端"
if (window.navigator && /Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent)) {
  channel = "移动端"
}
var zhArticleName = ""; // 知乎文章名
var zhArticleType = ""; // 知乎类型
var buy = currentUrlParam.buy || ""
// 按钮位置和当前链接
var btnPosition = sessionStorage.getItem("btn") || tool.getCookie("btn")
var curLink = sessionStorage.getItem("currentLink") || tool.getCookie("currentLink") || link
var vm = new Vue({
  el: "#app",
  data: {
    headerCss: false, //导航样阴影css
    mobileLogo: "logo.png", //移动端logo
    mobileMenu: "menu_white.png", //移动端menu图片
    mobileFixshow: true, //移动端咨询悬浮显示
    show: false,
    holiShow: false,
    toastImg: "",
    applyTitle: "7天免费注册体验",
    applyText: "留下联系方式，体验更便捷的智能客服服务",
    placeComTitle: "针对性提供产品方案",
    placeCityTitle: "为您提供上门/远程演示服务",
    submitText: "完成注册",
    buttonAble: false,
    codeText: "获取验证码",
    sliderShow: false,
    success: false,
    count: 30,
    timer: null,
    tel: "",
    com: "",
    city: "",
    codeStatus: false,
    telTips: "",
    codeTips: "",
    comTips: "",
    cityTips: "",
    tips: "",
    code: "",
    state: "0",
    typec: "呼叫中心",
    right: ""
  },
  created() {
    this.holiApi()
    this.linkType() // 根据链接判断产品类型改文案
  },
  mounted() {
    window.addEventListener("scroll", this.showIcon)
    this.sliderInit()
    this.getTel()
    new Swiper(".apply-swiper", {
      loop: true,
      initialSlide: 0,
      slidesPerView: 1,
      centeredSlides: true,
      slideToClickedSlide: true,
      observer: true,
      observerParents: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      pagination: {
        el: ".apply-swiper-pagination",
        clickable: true
      }
    })
  },
  methods: {
    sliderInit() {
      let _this = this
      // 获取 dom
      const after = this.$refs.after
      const slider = this.$refs.slider
      const wrap = this.$refs.wrap
      after.childNodes[0].style.width = wrap.offsetWidth + "px" // 设置after-inner的固定宽度
      const limit = wrap.offsetWidth - slider.offsetWidth // 滑块移动最大位置
      let offsetX // 实时计算滑块的偏移量
      let initX // 点击滑块时的鼠标X位置
      if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent) || screen.width <= 768) {
        const docMousemoveHandler = e => {
          // 页面鼠标移动事件
          // 获取移动后鼠标实时位置
          const moveX = e.targetTouches[0].pageX
          // 计算滑块应该移动的偏移量
          offsetX = moveX - initX
          // 限制上下限
          if (offsetX < 0) {
            e.style.transition = ".5s linear"
            after.style.transition = ".5s linear"
            offsetX = 0
          } else if (offsetX > limit) {
            offsetX = limit
          }
          slider.style.left = offsetX + "px" // 移动滑块
          after.style.width = offsetX + "px" // 修改高亮背景宽度
          slider.style.transition = "0s all"
          after.style.transition = "0s all"
          if (offsetX >= limit) {
            _this.success = true
            _this.getCode()
            document.removeEventListener("touchmove", docMousemoveHandler)
            slider.removeEventListener("touchend", sliderMousedownHandler)
          }
        }
        const docMouseupHandler = e => {
          // 页面鼠标松开事件
          document.removeEventListener("touchcancel", docMousemoveHandler) // 解绑事件
          if (offsetX < limit) {
            // 重置滑块
            slider.style.transition = ".3s ease-in-out"
            slider.style.left = 0
            after.style.transition = ".3s ease-in-out"
            after.style.width = 0
          }
        }
        const sliderMousedownHandler = e => {
          // 滑块点击事件
          initX = e.targetTouches[0].pageX // 获取鼠标位置
          document.addEventListener("touchmove", docMousemoveHandler) // 绑定页面的鼠标移动事件
        }
        slider.addEventListener("touchstart", sliderMousedownHandler) // 绑定滑块点击事件
        document.addEventListener("touchend", docMouseupHandler) // 页面鼠标松开事件
        this.sliderClear = async () => {
          // 定义清理方法
          slider.style.left = "0px"
          after.style.width = "0px"
          slider.style.transition = ".3s ease-in-out"
          after.style.transition = ".3s ease-in-out"
          _this.success = false
          document.removeEventListener("touchmove", docMousemoveHandler)
          slider.removeEventListener("touchstart", sliderMousedownHandler)
          document.removeEventListener("touchend", docMouseupHandler)
        }
      } else {
        const docMousemoveHandler = e => {
          // 页面鼠标移动事件
          // 获取移动后鼠标实时位置
          const moveX = e.clientX
          // 计算滑块应该移动的偏移量
          offsetX = moveX - initX
          // 限制上下限
          if (offsetX < 0) {
            e.style.transition = ".5s linear"
            after.style.transition = ".5s linear"
            offsetX = 0
          } else if (offsetX > limit) {
            offsetX = limit
          }
          slider.style.left = offsetX + "px" // 移动滑块
          after.style.width = offsetX + "px" // 修改高亮背景宽度
          slider.style.transition = "0s all"
          after.style.transition = "0s all"
          if (offsetX >= limit) {
            _this.success = true
            _this.getCode()
            document.removeEventListener("mousemove", docMousemoveHandler)
            slider.removeEventListener("mousedown", sliderMousedownHandler)
          }
        }
        const docMouseupHandler = e => {
          // 页面鼠标松开事件
          document.removeEventListener("mousemove", docMousemoveHandler) // 解绑事件
          if (offsetX < limit) {
            // 重置滑块
            slider.style.transition = ".3s ease-in-out"
            slider.style.left = 0
            after.style.transition = ".3s ease-in-out"
            after.style.width = 0
          }
        }
        const sliderMousedownHandler = e => {
          // 滑块点击事件
          initX = e.clientX // 获取鼠标位置
          document.addEventListener("mousemove", docMousemoveHandler) // 绑定页面的鼠标移动事件
        }
        slider.addEventListener("mousedown", sliderMousedownHandler) // 绑定滑块点击事件
        document.addEventListener("mouseup", docMouseupHandler) // 页面鼠标松开事件
        _this.sliderClear = async () => {
          // 定义清理方法
          slider.style.left = "0px"
          after.style.width = "0px"
          slider.style.transition = ".3s ease-in-out"
          after.style.transition = ".3s ease-in-out"
          _this.success = false
          document.removeEventListener("mousemove", docMousemoveHandler)
          slider.removeEventListener("mousedown", sliderMousedownHandler)
          document.removeEventListener("mouseup", docMouseupHandler)
        }
      }
    },
    showIcon() {
      //顶部导航css
      if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 200) {
        this.headerCss = true
        if (screen.width < 768) {
          //如果是移动端
          this.mobileLogo = "logo1.png"
        }
      } else {
        this.headerCss = false
        this.mobileLogo = "logo.png"
      }
    },
    linkType() {
      if (buy) {
        this.applyTitle = "获取报价"
        this.applyText = "免费获取产品功能报价及价格对比"
        this.submitText = "立即提交"
        if (curLink.indexOf("price") > 0) {
          this.applyTitle = "获取报价"
          this.applyText = "免费获取产品功能报价及价格对比"
          this.submitText = "立即提交"
        }
      }
      if (curLink.indexOf("agent") > 0 || btnPosition === "首页代理加盟按钮") {
        this.applyTitle = "欢迎加入合力亿捷"
        this.applyText = "提交您的资料,我们将在1个工作日内与您取得联系"
        this.placeComTitle = "请输入您的企业名称"
        this.placeCityTitle = "方便与您取得联系"
        this.submitText = "立即加入"
      }
      // 根据链接判断产品类型
      if (buy == "base") {
        this.typec = "呼叫中心-购买基础版"
      } else if (buy == "online") {
        this.typec = "呼叫中心-购买在线版"
      } else if (buy == "stand") {
        this.typec = "呼叫中心-购买标准版"
      } else if (buy == "com") {
        this.typec = "呼叫中心-购买企业版"
      } else if (buy == "sale") {
        this.typec = "呼叫中心-购买营销版"
      } else if (buy == "classic") {
        this.typec = "呼叫中心-购买经典版"
      } else if (buy == "plus") {
        this.typec = "呼叫中心-购买旗舰版"
      } else if (sessionStorage.getItem("agent") && sessionStorage.getItem("agent") === "index") {
        this.typec = "首页代理加盟按钮"
      } else if (curLink.indexOf("callcenter") > 0) {
        this.typec = "云呼叫中心系统"
      } else if (curLink.indexOf("webchat") > 0) {
        this.typec = "在线客服系统"
      } else if (curLink.indexOf("order") > 0) {
        this.typec = "工单系统"
      } else if (curLink.indexOf("AIplatform") > 0) {
        this.typec = "AI机器人"
      } else if (curLink.indexOf("robot") > 0) {
        this.typec = "智能客服机器人"
      } else if (curLink.indexOf("project") > 0) {
        this.typec = "项目管理"
      } else if (curLink.indexOf("scrm") > 0) {
        this.typec = "企微管家"
      } else if (curLink.indexOf("5GMessage") > 0) {
        this.typec = "5G消息创新应用"
      } else if (curLink.indexOf("/solution/customer") > 0) {
        this.typec = "全渠道获客"
      } else if (curLink.indexOf("/solution/progress") > 0) {
        this.typec = "全流程智能服务"
      } else if (curLink.indexOf("remote") > 0) {
        this.typec = "远程坐席管理"
      } else if (curLink.indexOf("express") > 0) {
        this.typec = "速递物流"
      } else if (curLink.indexOf("pinzhuan") > 0 || link.indexOf("pinzhuan") > 0 || curLink.indexOf("PINZHUAN") > 0 || link.indexOf("PINZHUAN") > 0) {
        this.typec = "百度品专"
      } else {
        this.typec = "呼叫中心"
      }
      if (currentUrlParam.tel) {
        this.tel = currentUrlParam.tel
      }
      /* --------- 知乎的识别文章来源 -------- */
      if (currentUrlParam.zhihu || urlParam.zhihu) {
        let urlType = currentUrlParam.zhihu || urlParam.zhihu;
        let data = new URLSearchParams();
        data.append("query", "query");
        data.append("type", urlType);
        axios({
          method: "post",
          url: "https://site.hollycrm.com/zh/mana/assets/api/article.php",
          data: data
        }).then(res => { // 返回相应的微信文章原链接
          zhArticleName = res.data.name;
          zhArticleType = res.data.aType;
        }).catch(error => {
          console.log(error);
        })

      }
      console.log("按钮位置+当前链接+关注产品+来源链接", btnPosition + "--" + curLink + "--" + this.typec + "--" + sourceUrl)
    },
    getTel() {
      if (sessionStorage.getItem("tel") || tool.getCookie("tel")) {
        this.tel = sessionStorage.getItem("tel") || tool.getCookie("tel")
        this.verifyTel()
      }
    },
    verifyTel: debounce(function () {
      var RegExp = /^1[3-9][0-9]{9}$/
      if (vm.tel.trim() == "") {
        vm.telTips = "请输入您的手机号"
        vm.sliderShow = false
      } else if (!RegExp.test(vm.tel.trim())) {
        vm.telTips = "请输入正确的手机号码"
        vm.sliderShow = false
      } else {
        vm.telTips = ""
        vm.sliderShow = true
      }
    }, 500),
    getCode: throttle(function () {
      var RegExp = /^1[3-9][0-9]{9}$/
      if (vm.tel.trim() == "") {
        vm.telTips = "请输入您的手机号"
      } else if (!RegExp.test(vm.tel.trim())) {
        vm.telTips = "请输入正确的手机号码"
      } else {
        vm.tips = "" // 验证通过
        vm.timer = setInterval(() => {
          if (vm.count > 0 && vm.count <= 30) {
            vm.buttonAble = true
            vm.count--
            vm.codeText = vm.count + "秒后重新获取"
          } else {
            vm.buttonAble = false;
            vm.codeText = "获取验证码"
            clearInterval(vm.timer)
            vm.timer = null
            vm.count = 30
            vm.sliderClear()
            vm.sliderInit()
          }
        }, 1000)
        var data = {
          tel: vm.tel,
          btn: btnPosition,
          curLink: curLink,
          protype: vm.typec,
          sourceLink: sourceUrl,
          website_keywords: website_keywords, // 关键词
          channel: channel, // 渠道
          bd_vid: bd_vid // 百度统计
        }
        if (zhArticleName) {
          data.zhArticleName = zhArticleName
        }
        if (zhArticleType) {
          data.zhArticleType = zhArticleType
        }
        $.ajax({
          url: "./apply-code.php",
          type: "post",
          data: data,
          success: function (res) {
            if (res == "toomuch") {
              alert("请匆频繁提交!感谢您的理解和合作，可通过在线客服或电话与我们取得联系。")
              return
            }
            console.log("第一步推送成功!")
          }
        })
        vm.actionId = vm.tel + "-" + Math.floor(Math.random() * 1000000)
        $.ajax({
          url: "/api/sendMsg.php",
          type: "POST",
          data: {
            telNum: vm.tel,
            actionId: vm.actionId,
            info: G.info,
            time: new Date().getTime(),
            actionName: "呼叫中心站试用申请"
          },
          success: function (res) {
            if (res.state == "sent") {//发送验证码成功，并且成功写入数据库，返回sent
              return (vm.codeTips = "验证码已发送，请注意查收")
            } else {//其他不成功的情况
              return (vm.codeTips = "发送失败，请稍后再试")
            }
          }
        })
      }
    }, 1000),
    verifyCode: debounce(function (event) {
      if (vm.tel == "") {
        vm.codeStatus = false
        return (vm.telTips = "请输入手机号码")
      } else if (event.target.value == "") {
        vm.codeStatus = false
        return (vm.codeTips = "请输入验证码")
      } else if (event.target.value.length != 4) {
        vm.codeStatus = false
        return (vm.codeTips = "请输入正确的验证码")
      } else {
        vm.codeTips = ""
      }
      $.ajax({
        url: "/api/verifyMsg.php",
        type: "post",
        data: {
          telNum: vm.tel,
          actionId: vm.actionId,
          actionName: "呼叫中心站试用申请",
          code: vm.code
        },
        success: function (res) {
          if (res.state == "vSucceed") {
            $("#tel").attr({ readonly: "readonly" })
            $("#getCode").attr({ disabled: "true" })
            vm.$data.right = true
            vm.$data.codeTips = "验证码验证成功"
            setTimeout(() => {
              vm.$data.codeTips = ""
              vm.codeStatus = true
            }, 500)
          } else if (res.state == "vFail") {
            event.target.focus()
            vm.$data.right = false
            vm.codeStatus = false
            return (vm.$data.codeTips = "验证码错误，请重试")
          }
        }
      })
    }, 1500),
    verifyCom: debounce(function () {
      if (vm.com.trim() == "") {
        vm.comTips = "请输入您的公司名称"
      } else {
        vm.comTips = ""
      }
    }, 1500),
    verifyCity: debounce(function () {
      if (vm.city.trim() == "") {
        vm.cityTips = "请输入您所在的城市"
      } else {
        vm.cityTips = ""
      }
    }, 1500),
    verify: function () {
      var mobilePattern = /^1[3-9][0-9]{9}$/
      if (vm.tel.trim() == "") {
        vm.telTips = "请输入您的手机号"
        return false
      } else if (!mobilePattern.test(vm.tel.trim())) {
        vm.telTips = "请输入正确的手机号码"
        return false
      } else if (vm.code.trim() == "") {
        vm.codeTips = "请输入验证码"
        return false
      } else if (vm.code.trim().length != 4) {
        vm.codeTips = "请输入正确的验证码"
        return false
      } else if (!vm.right) {
        vm.codeTips = "请输入正确的验证码"
        return false
      } else if (vm.com.trim() == "") {
        vm.comTips = "请输入您的公司名称"
        return false
      } else if (vm.city.trim() == "") {
        vm.cityTips = "请输入您所在的城市"
        return false
      } else {
        vm.tips = ""
        tool.setCookie("applyTel", vm.tel, 1)
        tool.setCookie("applyCom", vm.com, 1)
        tool.setCookie("applyCity", vm.city, 1)
        document.agent.submit()
      }
    },
    holiApi() {
      // 假日表单开关
      var vm = this
      axios({
        method: "get",
        url: "/api/kefu/holicode.php"
      })
        .then(async res => {
          if (res.data) {
            if (website_keywords_string) {
              website_keywords_string += ",节假日表单活码"
            } else {
              website_keywords_string += "节假日表单活码"
            }
            await getCode()
            vm.holiShow = true
            vm.toastImg = qrCode
          } else {
            vm.holiShow = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    holiToWeixin() {
      if (website_keywords_string) {
        website_keywords_string += ",节假日表单活码"
      } else {
        website_keywords_string += "节假日表单活码"
      }
      toweixin()
    }
  },
  beforeDestroy() {
    this.sliderClear()
  }
})
// 点击输入框外框变红
$(".input-box input").bind("click", function () {
  $(this).parent().css("border", "1px solid #eb305b")
  $(this).prev().css("color", "#333")
})
$(".input-box input").bind("blur", function () {
  $(this).parent().css("border", "1px solid #e2e1e5")
  $(this).prev().css("color", "#666")
})
$(".code").bind("click", function () {
  $(this).css("border", "1px solid #eb305b")
  $(this).parent().css("border", "none")
})
$(".code").bind("blur", function () {
  $(this).css("border", "1px solid #e2e1e5")
  $(this).parent().css("border", "none")
})