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

<script setup>
import { ref, watch, onMounted, onUnmounted } 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: '确定'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const popup = ref()
const elderMode = ref(false)

// 处理长辈模式变化
const handleElderModeChange = () => {
  try {
    const storedElderMode = uni.getStorageSync('elderMode');
    elderMode.value = storedElderMode === 'true' || storedElderMode === true;
  } catch (error) {
    console.error('获取长辈模式状态失败:', error);
    elderMode.value = false;
  }
};

onMounted(() => {
  handleElderModeChange();
  uni.$on('elderModeChanged', handleElderModeChange);
});

onUnmounted(() => {
  uni.$off('elderModeChanged', handleElderModeChange);
});

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

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

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

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

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

  &--elder {
    width: 690rpx;
    border-radius: 20rpx;
    padding: 50rpx 40rpx 40rpx;
  }
}

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

  &--elder {
    font-size: 42rpx;
    margin-bottom: 32rpx;
  }
}

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

  &--elder {
    font-size: 36rpx;
    line-height: 1.8;
    margin-bottom: 40rpx;
    font-weight: 500;
  }
}

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

  &--elder {
    gap: 24rpx;
  }
}

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

  &--elder {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 36rpx;
    border-radius: 20rpx;
    font-weight: 600;
  }
}

.cancel-btn {
  color: $theme-brown-secondary;
  border: 1px solid $theme-brown-border;
  background: transparent;
}

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