<template>
  <view class="container">
    <!-- 消息提示弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message 
        type="success" 
        message="操作成功" 
        :duration="2000">
      </uni-popup-message>
    </uni-popup>

    <!-- 对话框弹窗 -->
    <uni-popup ref="dialogPopup" type="dialog">
      <uni-popup-dialog
        type="info"
        title="提示"
        content="确定要执行此操作吗？"
        :duration="0"
        @confirm="handleConfirm"
        @close="handleClose">
      </uni-popup-dialog>
    </uni-popup>

    <!-- 底部弹窗 -->
    <uni-popup ref="bottomPopup" type="bottom">
      <view class="popup-content">
        <text class="popup-title">底部弹窗</text>
        <text class="popup-desc">这是一个从底部弹出的窗口</text>
        <button class="popup-btn" @click="closeBottomPopup">关闭</button>
      </view>
    </uni-popup>

    <!-- 操作按钮 -->
    <view class="btn-group">
      <button class="btn" @click="showMessage">消息提示</button>
      <button class="btn" @click="showDialog">对话框</button>
      <button class="btn" @click="showBottomPopup">底部弹窗</button>
    </view>
  </view>
</template>

<script>
// 引入 uni-popup 组件
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

export default {
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog
  },
  methods: {
    // 显示消息提示
    showMessage() {
      this.$refs.messagePopup.open()
    },
    // 显示对话框
    showDialog() {
      this.$refs.dialogPopup.open()
    },
    // 显示底部弹窗
    showBottomPopup() {
      this.$refs.bottomPopup.open()
    },
    // 关闭底部弹窗
    closeBottomPopup() {
      this.$refs.bottomPopup.close()
    },
    // 对话框确认事件
    handleConfirm() {
      console.log('点击确认')
      this.$refs.dialogPopup.close()
    },
    // 对话框关闭事件
    handleClose() {
      console.log('点击关闭')
      this.$refs.dialogPopup.close()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-group {
  width: 100%;
  margin-top: 100rpx;
}

.btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  font-size: 32rpx;
}

.popup-content {
  padding: 40rpx;
  background-color: white;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.popup-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  text-align: center;
}

.popup-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
}
</style>