/*
 * @Author: your name
 * @Date: 2022-04-08 16:40:27
 * @LastEditTime: 2022-04-15 16:07:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \web\assets\js\libs\cascaderselect.js
 */
!(function ($) {
  function CascaderSelect (options) {
    var base = this
    base.opts = $.extend({}, CascaderSelect.DEFAULTS, options)

    return this
  }

  CascaderSelect.VERSION = "0.0.1"

  /**
   * 传入 jquery 选择器对象
   */
  CascaderSelect.DEFAULTS = {
    $el: "",
    level: "",
    data: [],
    selected: true
  }

  CascaderSelect.prototype.init = function () {
    var base = this

    base.inited = false;
    base.rendBaseDom(); // 先构建基础html
    base.bindEvent()
    return this
  }
  CascaderSelect.prototype.rendBaseDom = function () {
    var base = this;

    base.$container = base.opts.$el;
    // 级联判断
    switch (base.opts.level) {
      case 2:
        this.inputWrap = '<div class="sel-cascader-input">\
              \<button type="button" class="btn" id="sel-cascader-btn">\
              \<span class="input-text"><span class="input-text-province">省份</span> <span class="input-text-city">城市</span></span><i class="iconfont iconarrow-bottom"></i>\
              \</button>\
              \</div>';
        break;
      case 3:
        this.inputWrap = '<div class="sel-cascader-input">\
              \<button type="button" class="btn" id="sel-cascader-btn">\
              \<span class="input-text"><span class="input-text-province">省份</span> <span class="input-text-city">城市</span> <span class="input-text-district">区/县</span></span><i class="iconfont iconarrow-bottom"></i>\
              \</button>\
              \</div>';
        break;
      case 4:
        this.inputWrap = '<div class="sel-cascader-input">\
              \<button type="button" class="btn" id="sel-cascader-btn">\
              \<span class="input-text"><span class="input-text-province">省份</span> <span class="input-text-city">城市</span> <span class="input-text-district">区/县</span> <span class="input-text-dealer">经销商</span></span><i class="iconfont iconarrow-bottom"></i>\
              \</button>\
              \</div>';
        break;
      default:
        break;
    }

    this.dropdownWrap = '<div class="sel-cascader-dropdown">\
      \<div class="sel-cascader-panel" id="sel-cascader-panel">\
      \</div>\
      \</div>';

    this.$container.empty().append(this.inputWrap).append(this.dropdownWrap);
    base.loadData(); //请求数据
  }
  CascaderSelect.prototype.loadData = function () {
    var base = this
    var provinceDropdown = '<div class="sel-cascader-menu sel-province">\
                              \<div class="sel-cascader-menu-wrap">\
                                \<ul class="sel-cascader-list">\
                                \</ul>\
                              \</div>\
                            \</div>';
    var cityDropDown = '<div  class="sel-cascader-menu sel-city">\
                          \<div class="sel-cascader-menu-wrap">\
                          \<ul class="sel-cascader-list"></ul>\
                          \</div>\
                        \</div>';
    var districtDropDown = '<div class="sel-cascader-menu sel-district">\
                              \<div class="sel-cascader-menu-wrap">\
                              \<ul class="sel-cascader-list"></ul>\
                              \</div>\
                            \</div>';
    var dealerDropDown = '<div class="sel-delaer-element"></div>';
    var dropDownHtml = ''
    // 级联判断
    switch (base.opts.level) {
      case 2:
        dropDownHtml = provinceDropdown + cityDropDown;
        base.$container.find('#sel-cascader-panel').html(dropDownHtml)
        if (base.opts.data.length > 0) {
          var param = Object.assign({}, {
            $province: base.$container.find('.sel-province'),
            $city: base.$container.find('.sel-city') || '',
            data: base.opts.data,
            selected: base.opts.selected
          }, base.opts.areaSelect)
          var AreaSelectCas = $.AreaSelectCas(param)
          AreaSelectCas.init(base.opts.data)
        }
        break;
      case 3:
        dropDownHtml = provinceDropdown + cityDropDown + districtDropDown;
        base.$container.find('#sel-cascader-panel').html(dropDownHtml)
        if (base.opts.data.length > 0) {
          var param = Object.assign({}, {
            $province: base.$container.find('.sel-province'),
            $city: base.$container.find('.sel-city') || '',
            $district: base.$container.find('.sel-district') || '',
            data: base.opts.data,
            selected: base.opts.selected
          }, base.opts.areaSelect)
          var AreaSelectCas = $.AreaSelectCas(param)
          AreaSelectCas.init(base.opts.data)
        }
        break;
      case 4:
        dropDownHtml = provinceDropdown + cityDropDown + districtDropDown + dealerDropDown;
        base.$container.find('#sel-cascader-panel').html(dropDownHtml)
        $.DealerSelect({
          $province: base.$container.find('.sel-province'),
          $city: base.$container.find('.sel-city') || '',
          $district: base.$container.find('.sel-district') || '',
          $dealer: base.$container.find('.sel-delaer-element') || '',
        }).init()
        break;
      default:
        break;
    }
  }

  CascaderSelect.prototype.bindEvent = function () {
    var base = this
    base.$container.off('click.wrap').on('click.wrap', $.proxy(this.wrapClick, this));

    base.$container.off('mousedown').on('mousedown', $.proxy(function (event) {
      base.$container.find('#sel-cascader-btn').focus();
      event.stopPropagation();
    }, base));
    $(document).off('mousedown.cascader').on('mousedown.cascader', $.proxy(function () {
      base.$container.removeClass('open');
    }, base));

    base.$container.off('blur.wrap').on('blur.wrap', $.proxy(function () {
      base.$container.removeClass('open');
    }, base));

    base.$container.off('area.city.select').on('area.city.select', $.proxy(base.handleCitySelectRender, base));
    base.$container.off('area.district.select').on('area.district.select', $.proxy(base.handleDistrictSelectRender, base));
    base.$container.off('area.dealer.select').on('area.dealer.select', $.proxy(base.handleDealerSelectRender, base));
  }
  // 经销商选择事件完成后监听
  CascaderSelect.prototype.handleDealerSelectRender = function (e) {
    var base = this;
    base.$container.find('.input-text-dealer').text(e.Name)
    base.$container.removeClass('open')
  }

  CascaderSelect.prototype.handleCitySelectRender = function (e) {
    var base = this;
    base.$container.find('.input-text-province').text(e.provinceName)
    base.$container.find('.input-text-city').text(e.Name)
    base.$container.find('.input-text-district').text('区/县')
    base.$container.find('.input-text-dealer').text('经销商')
    base.opts.level <= 2 && base.$container.removeClass('open')
  }

  CascaderSelect.prototype.handleDistrictSelectRender = function (e) {
    var base = this;
    base.$container.find('.input-text-district').text(e.Name)
    base.$container.find('.input-text-dealer').text('经销商')
    base.opts.level <= 3 && base.$container.removeClass('open')
    if (!base.inited) {
      base.$container.removeClass('open')
      base.inited = true
    }
  }

  CascaderSelect.prototype.wrapClick = function (e) {
    var base = this
    e.stopPropagation();
    if (e.originalEvent && !base.$container.hasClass('open')) {
      base.$container.addClass('open');
    }
  }
  CascaderSelect.prototype.handleSelectCascader = function (e) {
    var base = this
    var $target = $(e.currentTarget);
    $target.parent().addClass('open')
  }

  $.CascaderSelect = function (options) {
    return new CascaderSelect(options)
  }

  $.CascaderSelect.Constructor = CascaderSelect


})(jQuery)