<!--
 * @Date: 2025-09-22 10:10:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-23 11:17:11
 * @FilePath: /lls_program/src/components/UploadMediaPopup.vue
 * @Description: 文件描述
-->
<template>
  <PopupWrapper
    v-model:visible="popupVisible"
    position="bottom"
    title="亲情展示"
    height="80%"
    :close-on-click-overlay="false"
    @close="handleClose"
  >
    <UploadMediaComponent
      :from="from"
      :id="id"
      @success="handleSuccess"
      @close="handleClose"
    />
  </PopupWrapper>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import PopupWrapper from '@/components/PopupWrapper.vue';
import UploadMediaComponent from '@/components/UploadMediaComponent.vue';

// 定义props
const props = defineProps({
    // 控制弹窗显示/隐藏
    visible: {
        type: Boolean,
        default: false
    },
    // 来源标识
    from: {
        type: String,
        default: ''
    },
    // ID参数
    id: {
        type: String,
        default: ''
    }
});

// 定义emits
const emit = defineEmits(['update:visible', 'success', 'close']);

// 内部弹窗状态
const popupVisible = ref(false);

// 监听外部visible变化
watch(() => props.visible, (newVal) => {
    popupVisible.value = newVal;
}, { immediate: true });

// 监听内部弹窗状态变化
watch(popupVisible, (newVal) => {
    emit('update:visible', newVal);
});

/**
 * 处理上传成功
 * @param {Object} data - 上传成功的数据
 */
const handleSuccess = (data) => {
    emit('success', data);
    handleClose();
};

/**
 * 处理关闭弹窗
 */
const handleClose = () => {
    popupVisible.value = false;
    emit('close');
};
</script>

<style lang="less" scoped>
// 组件样式由PopupWrapper和UploadMediaComponent提供
</style>