layui.define('jquery', function (exports) {
  "use strict";

  var $ = layui.$
    , MOD_NAME = 'tag',
    TAG_CLASS = '.tag',
    BUTTON_NEW_TAG = 'button-new-tag',
    INPUT_NEW_TAG = 'input-new-tag',
    TAG_ITEM = 'tag-item',
    CLOSE = 'tag-close',
    DEFAULT_SKIN = 'layui-btn layui-btn-sm'
    , tag = function () {
      this.config = {
        skin: DEFAULT_SKIN,
        tagText: '+'
      };
      this.configs = {}
    };

  //全局设置
  tag.prototype.set = function (options) {
    var that = this;
    $.extend(true, that.config, options);
    tag.render();
    return that;
  };

  //表单事件监听
  tag.prototype.on = function (events, callback) {
    return layui.onevent.call(this, MOD_NAME, events, callback);
  };

  //外部Tag新增
  tag.prototype.add = function (filter, options) {
    var tagElem = $(TAG_CLASS + '[lay-filter=' + filter + ']')
    call.add(null, tagElem, options);
    call.tagAuto(filter);
    return this;
  };

  //外部Tag删除
  tag.prototype.delete = function (filter, layid) {
    var tagElem = $(TAG_CLASS + '[lay-filter=' + filter + ']')
      , tagItemElem = tagElem.find('>.' + TAG_ITEM + '[lay-id="' + layid + '"]');
    call.delete(null, tagItemElem);
    return this;
  };

  //基础事件体
  var call = {
    //Tag点击
    tagClick: function (e, index, tagItemElem, options) {
      options = options || {};
      var othis = tagItemElem || $(this)
        , index = index || othis.index(othis)
        , parents = othis.parents(TAG_CLASS).eq(0)
        , filter = parents.attr('lay-filter');
      layui.event.call(this, MOD_NAME, 'click(' + filter + ')', {
        elem: parents
        , index: index
      });
    }
    //Tag新增事件
    , add: function (e, tagElem, options) {
      var filter = tagElem.attr('lay-filter'),
        buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),
        index = buttonNewTag.index()
        , newTag = '<button lay-id="' + (options.id || '') + '"' + (options.attr ? ' lay-attr="' + options.attr + '"' : '') + ' type="button" class="' + TAG_ITEM + '">' + (options.text || 'unnaming') + '</button>';
      var result = layui.event.call(this, MOD_NAME, 'add(' + filter + ')', {
        elem: tagElem
        , index: index
        , othis: newTag
      })

      //隐藏表单处理
      var newTagText = options.text;
      var existingTags = $('input[name="' + filter + '"]').val();
      if (existingTags == "") {
        //如果是空的直接增加
        $('input[name="' + filter + '"]').val(newTagText);
      } else {
        var tagValues = existingTags.split(','); // 将现有标签值转换为数组
        // 检查新标签是否已经存在
        if (tagValues.indexOf(newTagText) === -1) {
          // 如果新标签不存在，则添加到数组中
          tagValues.push(newTagText);
        }
        // 将数组转换为以逗号分隔的字符串，并更新 input 元素的值
        var updatedTags = tagValues.join(',');
        $('input[name="' + filter + '"]').val(updatedTags);
      }

      if (result === false) return;
      buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);
    }
    //Tag输入事件
    , input: function (e, othis) {
      var buttonNewTag = othis || $(this)
        , parents = buttonNewTag.parents(TAG_CLASS).eq(0)
        , filter = parents.attr('lay-filter')
      var options = tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
      //标签输入框
      var inpatNewTag = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
      inpatNewTag.addClass(options.skin);
      buttonNewTag.after(inpatNewTag).remove();
      inpatNewTag.children('.layui-input').on('blur', function () {
        if (this.value) {
          var options = {
            text: this.value
          }
          call.add(null, parents, options);
        }
        inpatNewTag.remove();
        call.tagAuto(filter);
      }).focus();
    }
    //Tag删除
    , delete: function (e, othis) {
      var tagItem = othis || $(this).parent(), index = tagItem.index()
        , parents = tagItem.parents(TAG_CLASS).eq(0)
        , filter = parents.attr('lay-filter');
      console.log(tagItem);
      var result = layui.event.call(this, MOD_NAME, 'delete(' + filter + ')', {
        elem: parents
        , index: index
      })

      //隐藏表单处理
      var existingTags = $('input[name="' + filter + '"]').val();
      var tagValues = existingTags.split(','); // 将现有标签值转换为数组
      // 从数组中删除指定的标签
      tagValues.splice(index, 1);
      // 将数组转换为以逗号分隔的字符串，并更新 input 元素的值
      var updatedTags = tagValues.join(',');
      $('input[name="' + filter + '"]').val(updatedTags);

      if (result === false) return;
      tagItem.remove()
    }
    //Tag 自适应
    , tagAuto: function (filter) {
      filter = filter || '';
      var options = filter ? tag.configs[filter] || tag.config : tag.config;
      var elemFilter = function () {
        return filter ? ('[lay-filter="' + filter + '"]') : '';
      }();
      $(TAG_CLASS + elemFilter).each(function () {
        var othis = $(this), tagItem = othis.children('.' + TAG_ITEM), buttonNewTag = othis.children('.' + BUTTON_NEW_TAG);
        tagItem.removeClass(DEFAULT_SKIN).addClass(options.skin);
        //允许关闭
        if (othis.attr('lay-allowClose') && tagItem.length) {
          tagItem.each(function () {
            var li = $(this);
            if (!li.find('.' + CLOSE)[0]) {
              var close = $('<i class="layui-icon layui-unselect ' + CLOSE + '">&#x1006;</i>');
              close.on('click', call.delete);
              li.append(close);
            }
          });
        }
        //允许新增标签
        if (othis.attr('lay-newTag') && buttonNewTag.length === 0) {
          buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
          buttonNewTag.on('click', call.input);
          othis.append(buttonNewTag);
        }
        buttonNewTag.html(options.tagText);
        buttonNewTag.removeClass(DEFAULT_SKIN).addClass(options.skin);
      });
    }
  };

  tag.prototype.init = function (filter, options) {
    if (filter) {
      tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
    }
    return call.tagAuto.call(this, filter);
  };

  tag.prototype.render = tag.prototype.init;

  var tag = new tag(), dom = $(document);
  tag.render();

  dom.on('click', '.' + TAG_ITEM, call.tagClick); //tag 单击事件
  exports(MOD_NAME, tag);
});

