<template>
  <JPopup ref="popup" @onClose="emits('cancel', 'mask')" @change="change">
    <JMainCard pd="0" wrapPd="30rpx">
      <view class="content bgF2 bdR10">{{ text }}</view>
      <view class="confirm" hover-class="u-cell-hover" hover-stay-time="150" @tap="confirm">确认</view>
    </JMainCard>
    <JButton pd="0 30rpx 30rpx 30rpx" pdTop="0" bgColor="#fff" color="#000" @HandleTouch="close()">取消</JButton>
  </JPopup>
</template>

<script setup>
import { inject, ref } from "vue"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JButton from "@/components/newComponents/JButton/JButton"
const wrapperHidden = inject('wrapperHidden')
const emits = defineEmits(["confirm", "cancel"])
const text = ref("")
const popup = ref()
const open = (tips = "确认删除吗？一旦删除不可恢复！！！") => {
  text.value = tips
  popup.value.open()
}
const close = () => {
  popup.value.close()
}
const confirm = () => {
  emits("confirm")
  popup.value.close()
}
const change = (e)=>{
  if(wrapperHidden){
    wrapperHidden(e.show)
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.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>
