<!--
  通用 确认弹层。 
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/22 07:30
-->

<template>
  <uni-popup ref="popup" type="bottom" @maskClick="cancelFunc" mask-background-color="rgba(0,0,0,.5)" @change='change' :safe-area="false">
    <view class="tips-wrapper">
        <view class="tips-text" :style="{ textIndent: vdata.title.length > 20 ? '2em' : 0 }"> {{ vdata.title }} </view>
        <view class="tips-text tips-confirm" hover-class="u-cell-hover" hover-stay-time="150" :style="{color: vdata.confirmColor }" @tap="confirmFunc">
        {{ vdata.confirmText || "确认" }}
      </view>
      <view class="line"></view>
      <view class="tips-text tips-cancel" hover-class="u-cell-hover" hover-stay-time="150" @tap="cancelFunc">
        {{ vdata.cancelText || "取消" }}
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive,inject } from "vue"

const popup = ref(null) //弹窗实例
const tips = ref("") // 提示语

const vdata = reactive({
	title: '',
	confirmText: '',
	cancelText: '',
	confirmColor: '',
	promiseObject: { }, 
})

function confirmFunc(){
  popup.value.close()
  vdata.promiseObject.resolve()
}

function cancelFunc(){
  popup.value.close()
  vdata.promiseObject.reject()
}
function open  (title, confirmTextOrExtObject , cancelText )  {
  vdata.title = title
  vdata.confirmText = typeof confirmTextOrExtObject == "string" ? confirmTextOrExtObject : ''
  vdata.cancelText = cancelText
 if(typeof confirmTextOrExtObject == "object" ) {
  Object.assign(vdata,confirmTextOrExtObject)
 }
  popup.value.open()
  
  return new Promise( (resolve, reject) => {
	vdata.promiseObject.resolve = resolve
	vdata.promiseObject.reject = reject
  })
}

let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
const change = (e)=>{
  if(changePageMetaOverflowFunc){
    changePageMetaOverflowFunc(!e.show)
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.tips-wrapper {
  overflow: hidden;
  border-radius: 32rpx 32rpx 0 0;
  padding-bottom: 60rpx;
  background-color: #fff;
  .tips-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 110rpx;

    line-height: 1.8;
    padding: 30rpx;
    box-sizing: border-box;
    font-size: 30rpx;
  }
  .line {
    height: 20rpx;
    background-color: rgba(0, 0, 0, 0.07);
  }
  .tips-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid rgba(0, 0, 0, 0.07);
    color: #2980fd;
    font-size: 33rpx;
  }
  .tips-cancel {
    justify-content: center;
    align-items: center;
    color: $J-color-t80;
    font-size: 33rpx;
  }
  .u-cell-hover {
    background-color: #f8f9fa;
  }
}
</style>
