<template>
  <div class="btn-bar">
    <mu-btn v-for="(btnItem, index) in currentList"
            :key="index" :config="{...btnItem, size:btnItem.size || config.size}"
            @click="onClick(btnItem)"></mu-btn>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  type Size = 'small' | 'medium' | 'large';
  interface BtnConfig {
    size?: Size,
    params?: any,
    list?: any
  }
  @Component({
    name: 'muBtnBar'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: BtnConfig;
    currentList: any = [];

    mounted() {
      this.config.list.forEach((item: any) => {
        this.currentList.push(Object.assign({}, item));
      });
    }

    onClick(btnItem: any) {
      btnItem.onClick(this.config.params, btnItem, this.currentList,
        {
          setDisabled: this.setDisabled,
          setLoading: this.setDisabled
        }
      );
    }

    setDisabled(btnItem: any, disabled: boolean = true) {
      btnItem.disabled = disabled;
    }

    setLoading(btnItem: any, isLoading: boolean = true) {
      btnItem.loading = isLoading;
    }
  }
</script>

<style lang="scss">
  .btn-bar {
    height: 28px;
    line-height: 28px;
  }
</style>
