<template>
  <div
    class="flex items-center"
    :class="{
      'justify-between': props.between,
      'justify-around': props.around,
    }"
  >
    <el-button type="primary" :loading="props.loading" :size="size" @click="emit('confirm')">
      {{ props.okText }}
    </el-button>
    <el-button 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'

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

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

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

<style scoped lang="scss"></style>
