<template>
  <div class="flex items-center">
    <el-space :size="space">
      <span
        v-for="(item, index) in props.tableTextActions"
        :key="item.label"
        @click="item.onClick"
        :style="{
          pointerEvents: disList[index] ? 'none' : 'auto',
          textDecoration: 'underline',
          fontSize: '14px',
          width: '28px',
          color: disList[index] ? props.unactiveColor : props.activeColor,
        }"
      >
        {{ item.label }}
      </span>
    </el-space>
    <div class="divide"></div>
    <TableActionIcons v-bind="props.tableIconActions" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { ActionItem } from '@/components/Table';
  import { TableActionIcons } from '@/components/Table';

  type TableIconActionProp = {
    space: number;
    size: number;
    color: string;
    style: 'img' | 'icon';
    actionIcons: ActionItem[];
  };

  type TextBtnItem = {
    label: string;
    disabled: boolean;
    onClick?: Fn;
  };

  const props = defineProps<{
    space?: number;
    activeColor: string;
    unactiveColor: string;
    tableTextActions: TextBtnItem[];
    tableIconActions: TableIconActionProp;
  }>();

  const disList = computed(() => props.tableTextActions.map((item) => item.disabled));
</script>

<style scoped>
  .divide {
    width: 1px;
    height: 14px;
    background: #e9e9e9;
    margin: 0 14px;
  }
</style>
