<template>
  <component :is="compType" :size="size" :title="title" :target="target" show-close="false"
             v-on:speech-bubble-opend = "_openEvent" v-on:speech-bubble-closed = "_closeEvent">
    <div class="accordion-filter">
      <ul>
        <li v-for="(item, index) in itemsComputed" :class="item.className"
            @click.stop.prevent="_itemOnClick($event)" :data-state="item.hcCheck" role="li">
          <!--没有子节点的li-->
          <input v-if="item.haveChild===false" :id="'tau-chk-nc-' + index" type="checkbox" tabindex="1"
                 :name="itemName" :checked="item.checked" :disabled="item.disabled" :value="item.value"
                 :idx="item.id">
          <label v-if="item.haveChild===false" :for="'tau-chk-nc-' + index">{{item.label}}
            <span class="count" v-if="!!item.count&&item.count>0">({{item.count}})</span>
          </label>
          <!--有子节点的li-->
          <a v-if="item.haveChild===true" class="accordion-filter__parent-item-toggle" tabindex="1" href="#"
             :idx="item.id" @click.stop.prevent="_itemOnClick($event)" role="link-hc">
            <label>{{item.label}}
              <span class="count" v-if="!!item.count&&item.count>0">({{item.count}})</span>
            </label>
          </a>
          <a v-if="item.haveChild===true" href="#" tabindex="1"
             class="accordion-filter__parent-item-expand icon icon-arrow-down"
             @click.stop.prevent="_itemOnClick($event)" role="link-arrow"></a>
          <ul v-if="item.haveChild===true" class="accordion-filter__parent-item-list">
            <li v-for="(itemChild, indexChild) in item.item" class="accordion-filter__leaf-item form-checkbox" :idx="itemChild.id"
                @click.stop.prevent="_itemOnClick($event)" role="li-child">
              <input :id="'tau-chk-child-' + indexChild" type="checkbox" tabindex="1"
                     :name="itemName" :checked="itemChild.checked" :disabled="itemChild.disabled"
                     :value="itemChild.value"
                     :idx="itemChild.id">
              <label :for="'tau-chk-child-' + indexChild" >{{itemChild.label}}
                <span class="count" v-if="!!itemChild.count&&itemChild.count>0">({{itemChild.count}})</span>
              </label>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="box--greyed multi-filter__submit-panel">
      <button type="button" class="button button--action button--small" @click="_buttonClick">{{buttonName}}</button>
    </div>
  </component>
</template>
<script>
  import SpeechBubble from '../speech-bubble/speech-bubble.vue';

  const HAS_CHILD_ITEM_CLASS = 'accordion-filter__parent-item form-checkbox';
  const HAS_CHILD_ITEM_IS_EXPANDED_CLASS = 'accordion-filter__parent-item form-checkbox is-expanded';
  const NON_CHILD_ITEM_CLASS = 'accordion-filter__leaf-item accordion-filter__leaf-parent-item form-checkbox';
  const IS_EXPANDED_CLASS = 'is-expanded';
  const ALL_SELECTED = 'all-selected';
  const NON_SELECTED = 'non-selected';
  const SOME_SELECTED = 'some-selected';

  export default {
    name: 'taurus-speech-bubble-filter',
    components: {
      't-speech-bubble': SpeechBubble
    },
    data: function () {
      return {
        compType: 't-speech-bubble',
        isShow: false,
        itemsFormat: [],
        itemArr: []
      };
    },
    props: {
      // 调用speech-bubble的组件id
      target: {
        type: String,
        required: true
      },
      // small或者large
      size: {
        default: 'large',
        type: String
      },
      // 标题名称
      title: {
        default: 'Speech Bubble',
        type: String
      },
      // 多选框的name属性
      itemName: {
        default: '',
        type: String
      },
      // 按钮名称
      buttonName: {
        default: 'Update',
        type: String
      },
//      /**
//       * [
//       * {
//       *   label: 'item4',  展示字段
//       *   checked: true,   是否选中
//       *   disabled: false, 是否可选
//       *   value: 'value4', 值
//       *   pid: '',         父节点ID
//       *   id: 4            节点ID
//        }
//       * ]
//       */
      items: {
        type: Array
      }
    },
    created: function () {
    },
    computed: {
      itemsComputed: function () {
        this.itemArr = this.items;
        this._formatItems();
        return this.itemArr;
      }
    },
    methods: {
      /**
       * 打开方法
       */
      open: function () {
        this.$children[0].open();
      },
      /**
       * 关闭方法
       */
      close: function () {
        this.$children[0].close();
      },
      getCheckItem: function () {
        var itemArrTemp = [];
        for (var o in this.itemArr) {
          if (this.itemArr[o].checked) {
            itemArrTemp.push(this.itemArr[o]);
          }
        }
        return itemArrTemp;
      },
      /**
       * 打开方法事件
       */
      _openEvent: function () {
        this.isShow = true;
        this.$emit('speech-bubble-opend');
      },
      /**
       * 关闭方法事件
       */
      _closeEvent: function () {
        this.isShow = false;
        // 调用关闭时的触发事件
        this.$emit('speech-bubble-closed');
      },
      _itemOnClick: function (event) {
        var role = event.currentTarget.getAttribute('role');
        var idx = event.currentTarget.getAttribute('idx');
        var selectState = '';
        if (role === 'li' || role === 'li-child') { // 没有子节点
          var isChecked = false;
          if (!event.currentTarget.firstElementChild.disabled) {
            if (!event.currentTarget.firstElementChild.checked) {
              event.currentTarget.firstElementChild.checked = true;
              isChecked = true;
            } else {
              event.currentTarget.firstElementChild.checked = false;
            }
            this._setItemChecked(idx, isChecked);
          }
          // 如果是子节点 要更新父节点状态
          if (role === 'li-child') {
            var parentLi = event.currentTarget.parentNode.parentNode;
            var pid = parentLi.firstElementChild.getAttribute('idx');
            var childLis = event.currentTarget.parentNode.children;
            var checkCount = 0;
            if (childLis.length === 0) {
              return;
            }
            for (var i = 0; i < childLis.length; i++) {
              if (childLis[i].firstElementChild.checked) {
                checkCount++;
              }
            }
            if (checkCount === childLis.length) { // 全部选中
              parentLi.setAttribute('data-state', ALL_SELECTED);
              this._setItemChecked(pid, true);
            } else if (checkCount < childLis.length && checkCount > 0) {
              parentLi.setAttribute('data-state', SOME_SELECTED);
              this._setItemChecked(pid, false);
            } else if (checkCount < childLis.length && checkCount === 0) {
              parentLi.setAttribute('data-state', NON_SELECTED);
              this._setItemChecked(pid, false);
            }
          }
        } else if (role === 'link-hc') { // 有子节点
          var isCheckeds = false;
          var childNodes = event.currentTarget.parentNode.children || [];
          var childUl = null;
          var childLi = [];
          selectState = event.currentTarget.parentNode.getAttribute('data-state');
          if (selectState === ALL_SELECTED) {
            event.currentTarget.parentNode.setAttribute('data-state', NON_SELECTED);
            // 对父节点的checked状态做变更
            this._setItemChecked(idx, isCheckeds);
          } else if (selectState === SOME_SELECTED) {
            event.currentTarget.parentNode.setAttribute('data-state', ALL_SELECTED);
          } else if (selectState === NON_SELECTED) {
            event.currentTarget.parentNode.setAttribute('data-state', ALL_SELECTED);
            isCheckeds = true;
            // 对父节点的checked状态做变更
            this._setItemChecked(idx, isCheckeds);
          }

          // 查找子节点元素并更改chechbox选中状态
          if (childNodes.length > 0) {
            childUl = childNodes[childNodes.length - 1];
            if (childUl.tagName === 'UL') {
              childLi = childUl.children;
              for (var index = 0; index < childLi.length; index++) {
                var liNode = childLi[index];
                if (!liNode.firstElementChild.disabled) {
                  liNode.firstElementChild.checked = isCheckeds;
                }
              }
            }
          }

          // 全选的话查找子节点并选中并对子节点的checked状态做变更
          this._setChildItemChecked(idx, isCheckeds);
        } else if (role === 'link-arrow') { // 箭头按钮
          var className = event.target.parentNode.getAttribute('class');
          if (className.indexOf(IS_EXPANDED_CLASS) <= -1) {
            event.target.parentNode.setAttribute('class', HAS_CHILD_ITEM_IS_EXPANDED_CLASS);
          } else {
            event.target.parentNode.setAttribute('class', HAS_CHILD_ITEM_CLASS);
          }
        }
      },
      _buttonClick: function (e) {
        this.$emit('speech-bubble-button-click');
      },
      _setChildItemChecked: function (pid, isChecked) {
        for (var o in this.itemArr) {
          if (!!this.itemArr[o].pid && this.itemArr[o].pid + '' === pid + '') {
            this.itemArr[o].checked = isChecked;
          }
        }
      },
      _setItemChecked: function (idx, isChecked) {
        for (var o in this.itemArr) {
          if (!!this.itemArr[o].id && this.itemArr[o].id + '' === idx + '') {
            this.itemArr[o].checked = isChecked;
            return;
          }
        }
      },
      _formatItems: function () {
        this.itemsFormat = [];
        // var pItemsObj = {};
        // 循环出父节点
        for (var i = 0; i < this.itemArr.length; i++) {
          var obj = this.itemArr[i];
          var childCheckCount = 0;
          // 默认值 引入工具后可以用extend合并
          if (!obj.disabled) {
            obj.disabled = false;
          }
          if (!obj.checked) {
            obj.checked = false;
          }
          if (obj.id && obj.id !== '') {
            if (!obj.pid) { // 没有父节点
              obj.item = [];// 装子节点的数组

              // 把子节点放入父节点的object中
              for (var j = 0; j < this.itemArr.length; j++) {
                var obj1 = this.itemArr[j];
                if (obj1.pid && obj1.pid === obj.id) { // 有父节点
                  obj.item.push(obj1);
                  if (obj1.checked) {
                    childCheckCount++;
                  }
                }
              }
              // 根据子节点选中状态对父节点的选中状态赋值
              if (obj.item.length === childCheckCount && obj.item.length > 0) {
                obj.hcCheck = ALL_SELECTED;
              } else if (obj.item.length > childCheckCount && obj.item.length > 0 && childCheckCount > 0) {
                obj.hcCheck = SOME_SELECTED;
              } else {
                obj.hcCheck = NON_SELECTED;
              }

              // 分别定义有子节点的li的class和没有子节点的li的class复制
              if (obj.item.length === 0) {
                obj.className = NON_CHILD_ITEM_CLASS;
                obj.haveChild = false;
              } else {
                obj.className = HAS_CHILD_ITEM_CLASS;
                obj.haveChild = true;
              }
              this.itemsFormat.push(obj);
            }
          } else {
            console.log('id is required:' + this.itemArr[i].label);
          }
        }
      }
    }
  };
</script>
