<template>
  <div class="tableAction" :style="`justify-content: ${getAlign}`">
    <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
      <n-button v-if="!action.type || action.type === 'button'" class="tableAction__item" v-bind="action.props">{{ action.label }}</n-button>
      <n-popconfirm
        v-if="action.type === 'popconfirm'"
        v-bind="action.props"
      >
        <template #trigger>
          <n-button v-bind="action.ButtonProps" class="tableAction__item">{{ action.label }}</n-button>
        </template>
        {{ action.tip }}
      </n-popconfirm>
    </template>
  </div>
</template>

<script>
import { defineComponent, computed, toRaw, reactive } from 'vue'
export default defineComponent({
  name: 'TableAction',
  props: {
    actions: {
      type: Array,
      default: null,
      required: true
    },
    align: {
      type: String,
      default: 'center',
      validator: (value) => {
        return ['left', 'right', 'center'].indexOf(value) !== -1
      }
    }
  },
  setup(props, { emit }) {
    const data = reactive({
      permissionList: [
        'basic_list'
      ]
    })

    const getActions = computed(() => {
      return (toRaw(props.actions) || [])
        .filter((action) => {
          return data.permissionList.includes(action.auth) || action.auth === ''
        })
    })

    const getAlign = computed(() => {
      return toRaw(props.align)
    })

    return {
      getActions,
      getAlign
    }
  }
})

</script>
<style scoped lang='scss'>
.tableAction{
  display: flex;
  align-items: center;
  .tableAction__item{
    margin: 0 5px;
  }
  // justify-content: center;
}
</style>
