<template>
  <view v-if="showCancel || showConfirm" class="relative flex px-15 py-12 bg-white text-center"
    :class="hidedenShadow ? '' : 'shadow-up'">
    <view v-if="showCancel" class="flex-grow py-10 text-base border-primary rounded text-primary rounded"
      @click="cancel()">
      {{ cancelText }}
    </view>
    <view v-if="showConfirm" class="flex-grow py-10 text-base border-primary bg-primary text-white rounded"
      :class="showCancel && showConfirm ? 'ml-15' : ''" @click="confirm()">
      {{ confirmText }}
    </view>
  </view>
</template>
<script setup>
import useDebounce from '@/utils/useDebounce';

const emits = defineEmits(['cancel', 'confirm']);
const props = defineProps({
  hidedenShadow: {
    type: Boolean,
    default: false
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确认'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  }
})

const cancel = useDebounce(() => emits('cancel'));
const confirm = useDebounce(() => emits('confirm'));

</script>