;(function($,window,document){

  var pluginName = 'multiSelect',
    defaults = {
      type: '1',//select層級onetwo
      data:[],
      field:[],//資料欄位名 
      record: true,  
      
      queryFun: function(){}
    };

  function MultiSelect(element,options){
    this.element = element;
    this.settings = $.extend({}, defaults, options);
    this.init();    
  }
  
  MultiSelect.prototype = { 

    //初始化彈出框
    init: function(){
      var that = this,
        element = this.element;

      that.create(element);      
      that.trigger(element);
    },
    
    //建立select框
    create: function(element){
      var that = this,
        $this = $(element),
        selectElement = '<input type="text" name="selectinput" id="select_input" class="select-input" placeholder="請選擇" />'
          +'<span class="input-isfold glyphicon glyphicon-chevron-down"></span>'
          +'<div class="select-options-box" id="select_options_box"></div>';          
      $this.append(selectElement);  
      that.initOption();
    },
    //初始化列表
    initOption: function(){
      var that = this,
        $options_box = $('#select_options_box');
      var $options = that.parseOptions();        
      $options_box.html($options); 
    },
    //解析並處理options資料
    parseOptions: function(){
      var that = this,    
        type = that.settings.type,
        field = that.settings.field,
        one = field[0],
        two = field[1],
        data = that.settings.data,
        twolist = '',
        optionsTwo = [],
        recordColumn = that.settings.recordColumn,
        record = that.settings.record,
        options = '';   
      var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo"))?JSON.parse(window.localStorage.getItem("recordInfo")):[];  
       console.log("recordColumn" +recordColumn);
      options += '<div class="options-container">';

      if (record && recordColumn.length > 0) {         
        for (var i = 0; i < recordColumn.length; i++) {
          twolist += '<li class="options-container optionslist">'+'-- '+'<span class="options-data">'+ recordColumn[i] +'</span></li>';
        }
        options += '<div class="options-record">'
                      +'<span class="options-data">歷史記錄</span><span class="glyphicon glyphicon-chevron-up options-isfold"></span>'
                  +'</div>'
                  +'<ul class="options-two">'+ twolist +'</ul>';
      }
      switch(type){
        case '1':
          for (var i in data) {
            options+='<div class="optionslist"><span class="options-data">'+data[i][one]+'</span></div>';
          }
        case '2':
          for (var i in data) {
            twolist = '', optionsTwo = [];
            var optionsTwo = data[i][two];
            
            for (var j in optionsTwo){
              twolist+='<li class="options-container optionslist">'+'-- '+'<span class="options-data">'+ optionsTwo[j][field[2]] +'</span></li>';
            }
            options+= '<div class="options-one optionslist">'
                        +'<span class="options-data">'+ data[i][one] +'</span><span class="glyphicon glyphicon-chevron-up options-isfold"></span>'
                      +'</div>'
                      +'<ul class="options-two">'+ twolist +'</ul>';
          }
      }
      options += '</div>';
      return options;     
    },

    //系列事件
    trigger: function(element,event){
      var that = this,
        $this = $(element),
        $options_box = $('#select_options_box'),
        $isfold = $('.options-isfold'),
        recordColumn = that.settings.recordColumn,
        record = that.settings.record,
        $input = $('#select_input');
      var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo"))?JSON.parse(window.localStorage.getItem("recordInfo")):[]; 

      $input.on({
          'focus': function(){
            $options_box.fadeIn();  
            that.selectFun(false);
          },
          'input propertychange': function(){
            that.selectFun(false);
          },
          'click': function(){
            return false;
          }
      });
      $('.input-isfold').on('click', function(event){
        $options_box.toggle();
        $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        event.stopPropagation();
      })
      $isfold.on('click', function(event){
        $(this).parent().next().toggle();
        $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        $options_box.show();
        event.stopPropagation();
      })
      $('.optionslist').on({
        'click':function(event){
          $input.val($(this).find('.options-data').html());
          debugger
          if($.isFunction(that.settings.queryFun)){
              that.settings.queryFun();
          }
          if (record) {
            var recordCol = $input.val();
            // console.log("recordCol"+recordCol+"recordColumn" +recordColumn);
            if (JSON.stringify(recordColumn).indexOf(JSON.stringify(recordCol)) < 0){
              recordColumn.unshift(recordCol);
            }       
            window.localStorage.setItem("recordInfo", JSON.stringify(recordColumn));  
          }
          $options_box.fadeOut();
          event.stopPropagation();
        },
        'mouseover': function(){
          $(this).css({'background':'#c2cad8'});
        },
        'mouseout' : function(){
          $(this).css({'background':'#fff'});
        }       
      });

      $(document).keyup(function(event){        
        if(event.keyCode === 13){
          that.selectFun(true);
          if($.isFunction(that.settings.queryFun)){
            that.settings.queryFun();
          }
        }
        event.stopPropagation();
      });
      $(document).on('click', function(){
        $options_box.fadeOut();
      });
    },

    // input與select同步
    selectFun: function(enter){
      var that = this,
       $options_box = $('#select_options_box'),
       $input = $('#select_input'),
       optiondata = $input.val(),
       options = $('.optionslist'),
       optionTop = 0,
       selectHTML = '';
      
       $.each(options, function(i, item){
          selectHTML = $(item).find('.options-data').html();
           // console.log(selected); 
          if(selectHTML.indexOf(optiondata) >= 0) { 
              // $(item).trigger('hover');
              options.css({'background':'#fff'});
              $(item).css({'background':'#c2cad8'});
              /*if ($(item).hasClass('options-one')) {
                optionTop = $(item).position().top;                                
              }else{
                optionTop = $(item).parent().position().top;
              }*/
              optionTop = $(item).position().top; 
              // console.log(optionTop);
              $options_box.scrollTop(optionTop);
              if (enter) {
                $(item).trigger('click');
              }
          } 
       });
       
       if (optiondata === '') {
          options.css({'background':'#fff'});
          $options_box.scrollTop(0);
       } 
    }

  };

  $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new MultiSelect(this, options));     
          }
        });
    return this;
    };
  
 })(jQuery,window,document)