(function (window){
  window.dropdown = {
    zIndex: 100
  }
  // 入口函数
  dropdown.init = function (param){
    const id = param.selector
    const data = JSON.parse(param.data)
    const isSingle = param.singleSelect
    const resname = param.resname
    const width = param.width
    const height = param.dropHeight
    // 初始化 html 结构
    $(id).html('<div class="dropdown-frame-inner"><input type="hidden" class="result-hidden"  name="' + resname +'"><div class="result-display"></div><div class="dropdown1"><input type="text" class="search-frame"><ul class="selection-list"></ul></div></div>')
    // 渲染选项列表
    renderSelection(data, isSingle)
    // 渲染结果列表
    renderResult(data)
    // 给表单注册查询事件
    $(id + ' .search-frame').on('keyup', function () {
      match($(this).val())
    })
    // 点击显示下拉列表
    $(id + ' .result-display').on('click', function () {
      $(id + ' .dropdown1').slideDown(200)
    })
    // 鼠标离开关闭下拉列表
    $(id + ' .dropdown-frame-inner').on('mouseleave', function () {
        $(id + ' .dropdown1').slideUp(200)
    })
    // 点击切换选中状态：分单选和多选两种状态
    $(id + ' .selection-list').on('click', function (e) {
      var item = $(e.target).is('li') ? $(e.target) : $(e.target).parent('li')
      var content = item.find('span')[0].innerHTML    // 文本内容标签
      if (isSingle) {    // 如果是单选，执行下列操作
        for (var i = 0; i < data.length; i++) {
          if (data[i].name === content) {
            data[i].flag = !data[i].flag
          } else {
            data[i].flag = false
          }
        }
      } else {
        for (var i = 0; i < data.length; i++) {
          if (data[i].name === content) {
            data[i].flag = !data[i].flag
          }
        }
      }

      renderSelection(data)
      renderResult(data)
    })
    $(id + ' .dropdown1 ul').css('height', height + 'px')
    // 调整元素的宽度
    $(id).css({
       'margin-top': '4px',
      'display': 'inline-block',
      'width': width + 'px',
      'position': 'relative',
      'height': '36px',
      'z-index': 100
    })
    $(id).on('click', function (){
      $(this).css('z-index', ++dropdown.zIndex)
    })

    function renderDropdown(data, isSingle) {
      isSingle = isSingle || false
      // 渲染选项列表
      renderSelection(data, isSingle)
      // 渲染结果列表
      renderResult(data)
      // 给表单注册查询事件
      $('.searchFrame').on('keyup', function () {
        match($(this).val())
      })
      // 切换下拉列表
      $('.result-display').on('click', function () {
        $('.dropdown1`').slideToggle(200)
      })
      // 点击切换选中状态：分单选和多选两种状态
      $('.selection-list').on('click', function (e) {
        var item = $(e.target).is('li') ? $(e.target) : $(e.target).parent('li')
        var content = item.find('span')[0].innerHTML    // 文本内容标签
        var ele = null     // 文本内容对应的数组元素
        if (isSingle) {    // 如果是单选，执行下列操作
          for (var i = 0; i < data.length; i++) {
            data[i].flag = false
            if (data[i].name === content) {
              ele = data[i]
            }
          }
          // ele.flag = !ele.flag
        } else {
          for (var i = 0; i < data.length; i++) {
            if (data[i].name === content) {
              ele = data[i]
            }
          }
        }
        ele.flag = !ele.flag

        renderSelection(data)
        renderResult(data)
      })
    }

    // 渲染下拉列表选项的方法
    function renderSelection(params) {
      var key = $(id + ' .search-frame').val()
      var content = ''
      params.forEach(function (item) {
        if (item.name.indexOf(key) != -1) {
          if (item.flag) {
            content += '<li><span class="select-text" title="'+item.name+'">' + item.name + '</span><span class="icon fa fa-check"></span></li>'
          } else {
            content += '<li><span class="select-text" title="' + item.name +'">' + item.name + '</li>'
          }
        }
      })
      $(id + ' .selection-list').html(content)
    }

    // 渲染结果的方法
    function renderResult(params) {
        var content = '<i class="dropdownBtn fa fa-sort-desc"></i>'
        var selid=''
      var tag = false   // 标志，用来记录content 是否发生变化
      params.forEach(function (item) {
        if (item.flag) {
            content += '<span class="result-item">' + item.name + '</span>, '
            selid += item.id+",";
          tag = true
        }
      })
      if (tag) {
          var tpl = content.substr(0, content.length - 2)
          var tp2 = selid.substr(0, selid.length - 1)
        $(id + ' .result-display').html(tpl)
        $(id + ' .result-hidden').val(tp2);
      } else {
        $(id + ' .result-display').html(content)
      }

    }

    // 根据输入的值进行匹配
    function match(key) {
      // 存放匹配结果的数据
      var resultArr = []
      if (key.length === 0) {
        renderSelection(data)
      } else {
        for (let i = 0; i < data.length; i++) {
          if (data[i].name.indexOf(key) != -1) {
            resultArr.push(data[i])
          }
        }
        renderSelection(resultArr)
      }

    }

  }

  // 暴露的接口：获取当前选中的数据
  window.getSelectedData = function (data) {
    var ret = []
    JSON.parse(data).forEach(function (item) {
      if (item.flag) {
        ret.push(item.id)
      }
    })
    return ret.join(',')
  }

  })(window)