<template>
  <uni-popup ref="popupRef" background-color="#fff">
    <view class="wrap" v-if="state.visible">
      <view class="mask-box"></view>
      <view class="dialog-box">
        <view class="head-box"
          ><view class="title">{{ props.title }}</view
          ><view
            class="close iconfont icon-guanbi1"
            v-if="props.hasCloseIcon"
            @tap="close"
          ></view
        ></view>
        <scroll-view class="content-box" scroll-y="true">
          <slot></slot>
        </scroll-view>
        <view class="footer-box" v-if="props.hasFooterIcon"
          ><slot name="footer"></slot
        ></view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from "vue";
const props = defineProps({
  title: String,
  hasCloseIcon: {
    type: Boolean,
    default: true,
  },
  hasFooterIcon: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["close"]);
const popupRef = ref();
const state = reactive({
  visible: false,
});
function open() {
  popupRef.value.open();
  state.visible = true;
}
function close() {
  popupRef.value.close();
  state.visible = false;
	emits("close");
}
defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  // background: rgba(0, 0, 0, 0.5);
  .dialog-box {
    height: 70%;
    background: #f6f9ff;
    border-radius: 10px 10px 0rpx 0rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    // z-index: 2;
    padding: 15px;
  }
  .head-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #253954;
      line-height: 21px;
    }
    .close {
      color: #bdc3d6;
    }
  }
  .content-box {
    padding: 14px 0;
    height: calc(100% - 60px);
  }
  .footer-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 0 14px;
  }
}
</style>
