<template>
  <Teleport to="body">
    <transition name="modal-fade">
      <div v-if="visible" class="modal-mask" @click="handleClose">

        <div class="modal-container" @click.stop>

          <div class="modal-title">温馨提示</div>

          <div class="modal-icon">
            <img src="../../../assets/icon/bitcoin/querenpin.svg" alt="">
          </div>

          <p class="modal-text">确定要平仓吗？</p>

          <button class="btn-primary" @click="handleConfirm">
            确认
          </button>

          <button class="btn-secondary" @click="handleClose">
            取消
          </button>

        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import {useRouter} from "vue-router";
  const router = useRouter();


// 接收父组件传来的可见性状态
defineProps({
  visible: {
    type: Boolean,
    required: true
  }
});

// 定义向父组件发送的事件
const emit = defineEmits(['update:visible', 'confirm']);

// 关闭弹窗
const handleClose = () => {
  // 发送事件让父组件把 visible 改为 false
  emit('update:visible', false);
};

// 点击确认按钮
const handleConfirm = () => {
  console.log("lllll")
  // 先触发确认操作，比如跳转充值页面
  window.location.reload();
  // router.replace({ path: '/bitcoin', query: { to: router.currentRoute.value.fullPath } })
  // router.push('/bitcoin')
  // emit('confirm');
  // // 然后关闭弹窗
  // handleClose();
};
</script>

<style scoped>
/* --- 遮罩层 --- */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* 深色半透明背景 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  z-index: 9999; /* 保证在最上层 */
  padding: 20px; /* 防止小屏贴边 */
}

/* --- 弹窗容器 --- */
.modal-container {
  width: 100%;
  max-width: 315px; /* 在375屏上两边留有约30px间距，视觉效果舒适 */
  background: #fff;
  border-radius: 16px; /* 大圆角 */
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- 标题 --- */
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
}

/* --- 图标区域 --- */
.modal-icon {
  margin-bottom: 16px;
  /* 如果用图片，可以设置 width/height */
}

/* --- 文本 --- */
.modal-text {
  font-size: 15px;
  color: #6B7280; /* 灰色的提示文字 */
  margin: 0 0 32px 0; /* 底部留出较大空间给按钮 */
}

/* --- 通用按钮样式 --- */
button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  width: 100%; /* 按钮撑满容器宽度 */
  font-weight: 500;
  transition: opacity 0.2s;
}
button:active {
  opacity: 0.8; /* 点击反馈 */
}

/* --- 主按钮 (红色胶囊) --- */
.btn-primary {
  height: 48px;
  background: #D93F4C; /* 提取的设计稿红色 */
  color: white;
  border-radius: 24px; /* 高度的一半，形成完美胶囊圆角 */
  margin-bottom: 12px;
}

/* --- 次要按钮 (红色文字) --- */
.btn-secondary {
  height: 40px;
  color: #D93F4C; /* 文字颜色与主按钮背景一致 */
}

/* --- 动画定义 (淡入 + 缩放弹出) --- */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-active .modal-container {
  /* 弹窗进入时的弹性动画 */
  animation: modal-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-fade-leave-active .modal-container {
  /* 弹窗离开时的动画 */
  animation: modal-pop-in 0.3s reverse;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

@keyframes modal-pop-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>