<template>
  <div class="default-table-footer-operator">
    <div class="default-table-footer-operator-add-one" v-if="showAddBtn" @click.stop="onAddRow">
      <oio-icon size="14" icon="oinone-plus-outlined" color="var(--oio-primary-color)"></oio-icon>
      {{ $translate('添加一行') }}
    </div>

    <!-- 快速填报 -->
    <element-tag widget="QuickFill" v-if="showQuickFill"></element-tag>
  </div>
</template>

<script lang="ts">
import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
import { defineComponent } from 'vue';
import Element from '../../tags/Element.vue';

export default defineComponent({
  name: 'DefaultTableFooterOperator',
  props: {
    showAddBtn: {
      type: Boolean,
      default: false
    },
    showQuickFill: {
      type: Boolean,
      default: false
    },
    onAddRow: {
      type: Function,
      required: true
    }
  },
  components: {
    OioIcon,
    ElementTag: Element
  }
});
</script>

<style lang="scss">
.default-table-footer-operator {
  text-align: left;
  position: relative;
  width: 100%;
  color: var(--oio-primary-color);
  top: calc(var(--oio-row-gap) / 2 * -1);
  display: flex;
  column-gap: var(--oio-row-gap);

  .default-table-footer-operator-add-one {
    cursor: pointer;
    display: flex;
    align-items: center;
    column-gap: 4px;
  }
}
</style>
