<script setup>
import IconButton from "./IconButton.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: null,
  },
  height: {
    type: Number,
    default: 100,
  },
});
</script>

<template>
  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
    <view class="scale-in">
      <image src="https://static.shelingxingqiu.com/shootmini/static/point-book-tip-bg.png" mode="widthFix" />
      <slot />
    </view>
    <IconButton
      v-if="!!onClose"
      src="../static/close-white-outline.png"
      :width="30"
      :onClick="onClose"
    />
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.container > view:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 75vw;
  margin-bottom: 15px;
  border-radius: 30rpx;
  background: #fff;
}
.container > view:first-child > image {
  position: absolute;
  width: 100%;
  z-index: -1;
  top: 0;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}
</style>
