<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change='change' :safe-area="false" @maskClick="emits('cancel')">
    <!-- 通用提示弹窗 用于提示用户 数据含义 -->
    <view class="card-wrapper">
      <view class="card-title flex-center">{{ title }}</view>
      <slot />
      <view class="card-button flex-center" hover-class="touch-hover" @tap="confirm"> {{ buttonText }}</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref,inject } from 'vue'
const emits = defineEmits(['cancel'])
const props = defineProps({
  title: { type: String }, //标题
  buttonText: { type: String }, //按钮文字
})
const popup = ref(null)

const open = (val) => {
  popup.value.open()
}
const confirm = () => {
  emits('cancel')
  popup.value.close()
}
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
const change = (e)=>{
  if(changePageMetaOverflowFunc){
    changePageMetaOverflowFunc(!e.show)
  }
  if(e.show) return uni.hideTabBar()
  uni.showTabBar()
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card-wrapper {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  max-height: 70vh;
  .card-title {
    margin-bottom: 20rpx;
    height: 110rpx;
    font-size: 30rpx;
    font-weight: 400;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .card-button {
    margin-top: 20rpx;
    height: 110rpx;
    font-size: 32rpx;
    color: #2980fd;
    border-top: 20rpx solid #f7f7f7;
  }
}
</style>
