<template>
  <view>
    <uni-popup ref="confirmRef" type="bottom" @maskClick="handleClose">
      <JMainCard pd="0" wrapPd="30rpx">
        <view class="content bgF2 bdR10">{{ confirmText }}</view>
        <view class="confirm" hover-class="u-cell-hover" hover-stay-time="150" @tap="handleConfirm">确认</view>
      </JMainCard>
      <JButton pd="0 30rpx 30rpx 30rpx" pdTop="0" bgColor="#fff" color="#000" @HandleTouch="handleClose()"
        >取消</JButton
      >
    </uni-popup>
  </view>
</template>

<script setup>
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JButton from "@/components/newComponents/JButton/JButton"
/* 
	用于二次确认弹窗
	参数1 确认按钮回调函数
	参数2 取消按钮回调函数
	参数3 弹框内部提示文字 
*/
import { ref } from "vue"
import useBackPress from "@/hooks/useBackPress.js"

const confirmRef = ref()

let confirmText = ref("")
let confirmPop = () => {}
let cancelPop = () => {}

// 处理开启弹窗 与 关闭弹窗 的 阻断返回
const popupopened = () => {
  // #ifdef H5 || APP-PLUS
  active()
  // #endif
}

const popupclosed = () => {
  // #ifdef H5 || APP-PLUS
  inactive()
  // #endif
}

const closeEd = () => {
  confirmRef.value.close()
}

// #ifdef H5 || APP-PLUS
const { active, inactive } = useBackPress(closeEd) // onBackPress 阻断返回
// #endif
// 确认按钮
const handleConfirm = () => {
  popupclosed()
  confirmPop()
  confirmRef.value.close()
}

// 取消按钮
const handleClose = () => {
  popupclosed()
  cancelPop()
  confirmRef.value.close()
}

// 开启弹窗，供父组件调用传递函数
const comfirmOpen = (confirm = () => {}, tipText = "您确认要改变状态吗?", cancel = () => {}) => {
  popupopened()
  confirmPop = confirm
  cancelPop = cancel
  confirmText.value = tipText
  confirmRef.value.open()
}

defineExpose({ comfirmOpen })
</script>

<style scoped lang="scss">
.content {
  margin: 30rpx 30rpx 10rpx;
  padding: 20rpx;
  font-size: 27rpx;
  color: #666;
}
.confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110rpx;
  font-size: 33rpx;
  color: #ff4343;
}
.u-cell-hover {
  background-color: rgba($color: #999, $alpha: 0.1);
}
</style>
