<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 class="accordion-filter__leaf-item accordion-filter__leaf-parent-item form-checkbox"
            v-for="(item, index) in computedLabels" @click.stop.prevent="_itemOnClick($event)">
          <input type="checkbox" :id="'tau-chk-' + index" :name="itemName" :checked="computedChecked[index]" :disabled="computedDisabled[index]"
                 :value="computedValues[index]" :idx="index">
          <label :for="'tau-chk-' + index">{{ item }}</label>
        </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 DEF_VALUE = '-';

  export default {
    name: 'taurus-speech-bubble-filter',
    components: {
      't-speech-bubble': SpeechBubble
    },
    data: function () {
      return {
        compType: 't-speech-bubble',
        isShow: false,
        labelsArr: [],
        disabledArr: [],
        valuesArr: [],
        checkedArr: []
      };
    },
    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
      },
      // checkbox的label
      labels: {
        default: 'Untitled',
        type: [String, Array]
      },
      disabled: {
        default: function () {
          return '0';
        },
        type: [String, Array]
      },
      values: {
        default: DEF_VALUE,
        type: [String, Array]
      },
      checked: {
        default: '0',
        type: [String, Array]
      }
    },
    created: function () {
    },
    computed: {
      computedLabels: function () {
        if (typeof this.labels === 'string' && this.labels !== '') {
          this.labelsArr = this.labels.split(',');
        } else {
          this.labelsArr = this.labels;
        }
        return this.labelsArr;
      },
      computedValues: function () {
        if (typeof this.values === 'string' && this.values !== '') {
          this.valuesArr = this.values.split(',');
        } else {
          this.valuesArr = this.values;
        }
        return this.valuesArr;
      },
      computedDisabled: function () {
        var arr;
        var i;
        var item;
        if (typeof this.disabled === 'string' && this.disabled !== '') {
          arr = this.disabled.split(',');
          for (i = arr.length - 1; i >= 0; i--) {
            item = arr[i];
            arr[i] = (item === 'false' || item === '0') ? false : !!item;
          }
          this.disabledArr = arr;
        } else {
          this.disabledArr = this.disabled;
        }
        return this.disabledArr;
      },
      computedChecked: function () {
        var arr;
        var i;
        var item;
        if (typeof this.checked === 'string' && this.checked !== '') {
          arr = this.checked.split(',');
          for (i = arr.length - 1; i >= 0; i--) {
            item = arr[i];
            arr[i] = (item === 'false' || item === '0') ? false : !!item;
          }
          this.checkedArr = arr;
        } else {
          this.checkedArr = this.checked;
        }
        return this.checkedArr;
      }
    },
    methods: {
      /**
       * 打开方法
       */
      open: function () {
        this.$children[0].open();
      },
      /**
       * 关闭方法
       */
      close: function () {
        this.$children[0].close();
      },
      getCheckItem: function () {
        var itemArr = [];
        for (var i = 0; i < this.labelsArr.length; i++) {
          if (this.checkedArr[i]) {
            var itemObj = {};
            itemObj.label = this.labelsArr[i];
            itemObj.value = this.valuesArr[i];
            itemArr.push(itemObj);
          }
        }
        return itemArr;
      },
      /**
       * 打开方法事件
       */
      _openEvent: function () {
        this.isShow = true;
        this.$emit('speech-bubble-opend');
      },
      /**
       * 关闭方法事件
       */
      _closeEvent: function () {
        this.isShow = false;
        // 调用关闭时的触发事件
        this.$emit('speech-bubble-closed');
      },
      _itemOnClick: function (event) {
        if (!event.currentTarget.firstElementChild.disabled) {
          var idx = event.currentTarget.firstElementChild.getAttribute('idx');
          if (!event.currentTarget.firstElementChild.checked) {
            event.currentTarget.firstElementChild.checked = true;
          } else {
            event.currentTarget.firstElementChild.checked = false;
          }
          if (idx < this.checkedArr.length) {
            this.checkedArr[idx] = event.currentTarget.firstElementChild.checked;
          }
        }
      },
      _buttonClick: function (e) {
        this.$emit('speech-bubble-button-click');
      }
    }
  };
</script>
