<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="confirm-popup">
      <view class="confirm-title">{{ title }}</view>
      <view class="confirm-content">{{ content }}</view>
      <view class="confirm-footer">
        <view class="confirm-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
        <view class="confirm-btn confirm-btn-active" @click="handleConfirm">{{ confirmText }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';

const emits = defineEmits(['confirm', 'cancel', 'close'])
const props = defineProps({
  title: {
    type: String,
    default: '提示'
  },
  content: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const popup = ref()

function handleConfirm() {
  close()
  setTimeout(() => {
    emits('confirm')
  }, 500)
}

function handleCancel() {
  emits('cancel')
  close()
}

function close() {
  popup.value && popup.value.close()
  emits('close')
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open()
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.confirm-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx 30rpx;
  box-sizing: border-box;
}

.confirm-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 24rpx;
}

.confirm-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 32rpx;
}

.confirm-footer {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.confirm-btn {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  font-size: 28rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.cancel-btn {
  color: #8b6f47;
  border: 1px solid #d4c4a8;
  background: transparent;
}

.confirm-btn-active {
  color: white;
  background: #b8956a;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
}
</style>
