<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title: string
    content: string
    cancelText: string
    confirmText: string
  }>(),
  {
    modelValue: false,
    title: '',
    content: '',
    cancelText: '',
    confirmText: '',
  }
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const show = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})

function handleCancel() {
  emit('cancel')
}

function handleConfirm() {
  emit('confirm')
}

function handleClose() {
  emit('cancel')
}
</script>

<template>
  <wd-popup v-model="show" position="center" round="true" custom-style="border-radius: 20rpx;" @close="handleClose">
    <view class="go-cart-popup">
      <view class="go-cart-popup__title">{{ title }}</view>
      <view class="go-cart-popup__content">{{ content }}</view>
      <view class="go-cart-popup__actions">
        <button class="go-cart-popup__btn go-cart-popup__btn--ghost" @click="handleCancel">
          {{ cancelText }}
        </button>
        <button class="go-cart-popup__btn go-cart-popup__btn--primary" @click="handleConfirm">
          {{ confirmText }}
        </button>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">
.go-cart-popup {
  width: 620rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx 30rpx 30rpx;
}

.go-cart-popup__title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
  text-align: center;
}

.go-cart-popup__content {
  margin-top: 22rpx;
  font-size: 28rpx;
  line-height: 1.5;
  color: #444;
  text-align: center;
  white-space: pre-wrap;
}

.go-cart-popup__actions {
  margin-top: 34rpx;
  display: flex;
  gap: 18rpx;
}

.go-cart-popup__btn {
  flex: 1;
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 14rpx;
  font-size: 28rpx;
  padding: 0;
}

.go-cart-popup__btn--ghost {
  border: 1rpx solid #d7d7d7;
  background: #fff;
  color: #555;
}

.go-cart-popup__btn--primary {
  border: 1rpx solid #14181b;
  background: #14181b;
  color: #fff;
}
</style>
