<script setup lang="ts">
const { t } = useI18n();
const emit = defineEmits(['confirm','close'])

const show = ref(false);
const goodsName = ref('');
function onOpen(title: string) {
  if (title) {
    goodsName.value = title;
  }
  show.value = true;
}
function handleClose() {
  show.value = false;
  emit('close')
}
function confirmRemove(){
  emit('confirm')
  handleClose()
}

defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup
      v-model="show"
      position="bottom"
      @close="handleClose"
  >
    <view class="px-30rpx text-#333 text-center pt-48rpx pb-60rpx">
      <view class="text-40rpx lh-40rpx font-500">Remove the product?</view>
      <view class="text-28rpx lh-28rpx mt-36rpx">
        Are you sure you want to remove {{ goodsName }} from your shopping cart?
      </view>
      <view class="mt-70rpx">
        <wd-button @click="confirmRemove" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
          {{ t('common.remove') }}
        </wd-button>
        <view @click="handleClose" class="text-center  mt-52rpx text-36rpx lh-36rpx text-#333 font-500">{{ t('common.close') }}</view>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>