<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="agree-popup">
      <!-- 弹窗头部 -->
      <view class="popup-header">
        <view class="popup-title">{{ title }}</view>
        <view class="close-btn" @click="handleClose">
          <uni-icons type="closeempty" size="24" color="#999" />
        </view>
      </view>

      <!-- 弹窗内容 -->
      <view class="popup-content">
        <view class="content-text">
          <zero-markdown-view :markdown="agreement" />
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="button-area">
        <view class="confirm-btn" @click="handleClose"> 我知道了 </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits, defineExpose } from "vue";

// Props定义
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "温馨提示",
  },
  agreement: {
    type: String,
    default: "",
  },
});

// Events定义
const emits = defineEmits(["agree", "close", "cancel"]);

// 响应式数据
const popup = ref(null);

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      show();
    } else {
      hide();
    }
  }
);

// 方法定义
const show = () => {
  popup.value?.open();
};

const hide = () => {
  popup.value?.close();
};

const handleClose = () => {
  hide();
  emits("close");
};

// 暴露方法给父组件
defineExpose({
  show,
  hide,
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>