<template>
  <div class="btn-list">
    <a-button :class="item.className"
              v-for="item in btnList"
              :key="item.lable"
              @click.stop="onClick(item)">
      {{item.lable}}
    </a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { BtnList } from './interface';

export default defineComponent({
    props: {
        btnList: {
            // 按钮列表数据
            default: [],
            type: Array as PropType<BtnList[]>,
        },
        record: {
            default: {},
            type: Object,
        },
    },
    setup(props, context) {
        function onClick(item: BtnList) {
            console.log(`${item.lable}:${item.code}`);
            context.emit('click', item, props.record);
        }
        return { onClick };
    },
});
</script>

<style lang="less">
.btn-list {
    display: inline-flex;
}
</style>
