<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "650rpx",
  },
  onClose: {
    type: Function,
    default: () => {},
  },
  noBg: {
    type: Boolean,
    default: false,
  },
});
const showContainer = ref(false);
const showContent = ref(false);
watch(
  () => props.show,
  (newValue) => {
    if (newValue) {
      showContainer.value = true;
      setTimeout(() => {
        showContent.value = true;
      }, 100);
    } else {
      showContent.value = false;
      setTimeout(() => {
        showContainer.value = false;
      }, 100);
    }
  },
  {}
);
</script>

<template>
  <view
    class="container"
    v-if="showContainer"
    :style="{ opacity: show ? 1 : 0 }"
    @click="onClose"
  >
    <view
      class="modal-content"
      :style="{
        transform: `translateY(${showContent ? '0%' : '100%'})`,
        height,
      }"
      @click.stop=""
    >
      <image
        v-if="!noBg"
        src="https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png"
        mode="widthFix"
      />
      <view class="close-btn" @click="onClose" v-if="!noBg">
        <image src="../../../static/close-yellow.png" mode="widthFix" />
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<style scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #00000099;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 999;
}
.modal-content {
  width: 100%;
  transform: translateY(100%);
  transition: all 0.3s ease;
  position: relative;
  background-color: #372E1D;
}
.modal-content > image:first-child {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.close-btn {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
}
.close-btn > image {
  width: 40px;
  height: 40px;
}
</style>
