<template>
  <uni-popup
    ref="popup"
    :z-index="9999999"
    :overlay-style="{ zIndex: 9999999 }"
    type="bottom"
    :mask-click="false"
    @close="close"
    @open="open"
  >
    <view class="Tip" :style="tipHeight">
      <view class="Tip__title">{{ title }}</view>
      <view class="Tip__content">
        <slot name="default" />
      </view>
      <view class="Tip__button">
        <button class="Tip__button--cancel" @click="confirmEvent()">
          {{ cancelText }}
        </button>
        <button class="Tip__button--confirm" @click="confirmEvent()">
          {{ confirmText }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import  uniPopup  from "@/components/uni-popup/uni-popup";
const CONFIRM_EVENT = "confirm";
export default {
  components: {
    uniPopup
  },
  props: {
    title: {
      type: String,
      default: "欢迎使用羊小咩"
    },
    round: {
      type: [Number, String],
      default: 10
    },
    confirmText: {
      type: String,
      default: "同意"
    },
    cancelText: {
      type: String,
      default: "不同意"
    },
    closeAble: {
      type: Boolean,
      default: true
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    open() {
      this.show = true;
      this.$refs.popup.open();
    },
    close() {
      this.show = false;
      this.$refs.popup.close();
    },
    confirmEvent() {
      this.close();
      const timer = setTimeout(() => {
        this.$emit(CONFIRM_EVENT);
        clearTimeout(timer);
      }, 200);
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .u-popup {
  z-index: 9999999999;
}
.uni-popup {
  z-index: 9999999;
  background: #fff;
}

.Tip {
  padding: 20rpx 48rpx;
  width: 100%;
  height: auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 40rpx 40rpx 0px 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  &__title {
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #323233;
  }
  &__content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 16rpx;
  }
  &__button {
    display: flex;
    margin-bottom: 40rpx;
    button {
      font-size: 28rpx;
      background-color: none;
      width: 332rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 200rpx;
      margin-top: 50rpx;
      &::after {
        border: none;
      }
    }
    &--confirm {
      color: $white;
      background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
    }
    &--cancel {
      background-color: transparent;
      color: #141414;
      border-radius: 4px;
      border: 2rpx solid #999999;
      margin-right: 24rpx;
    }
  }
}
</style>
