/**
*  @Author      LiuShaolong
*  @Description 按钮组
*  @CreateDate  2020/3/20
*/
<template>
  <el-row class="zy-button-group" v-if="items.length !== 0 || filterable || searchFilter && searchFilter.key">
    <el-col :style="'width: calc(100% - ' + spaceWidth + 'px; min-height: 1px'">
      <div style="display: flex; overflow: hidden; width: 100%;" ref="buttons-div">
        <el-button icon="el-icon-arrow-left" v-if="showMenuArrow" @click="menuArrowLeft"
                   style="color: #409EFF; border: none; padding: 0 2px; font-size: 16px;"></el-button>
        <el-button-group class="common-buttons" ref="common-buttons">
          <template v-for="btn in items">
            <zy-dropdown v-if="btn.buttonType === 'dropdown'" v-permission="btn.permission"
                         v-show="!(typeof btn.hidden === 'function' && btn.hidden())"
                         :name="btn.name" :type="btn.type" :icon="btn.icon" :items="btn.items"
                         :selection="selection" :params="params">
            </zy-dropdown>
            <zy-popover v-else-if="btn.buttonType === 'popover'" :name="btn.name"
                        v-show="!(typeof btn.hidden === 'function' && btn.hidden())"
                        :type="btn.type" :permission="btn.permission" :content="btn.content"
                        :icon="btn.icon" :disabled="checkDisabled(btn.disabled)" @submit="btn.click(selection, params)">
            </zy-popover>
            <el-button v-else v-permission="btn.permission" :type="btn.type ? btn.type : 'primary'"
                       :icon="btn.icon" :disabled="checkDisabled(btn.disabled)" @click="btn.click(selection, params)"
                       :loading="btn.loading" v-show="!(typeof btn.hidden === 'function' && btn.hidden())">
              {{ btn.name }}
            </el-button>
          </template>
        </el-button-group>
        <el-button icon="el-icon-arrow-right" v-if="showMenuArrow" @click="menuArrowRight"
                   style="color: #409EFF; border: none; padding: 0 2px; font-size: 16px;"></el-button>
        <slot name="message"></slot>
      </div>
    </el-col>
    <el-col :style="inline ? 'width: ' + this.totalSpace + 'px;' : ''">
      <el-col v-if="searchFilter && searchFilter.key" style="width: 220px">
        <zy-filter-select v-if="searchFilter.component === 'select'" :source="searchFilter.source"
                          :sources="searchFilter.options"
                          :init="searchFilter.init" :label="searchFilter.label" :multiple="searchFilter.multiple"
                          v-model="params[searchFilter.key]" :clearable="searchFilter.clearable === true"
                          @change="searchFilterChange">
        </zy-filter-select>
        <el-date-picker v-else-if="searchFilter.component === 'date' || searchFilter.component === 'datetime'"
                        :placeholder="'请选择' + searchFilter.label" @change="searchFilterChange"
                        v-model="params[searchFilter.key]"
                        :type="searchFilter.component" :clearable="searchFilter.clearable === true">
        </el-date-picker>
        <el-checkbox v-else-if="searchFilter.component === 'checkbox'" :label="searchFilter.label"
                     v-model="params[searchFilter.key]"
                     @change="searchFilterChange">
        </el-checkbox>
        <el-input v-model="params[searchFilter.key]" v-else-if="searchFilter.component === 'input'"
                  :placeholder="searchFilter.componentHint" suffix-icon="el-icon-search" @change="searchFilterChange">
        </el-input>
      </el-col>
      <el-col v-if="filterable"
              :style="!searchFilter || !searchFilter.key ? 'width: 100%;' : 'width: calc(100% - 220px);'">
        <el-input v-model="filterValue" style="vertical-align: top;" suffix-icon="el-icon-search"
                  placeholder="输入条件搜索" clearable>
        </el-input>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
  import store from '../../../vuex/store'

  export default {
    name: 'ZyButtonGroup',
    components: {},
    props: ['items', 'selection', 'params', 'searchFilter', 'filterable', 'filter'],
    data() {
      return {
        inline: true,
        showMenuArrow: false,
        container: '',
        parent: '',
      }
    },
    created() {
    },
    mounted() {
      let _this = this;
      if (this.items.length !== 0 || this.filterable || this.searchFilter && this.searchFilter.key) {
        _this.container = _this.$refs['common-buttons'].$el;
        _this.parent = _this.$refs['buttons-div'];
        _this.horizontalScroll(_this.container);
        store.commit('addResizeListener', _this.onWindowResize);
        window.onresize(null);
      }
    },
    watch: {
      inline: {
        handler: function (nv) {
          this.$emit('inline', nv)
        }
      }
    },
    computed: {
      totalSpace: {
        get() {
          let space = 0;
          if (this.filterable) {
            space += 180;
          }
          if (this.searchFilter && this.searchFilter.key) {
            space += 220;
          }
          return space;
        },
        set() {
        }
      },
      spaceWidth: {
        get() {
          return ((this.searchFilter && this.searchFilter.key) || this.filterable) && this.inline ? this.totalSpace : 0;
        },
        set(value) {
        }
      },
      filterValue: {
        get() {
          return this.filter;
        },
        set(value) {
          this.$emit('filter', value)
        }
      }
    },
    methods: {
      onWindowResize() {
        let _this = this;
        let space = _this.parent.offsetWidth - _this.container.offsetWidth;
        if (this.inline) {
          if (space === 0) {
            this.inline = false;
          } else {
            this.inline = !_this.showMenuArrow;
          }
        } else {
          this.inline = space > this.totalSpace;
        }
        _this.$nextTick(function () {
          _this.showMenuArrow = _this.container.offsetWidth !== _this.container.scrollWidth;
        })
      },
      checkDisabled(disabled) {
        if (disabled instanceof Function) {
          return disabled(this.selection, this.params);
        } else {
          return disabled;
        }
      },
      menuArrowLeft() {
        let container = this.$refs['common-buttons'].$el;
        container.scrollLeft += -150;
      },
      menuArrowRight() {
        let container = this.$refs['common-buttons'].$el;
        container.scrollLeft += 150;
      },
      horizontalScroll(container) {
        let isIE = navigator.userAgent.match(/MSIE (\d)/i);
        isIE = isIE ? isIE[1] : undefined;
        let isFF = /FireFox/i.test(navigator.userAgent);
        if (isIE < 9) {
          container.attachEvent("onmousewheel", function (e) {
            container.scrollLeft += e.wheelDelta / 2;
            return false;
          });
        } else if (!isFF) {
          container.addEventListener("mousewheel", function (e) {
            container.scrollLeft += -e.wheelDelta / 2;
            e.preventDefault();
          }, false);
        } else {
          container.addEventListener("DOMMouseScroll", function (e) {
            container.scrollLeft += e.detail * 80;
            e.preventDefault();
          }, false);
        }
      },
      searchFilterChange(value, init) {
        if (this.searchFilter.change instanceof Function) {
          this.searchFilter.change(value);
        }
        this.$emit('search', init);
      },
    },
  }
</script>
<style lang="scss">
  .zy-button-group {
    padding-right: 10px;
    padding-top: 4px;
    min-height: 1px;
  }

  .common-buttons {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    .el-dropdown {
      vertical-align: top;
      border: none;
    }

    .el-button {
      float: none;
      position: relative;
    }
    .el-dropdown > .el-button--primary {
      border-right-color: #409EFF;
    }
  }

</style>