<template>
  <view class="sp-pop">
    <u-popup
      :mode="mode"
      border-radius="10"
      :mask-close-able="false"
      v-model="show"
      :closeable="!hideClose"
      @close="closePop"
    >
      <view class="pop-content" :style="{width: width}">
        <view class="pop-title" v-if="title">{{ title }}</view>
        <!-- <view class="pop-icon" v-if="icon">
          <u-image
            :width="iconSize"
            mode="widthFix"
            :src="`/static/img/betone-sp-component/pop/${icon}.svg`"
          ></u-image>
        </view> -->
        <slot></slot>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "spPop",
  model: {
    prop: "value",
    event: "changeShow",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    iconSize: {
      type: String | Number,
      default: 120,
    },
    title: {
      type: String,
      default: "",
    },
    hideClose: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: 'bottom',
    },
    width: {
      type: String,
      default: '',
    }
  },
  watch: {
    value(show) {
      this.show = show;
    },
  },
  data() {
    return {
      show: false,
    };
  },
  created() {
    // this.show = true;
  },
  methods: {
    closePop() {
      this.show = false;
      this.$emit("changeShow", false);
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.sp-pop {
  .pop-content {
    padding: 20rpx 32rpx;
    min-height: 300rpx;
    box-sizing: border-box;
    max-height: 88vh;
    .pop-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48rpx 0;
    }
    .pop-title {
      color: #333;
      text-align: center;
      font-size: 32rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5; /* 150% */
    }
  }
}
</style>