<template>
  <a-button
    v-if="!button.children"
    :class="{
      [$style.button]: !$attrs.disabled,
      [$style.action]: !$attrs.type,
      [className]: true,
    }"
    v-bind="$attrs"
    @click="() => this.$emit('click', button)"
  >
    {{ button.buttonName }}
  </a-button>
  <a-dropdown v-else v-bind="$attrs">
    <a-button
      :class="{
        [$style.managerbtn]: true,
        [$style.button]: !$attrs.disabled,
        [$style.action]: !$attrs.type,
        [className]: true,
      }"
      v-bind="$attrs"
    >
      {{ button.buttonName }}<a-icon type="down" />
    </a-button>
    <a-menu slot="overlay">
      <a-menu-item
        v-for="btn in button.children"
        :key="btn.buttonId"
        :class="[$style.menu, 'sd-for-button-' + $attrs.type || '', className]"
        @click="() => $emit('click', btn)"
      >
        <a-icon v-if="icon"></a-icon>
        <span :title="btn.buttonDesc || btn.buttonName">
          {{ btn.buttonName }}
        </span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import components from './_import-components/sd-webflow-button-import'
// 三个区域的按钮，抽成一个组件
export default {
  name: 'SdWebflowButton',
  components,
  props: {
    button: {
      type: Object,
      required: true,
    },
    icons: {
      type: Object,
      default: () => ({}),
    },
    className: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    icon() {
      return this.icons[this.button.buttonId] || this.icons[this.button.fakeId]
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
// add by zzb
.managerbtn {
  width: 130px;
  i {
    margin-left: -5px !important;
  }
}
.button {
  margin-right: 3px;
  max-width: 100%;
  :global(.anticon):last-child {
    margin-left: 2px;
  }
  &:not(:global(.ant-btn-link)) > span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
  &:last-child {
    margin-right: 0;
  }
}
.action {
  min-width: 24%;
  margin: 0 0.5%;
  margin-top: 10px;
}
.menu {
  &:global.sd-for-button-primary {
    text-align: center;
  }

  padding-left: 15px;
}
</style>
