<!-- 创建展厅&修改展厅页面 -->

<template>
    <div>
        <!-- 表单数据 -->
        <el-form v-if="g_isLoaded" :model="g_form" label-width="auto">

            <el-form-item label="展厅名称">
                <el-input v-model="g_form.title" />
            </el-form-item>

            <el-form-item label="展厅简介">
                <el-input v-model="g_form.introduction" type="textarea" />
            </el-form-item>

            <el-form-item label="展厅封面">
                <ImageUpload ref="imgchildComponentRef"
                    :URL="(g_form.cover?.indexOf('http') == 0 ? '' : 'https://') + g_form.cover"
                    :handleUploadSuccess="act_handleUploadSuccess" />
            </el-form-item>

            <el-form-item label="展厅视频">
                <VideoUpload ref="videochildComponentRef" :URL="g_form.video"
                    :handleUploadSuccess="act_handleUploadSuccess" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="act_onSubmit">{{ g_pageType ? "修改" : "创建" }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted, defineProps } from 'vue'
import ImageUpload from '@/components/Common/ImageUpload.vue'
import VideoUpload from '@/components/Common/VideoUpload.vue'
import { addAppsList, getAppsDetail, updateAppsList } from '@/http/api/pages/Gallery/index'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { useMyShowroomStore } from '@/store/index'


/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取我的展厅
const g_useMyShowroomStore = useMyShowroomStore();

// 父组件传递过来的函数
const g_props = defineProps({
    act_updateVisibility: Function,
    get_userAppDataList: Function,
    g_ShowroomDataList: Object,
})

// 子组件引用
const imgchildComponentRef = ref(null);
const videochildComponentRef = ref(null);

// 页面类型 如果有id 则是编辑页面 如果没有id 则是新增页面
const g_pageType = ref(g_props?.g_ShowroomDataList?.id)

// 表单数据
const g_form = reactive({
    id: g_props.g_ShowroomDataList.id,
    cover: "", // 缩略图
    icon: "", // 图标
    introduction: '', // 简介
    title: '', // 名称
    userId: 100, // 用户id
    video: '', // 视频
    viewCount: 0, // 浏览量
    userId: g_props.g_ShowroomDataList.userId,
})

// 加载状态
const g_isLoaded = ref(false)


/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    if (g_pageType.value) {
        get_ShowroomDetail()
    } else {
        g_isLoaded.value = true;
    }
})




/************************************************
* 事件处理
*
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

// 提交
const act_onSubmit = async () => {
    if (!g_form.title) {
        ElMessage({
            message: '请输入展厅名称',
            grouping: true,
            type: 'warning',
        });
        return;
    }

    let loadingInstance;

    try {
        await ElMessageBox.confirm(
            `${g_pageType.value ? "确定修改该展厅吗" : "确定创建该展厅吗"}`,
            '温馨提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        loadingInstance = ElLoading.service({
            lock: true,
            text: '上传中，请稍候...',
            background: 'rgba(0, 0, 0, 0.7)',
        });

        if (imgchildComponentRef.value && imgchildComponentRef.value.isFileChanged) {
            await imgchildComponentRef.value.act_uploadFiles();
        }

        if (videochildComponentRef.value && videochildComponentRef.value.isFileChanged) {
            await videochildComponentRef.value.act_uploadFiles();
        }

        g_pageType.value ? act_updateShowroom() : act_addShowroom();
        g_props.act_updateVisibility();

    } catch (error) {
        console.log("操作被取消", error);
    } finally {
        if (loadingInstance) {
            loadingInstance.close();
        }
    }
};

// 上传成功回调
const act_handleUploadSuccess = (res, type) => {
    type == "img" ? g_form.cover = res.url : g_form.video = res.url
}

// 修改展厅信息
const act_updateShowroom = () => {
    updateAppsList(g_form).then((res) => {
        g_useMyShowroomStore.updateFlag = true;
        g_props.get_userAppDataList();
        ElMessage({
            message: '修改成功',
            grouping: true,
            type: 'success',
        })
    })
}

// 新增展厅
const act_addShowroom = () => {
    addAppsList(g_form).then((res) => {
        g_useMyShowroomStore.updateFlag = true;
        g_props.get_userAppDataList();
        ElMessage({
            message: '创建成功',
            grouping: true,
            type: 'success',
        })
    }).catch(err => {
        console.log(err)
    })
}


/************************************************
 * 获取数据
 *
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/

// 获取展厅详细信息
const get_ShowroomDetail = () => {
    getAppsDetail(g_props.g_ShowroomDataList.id).then(res => {
        console.log(res)
        g_form.title = res.data.title;
        g_form.introduction = res.data.introduction;
        g_form.cover = res.data.cover;
        g_form.video = res.data.video;
        g_form.icon = res.data.icon;
        g_form.viewCount = res.data.viewCount;
        g_isLoaded.value = true;
    })
}



</script>

<style scoped>
::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
}
</style>