$(function(){
  // let base = 'http://119.23.129.199:8100/'
  let base = '/'
  
  var stopClick = false

  function getQueryString(value) {
    var reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }
    $('#canvas').attr('width',$('#canvasWrap').width())
    $('#canvas').attr('height',$('#canvasWrap').height())

    init()
  
    $('#clear').click(function () {
      $('#clear').css('opacity',0)
      $('#result').html('')
    })

    $('#clsipt').click(function () {
      $('#input').val('')
      $('#clsipt').css('opacity',0)
      $('.search-page').show()
      $('.result-page').hide()
    })
    
    $('#input').on('input propertychange', function() {
      var count = $(this).val().length;
      $('#clsipt').css('opacity',count?1:0)
     });
  
    $('#search').click(function () {
      search()
    })

    $('#reload').click(function () {
      location.reload()
    })

    let startY = ''
    let lastY = ''

    let mMove = function (event) {
      event.stopPropagation()
      event.preventDefault()
      let deltaY = event.clientY - startY
      stopClick = true

      if (lastY == deltaY) {
        return
      }
      let de = document.documentElement.scrollTop||document.body.scrollTop
      dic = lastY>deltaY? 1:-1
      let to = de + dic * 15
      window.scrollTo(0,to)
      // lastY>deltaY?window.scrollTo(deltaY):'下'
      lastY = deltaY
    }

    $('.body').mousedown(function (e) {
      startY = e.clientY
      stopClick = false
      $('.body').mousemove(mMove)
    })

    $('.body').mouseup(function (e) {
      $('.body').off('mousemove',mMove)
    })
  function callbackfunc(ret){
    let html = ''

    ret.cand.forEach(item => {
      html+=`<li>${item}</li>`
    });
    $('#clear').css('opacity',1)
    $('#result').html(html)
    $('#result').undelegate()
    $('#result').delegate('li','click',function (e) {
      e.stopPropagation()
      e.preventDefault()
      let target = e.target
      $('#input').val($('#input').val() + $(target).text())
      $('#clsipt').css('opacity',1)
      $('#clear').click()
    })
  
  }

  function search() {
    let data = {
      id: getQueryString('id') || '',
      name: $('#input').val(),
    }
    $.ajax({
      url: base + 'api/searchCollection',
      type: "POST",
      data: JSON.stringify(data),
      dataType: "json",
      contentType: "application/json;charset=utf-8",
      success: function (data) {
        if (data.code!=0) {
          return alert(data.msg)
        }
        $('.search-page').hide()
      
        if (data.data.length<=0) {
          $('.result-page').fadeIn()
          $('.result-page ul').hide()
          $('.no-result').fadeIn()
        }

        else{
          $('.no-result').hide()
          $('.result-page').fadeIn()
          $('.result-page ul').fadeIn()

          let html = ``
          data.data.forEach(item=>{
            html += `<li data-id="${item.id}">
                      <img src="${item.pic}" data-id="${item.id}" alt="">
                      <span data-id="${item.id}">${item.name}</span>
                    </li>`
          })
          $('.result-page ul').html(html)
          let arr = Array.from(document.querySelectorAll(".result-page ul li"))
          arr.forEach(function(dom) {
            dom.addEventListener("mouseup", function(e) {
              let id = e.target.dataset.id
              setTimeout(function() {
                (window.resultCallback&&!stopClick) && window.resultCallback(parseInt(id)); 
              });
            });
          });
        }

      }
  })
  }

  function init() {
      QQShuru.HWPanel({
          canvasId:"#canvas",
          lineColor:"#EA9649",
          clearBtnId:"#clear",
          callback:callbackfunc
      });
  }
})