<template>
  <u-popup :show="isShow" round="20" :safeAreaInsetBottom="false">
    <view class="head-box">
      <text>{{ title }}</text>
      <view class="close-icon" @tap="handleClose">
        <u-icon name="close" size="24"></u-icon>
      </view>
    </view>
    <view class="content">
      <slot></slot>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  watch: {
    show: {
      immediate: true,
      handler: function () {
        this.isShow = this.show;
      },
    },
  },
  methods: {
    handleClose() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.head-box {
  height: 80rpx;
  width: 100%;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  line-height: 80rpx;
  position: relative;
  .close-icon {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
.content {
  width: 100vw;
  min-height: 50vh;
  max-height: 80vh;
  overflow: auto;
}
</style>
