$(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
    })
  }
})