<template>
  <view>
    <wd-popup
      v-model="localShow"
      position="bottom"
      custom-style="height: 200px;"
      @close="handleClose"
    >
      <view class="popup-header" v-if="isShowTitle">
        <view class="popup-title">
          {{ title }}
          <view class="close" @click="handleClose"></view>
        </view>
      </view>
      <slot></slot>
    </wd-popup>
  </view>
</template>

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

  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '标题',
    },
    isShowTitle: {
      type: Boolean,
      default: true,
    },
  })
  const emit = defineEmits(['update:show', 'close'])

  // 计算属性 `localShow`，用于 v-model 绑定
  const localShow = computed({
    get: () => props.show,
    set: (value) => emit('update:show', value),
  })

  // 处理关闭事件
  const handleClose = () => {
    emit('close')
  }
</script>

<style scoped lang="scss">
  .popup-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: $shop-white;
    .popup-title {
      position: relative;
      top: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      align-items: center;
      width: 100%;
      padding: 32rpx 0rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 52rpx; /* 144.444% */
      color: var(--text-icon-font-gy-1100, $shop-text-3);
      text-align: center;
      text-transform: capitalize;
      border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);

      .close {
        position: absolute;
        top: 50%;
        right: 32rpx;
        width: 48rpx;
        height: 48rpx;
        background: url('@/static/images/cart/cart-close.svg') no-repeat 0 0 / cover;
        transform: translateY(-50%);
      }
    }
  }

  :deep(.wd-popup) {
    min-height: 70vh;
    border-radius: 16rpx 16rpx 0px 0px;
  }
</style>
