<template>
  <u-popup v-model="show" closeable :width="width" :height="width" mode="center">
    <view class="relative h-full flex flex-col overflow-hidden">
      <view class="h-86rpx leading-86rpx flex-center w-full">
        <slot name="title">
          <view class="text-34rpx">{{ title }}</view>
        </slot>
      </view>
      <view class="flex-1 overflow-y-auto w-full">
        <slot></slot>
      </view>
      <view>
        <slot name="bottom"></slot>
      </view>
    </view>
  </u-popup>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  data() {
    return {}
  },
}
</script>
