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

const props = defineProps<{
  modelValue: boolean;
  zIndex?: number;
}>();

function handleClose() {
  emit("update:modelValue", false);
  emit("close");
}

function handleConfirm() {
  emit("confirm");
  handleClose();
}
</script>

<template>
  <wd-popup
    :model-value="modelValue"
    @update:model-value="(val) => emit('update:modelValue', val)"
    position="bottom"
    :z-index="zIndex || 2000"
    custom-style="background: transparent;"
    @close="handleClose"
  >
    <view class="multi-store-notice">
      <view class="multi-store-notice__title">
        {{ t("pages-user.cart.orderNoticeTitle") }}
      </view>
      <view class="multi-store-notice__desc">
        {{ t("pages-user.cart.multiStoreCheckoutNoticeDesc") }}
      </view>
      <view class="multi-store-notice__btn-fixed">
        <wd-button
          block
          custom-class="multi-store-notice__btn"
          custom-style="height:88rpx;line-height:88rpx;"
          @click="handleConfirm"
          @tap="handleConfirm"
        >
          {{ t("common.gotIt") }}
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">
.multi-store-notice {
  margin: 0 24rpx calc(24rpx + constant(safe-area-inset-bottom));
  margin: 0 24rpx calc(24rpx + env(safe-area-inset-bottom));
  border-radius: 32rpx;
  padding: 44rpx 40rpx 180rpx;
  background: #fff;
  min-height: 420rpx;
}

.multi-store-notice__title {
  text-align: center;
  font-size: 42rpx;
  line-height: 52rpx;
  font-weight: 700;
  color: #111;
}

.multi-store-notice__desc {
  margin-top: 28rpx;
  font-size: 30rpx;
  line-height: 44rpx;
  color: #333;
  // text-align: center;
}

.multi-store-notice__btn-fixed {
  position: fixed;
  left: 64rpx;
  right: 64rpx;
  bottom: calc(48rpx + constant(safe-area-inset-bottom));
  bottom: calc(48rpx + env(safe-area-inset-bottom));
  z-index: 2200;
  pointer-events: auto;
}
</style>
