<template>
  <div class="one_button">
    <div
      v-if="btnConfig.loading"
      class="demo-spin-container"
    >
      <Spin fix />
    </div>
    <div
      class="buttonBox"
      :class="btnConfig.btnsite"
    >
      <div
        v-for="(item , index) in btnConfig.buttons"
        :key="index"
      >
        <div
          v-if="( item.isShow === false || item.isShow )? item.isShow : true"
          class="buttonGroup"
        >
          <Button
            v-if="!item.dropDown"
            :ref="item.ref"
            :type="item.type ? item.type : btnConfig.typeAll"
            :size="item.size ? item.size : 'small'"
            :custom-icon="item.icon ? item.icon : ''"
            :icon="item.icon ? item.icon : ''"
            :disabled="item.disabled ? item.disabled : false"
            :ghost="item.ghost ? false : true"
            :shape="item.shape?item.shape:undefined"
            :class="item.class"
            :loading="item.loading"
            @click.native="item.btnclick"
          >
            {{ item.text }}
          </Button>
          <!-- 下拉菜单按钮 -->
          <Dropdown
            v-else-if="item.dropDown && item.menus.length>0"
            @on-click="dropDownClick"
          >
            <Button
              :ref="item.ref"
              :type="item.type ? item.type : btnConfig.typeAll"
              :size="item.size ? item.size : 'small'"
              :icon="item.icon ? item.icon : ''"
              :disabled="item.disabled ? item.disabled : false"
              :ghost="item.ghost ? false : true"
              :shape="item.shape?item.shape:undefined"
              :class="item.class"
            >
              {{ item.menuText }}
              <Icon type="ios-arrow-down" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                v-for="(menu_item , index) in item.menus"
                :key="index"
                :name="menu_item.webname"
              >
                {{ menu_item.text }}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
      <div
        v-for="(item , index) in btnConfig.right_btn"
        :key="index"
        class="right_btn"
      >
        <Button
          v-if="( item.isShow === false || item.isShow )? item.isShow : true"
          :ref="item.ref"
          :key="index"
          :type="item.type ? item.type : btnConfig.typeAll"
          :size="item.size ? item.size : 'small'"
          :custom-icon="item.icon ? item.icon : ''"
          :disabled="item.disabled ? item.disabled : false"
          :ghost="item.ghost ? false : true"
          :class="item.class"
          @click.native="item.btnclick"
        >
          {{ item.text }} 
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
  import businessButton from './js/businessButton.js';

  export default businessButton;
</script>
<style lang='less'>
  button.loadingBtn {
    width: 72px;
    i.iconfont {
      position: unset !important;
    }
    i.iconfont + span {
      display: inline-block !important;
      margin-left: unset;
    }
  }
</style>
<style lang='less' scoped>
@import "css/businessButton.less";
</style>
