<template>
  <div
    class="flex items-center confirm-button"
    :class="{
      'justify-between': props.between,
      'justify-around': props.around,
      'justify-end': props.right,
    }"
  >
    <el-button
      :disabled="!!props.disabled"
      v-bind="props.okProps"
      type="primary"
      :loading="props.loading"
      :size="size"
      @click="emit('confirm')"
    >
      {{ props.okText }}
    </el-button>
    <el-button v-bind="props.cancelProps" plain :size="size" @click="emit('cancel')">{{ props.cancelText }}</el-button>
  </div>
</template>

<script setup lang="ts" name="ConfirmButton">
import { computed, withDefaults } from 'vue'
import { ElButton, useSize } from 'element-plus'
import type { VNode } from 'vue'
import type { ButtonProps } from 'element-plus'

const props = withDefaults(
  defineProps<{
    okText?: string | VNode
    cancelText?: string | VNode
    size?: 'large' | 'default' | 'small'
    loading?: boolean
    between?: boolean
    around?: boolean
    okProps?: Partial<ButtonProps>
    cancelProps?: Partial<ButtonProps>
    right?: boolean
    disabled?: boolean
  }>(),
  {
    okText: '确认',
    cancelText: '取消',
    size: 'default',
    between: false,
    around: false,
    okProps: void 0,
    cancelProps: void 0,
    right: false,
  }
)

const size = useSize(computed(() => props.size))

const emit = defineEmits(['confirm', 'cancel'])
</script>

<style scoped lang="scss">
.confirm-button {
  &.text-right {
  }
}
</style>
