<template>
  <view class="flex items-center justify-center pt-20">
    <view v-if="showCancel" class="px-46 py-20 text-28 text-fore-light" @click="handleCancel">{{ cancelText }}</view>
    <text class="text-30 text-fore-title font-bold flex-1 text-center">{{ title }}</text>
    <view v-if="showConfirm" class="px-46 py-20 text-28 text-fore-title" @click="handleConfirm">{{ confirmText }}</view>
  </view>
</template>
<script lang="ts" setup>
type ToolbarOption = {
  title: string;
  cancelText: string;
  confirmText: string;
  showCancel: boolean;
  showConfirm: boolean;
}
const props = withDefaults(defineProps<ToolbarOption>(), {
  title: '',
  cancelText: '取消',
  confirmText: '确认',
  showCancel: true,
  showConfirm: true,
});
const emit = defineEmits(['cancel', 'confirm']);
const handleCancel = () => {
  emit('cancel');
}
const handleConfirm = () => {
  emit('confirm');
}
</script>
<style lang="scss" scoped></style>