<template>
  <div class="x-button-group">
    <template v-for="(item, index) in realButtonList">
      <slot v-if="item.slot && item.slot.name" :name="item.slot.name" :item="item"></slot>
      <x-button-group-item v-else-if="item.render" :item="item" :key="index"></x-button-group-item>
      <div v-else-if="item.separator" class="x-button-group-separator" :key="index"></div>
      <el-dropdown v-else-if="hasChildren(item)" @command="handleCommand" trigger="click" :key="index" @visible-change="handleVisibleChange">
        <el-button plain class="x-dropdown-button">更多<i class="el-icon--right" :class="{'el-icon-caret-bottom': !dropdownVisible, 'el-icon-caret-top': dropdownVisible}"></i></el-button>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <template v-slot:default>
              <el-dropdown-item v-for="child in item.children" :key="child.name" :command="child">{{child.name}}</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button v-else :icon="item.icon" :type="getType(item)" :class="item.class" :plain="item.plain || false" :key="item.name" :disabled="item.disabled" @click="item.click({item, $event})"
      ><i v-if="item.prefixIcon" :class="item.prefixIcon" class="el-icon--left"></i>{{item.name}}<i  v-if="item.suffixIcon" :class="item.suffixIcon"  class="el-icon--right"></i>
      </el-button>
    </template>
    <div class="x-button-group-right">
      <template v-for="(item, index) in realRightButtonList">
        <slot v-if="item.slot" :name="item.slot.name" :item="item"></slot>
        <div v-else-if="item.separator" class="x-button-group-separator" :key="index"></div>
        <el-button v-else :icon="item.icon" :type="getType(item)" :class="item.class" :plain="item.plain || false" :key="item.name" :disabled="item.disabled" @click="item.click({item, $event})"
        ><i v-if="item.prefixIcon" :class="item.prefixIcon" class="el-icon--left"></i>{{item.name}}<i  v-if="item.suffixIcon" :class="item.suffixIcon"  class="el-icon--right"></i>
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import {getButtonSlotArray, getShowList} from '../../util/componentUtil';
import {Dropdown, DropdownMenu, DropdownItem, Button} from 'element-ui';
import XButtonGroupItem from './x-button-group-item';
export default {
  name: 'XButtonGroup',
  components: {
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Button.name]: Button,
    [XButtonGroupItem.name]: XButtonGroupItem
  },
  props: {
    buttonConfig: {
      type: Object,
      default () {
        return {
          list: [
            /* {
              slot: { // 插槽
                name: '' // 插槽名称
              },
              separator: {}, // 分隔符
              children: [] // 子元素，用于更多下拉按钮
            } */
          ],
          rightList: [] // 右边的按钮
        };
      }
    }
  },
  data() {
    return {
      dropdownVisible: false
    };
  },
  computed: {
    buttonSlotArray() {
      return getButtonSlotArray({list: this.realButtonList});
    },
    realButtonList() {
      const list = getShowList(this.buttonConfig.list);
      // 如果相邻的两个元素都是separator,需要将其中一个删掉
      // 如果第一个元素是separator也要删掉
      for (let i = list.length - 1; i > 0; i--) {
        const item = list[i];
        const previousItem = list[i - 1];
        if (item.separator && previousItem.separator) {
          list.splice(i, 1);
        }
      }
      if (list.length > 0 && list[0].separator) {
        list.splice(0, 1);
      }
      return list;
    },
    realRightButtonList() {
      if (!Array.isArray(this.buttonConfig.rightList)) {
        return [];
      }
      return getShowList(this.buttonConfig.rightList);
    }
  },
  methods: {
    handleCommand(item) {
      item.click && item.click({item});
    },
    getType(item) {
      if (Object.hasOwnProperty.call(item, 'type')) {
        return item.type;
      } else {
        return 'primary';
      }
    },
    hasChildren(item) {
      return Array.isArray(item.children) && item.children.length > 0;
    },
    handleVisibleChange(flag) {
      this.dropdownVisible = flag;
    }
  }
};
</script>
