<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <page-container
      v-if="show"
      :show="show"
      :overlay="false"
      @leave="onPageLeave"
    />
    <!-- #endif -->
    <u-popup
      :value="show"
      mode="bottom"
      border-radius="24"
      :z-index="10090"
      :safe-area-inset-bottom="true"
      :mask-close-able="maskCloseable"
      @input="onPopupInput"
      @close="close"
    >
      <view class="drawer-inner">
        <view v-if="title" class="drawer-header">
          <text class="drawer-title">{{ title }}</text>
          <text v-if="showClose" class="drawer-close" @click="close">关闭</text>
        </view>
        <slot />
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'DrawerPageContainer',
  props: {
    value: { type: Boolean, default: false },
    title: { type: String, default: '' },
    showClose: { type: Boolean, default: true },
    maskCloseable: { type: Boolean, default: true },
  },
  computed: {
    show: {
      get() { return this.value },
      set(v) { this.$emit('input', v) },
    },
  },
  methods: {
    close() {
      this.show = false
      this.$emit('close')
    },
    onPopupInput(v) {
      this.show = v
    },
    onPageLeave() {
      this.close()
    },
  },
}
</script>

<style scoped>
.drawer-inner { background: #fff; max-height: 80vh; display: flex; flex-direction: column; }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}
.drawer-title { font-size: 32rpx; font-weight: 600; color: #1d2129; }
.drawer-close { font-size: 28rpx; color: #6acdbb; }
</style>
