<script lang="ts" setup>
import { type PropType, computed } from 'vue'

const props = defineProps({
  status: {
    type: Number,
    required: true,
  },
  trigger: {
    type: Function as PropType<Function>,
    default: () => { },
  },
  id: {
    type: String,
    default: '',
  },
})

const actionConfig = {
  2: [{ label: '查看', key: 'view' }, { label: '通过', key: 'approval' }, { label: '不通过', key: 'reject' }],
  3: [{ label: '查看', key: 'view' }],
  5: [{ label: '查看', key: 'view' }],
}

const actions = computed(() => {
  return actionConfig[props.status]
})
</script>

<template>
  <div :data-id="id">
    <n-button
      v-for="(action, index) in actions" :key="index" class="normal"
      :class="{ gap: index !== 0, reject: index === 1 }" text @click="(trigger(action) as any)"
    >
      {{ action.label }}
    </n-button>
  </div>
</template>

<style scoped>
.normal {
  color: #507AFD
}

.gap {
  margin-left: 15px;
}

.reject {
  color: #FF4E4F;
}
</style>
