"use strict";

function PopupList() {
  this.lists = null;
  this.cb = null;
  this.touchStartInfo = null;

  this.show = function (lists, cb) {
    this.lists = lists;
    if (cb) this.cb = cb;
    $("body").append("<div class=\"tfp-mask-div\"></div>");
    $("body").append("<div class=\"tfp-popuplist\">" + "<div class=\"tfp-popuplist-content\"></div>" + "<div class=\"tfp-popuplist-touch\"></div>" + "<div class=\"tfp-popuplist-bottom\">" + "  <div onclick=\"window.popupList.onOk()\">确定</div>" + "  <div onclick=\"window.popupList.close()\">取消</div>" + "</div>" + "</div>");

    for (var i = 0; i < lists.length; i++) {
      var list = lists[i];
      var width = "100%";
      if (list.width) width = list.width;
      var listHtml = "<div class=\"tfp-popuplist-content-column\" " + "style=\"width:" + width + "; background-color: " + list.bgColor + ";\">" + "<div class=\"tfp-popuplist-content-items\">";
      var valOptionIndex = 0;

      if (list.options) {
        //上面加三个空白的选项，以便可以滚动显示第一条记录
        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";

        for (var j = 0; j < list.options.length; j++) {
          var option = list.options[j];

          if (typeof option == "string") {
            option = {
              value: option,
              text: option
            };
          }

          if (option.value == list.value) valOptionIndex = j;
          var text = option.value;
          if (option.text) text = option.text;
          listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"" + option.value + "\">" + text + "</div>";
        } //下面加三个空白的选项，以便可以滚动显示最后一条记录


        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
        listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
      }

      listHtml += "</div></div>";
      $(".tfp-popuplist-content").append(listHtml);
      if (valOptionIndex > 0) $(".tfp-popuplist-content-column").get(i).scrollTop = valOptionIndex * 40;
    }

    for (var i = 0; i < 7; i++) {
      var style = "";

      if (i == 3) {
        style = "background:transparent;border-top: 1px solid #eeeeee;" + "border-bottom: 1px solid #eeeeee;";
      } else {
        style = "background-color: #FFFFFF; opacity:";
        if (i == 0 || i == 6) style += "0.9";
        if (i == 1 || i == 5) style += "0.6";
        if (i == 2 || i == 4) style += "0.3";
        style += ";";
      }

      style += "top:" + (i * 40 + 10) + "px;";
      $(".tfp-popuplist").append("<div class=\"tfp-popuplist-mask\" style=\"" + style + "\"></div>");
    }

    var that = this;
    var touchDiv = $(".tfp-popuplist-touch").get(0);
    touchDiv.addEventListener("touchstart", function (event) {
      that.onTouchStart(event);
    });
  };

  this.onTouchStart = function (event) {
    var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch

    this.touchStartInfo = {
      x: touch.pageX,
      y: touch.pageY
    }; //取第一个touch的坐标值

    for (var i = 0; i < $(".tfp-popuplist-content-column").length; i++) {
      var divTmp = $($(".tfp-popuplist-content-column").get(i));

      if (touch.pageX > divTmp.offset().left && touch.pageX < divTmp.offset().left + divTmp.width()) {
        this.touchStartInfo.columnIndex = i;
        this.touchStartInfo.contentDiv = divTmp.get(0);
        this.touchStartInfo.scrollTop = divTmp.get(0).scrollTop;
        break;
      }
    }

    if (!this.touchStartInfo.contentDiv) return;
    var that = this;
    var touchDiv = $(".tfp-popuplist-touch").get(0);
    touchDiv.addEventListener("touchmove", function (event) {
      that.onTouchMove(event);
    });
    touchDiv.addEventListener("touchend", function (event) {
      that.onTouchEnd(event);
    });
  };

  this.onTouchMove = function (event) {
    //当屏幕有多个touch或者页面被缩放过，就不执行move操作
    if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
    var touch = event.targetTouches[0];
    var endPos = {
      x: touch.pageX - this.touchStartInfo.x,
      y: touch.pageY - this.touchStartInfo.y
    };
    var touchType = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //touchType为1时，表示纵向滑动，0为横向滑动

    if (touchType === 1) {
      event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏

      this.touchStartInfo.contentDiv.scrollTop = this.touchStartInfo.scrollTop - endPos.y;
    }
  };

  this.onTouchEnd = function (event) {
    var touchDiv = $(".tfp-popuplist-touch").get(0);
    touchDiv.removeEventListener('touchmove', this.onTouchMove);
    touchDiv.removeEventListener('touchend', this.onTouchEnd);
    var contentDiv = this.touchStartInfo.contentDiv;
    var interval = 40 - contentDiv.scrollTop % 40;

    if (interval <= 20) {
      contentDiv.scrollTop = contentDiv.scrollTop + interval;
    } else {
      contentDiv.scrollTop = contentDiv.scrollTop - contentDiv.scrollTop % 40;
    }

    var list = this.lists[this.touchStartInfo.columnIndex];
    if (list.onChange) list.onChange();
  };

  this.getColumnVal = function (colIndex) {
    var column = $(".tfp-popuplist-content-column").get(colIndex);
    var centerMaskDivOffset = $($(".tfp-popuplist-mask").get(3)).offset();
    var itemIndex = column.scrollTop / 40 + 3;
    var items = $(column).find(".tfp-popuplist-content-item");
    var curItemCenterY = $(items.get(itemIndex)).offset().top + 20;
    var upperItemCenterY = curItemCenterY - 40;
    var belowItemCenterY = curItemCenterY + 40;
    var item = items.get(itemIndex);

    if (upperItemCenterY > centerMaskDivOffset.top && upperItemCenterY < centerMaskDivOffset.top + 40) {
      items.get(itemIndex - 1);
    } else if (belowItemCenterY > centerMaskDivOffset.top && belowItemCenterY < centerMaskDivOffset.top + 40) {
      items.get(itemIndex + 1);
    }

    return $(item).attr("data-value");
  };

  this.onOk = function () {
    if (this.cb) {
      var values = [];
      var columns = $(".tfp-popuplist-content-column");
      var centerMaskDivOffset = $($(".tfp-popuplist-mask").get(3)).offset();

      for (var i = 0; i < columns.length; i++) {
        values.push(this.getColumnVal(i));
      }

      this.cb(values);
    }

    this.close();
  };

  this.close = function () {
    $(".tfp-mask-div").remove();
    $(".tfp-popuplist").remove();
    this.lists = null;
    this.cb = null;
    this.touchStartInfo = null;
  };
}

window.popupList = new PopupList();