<!-- 我的展厅页面 -->

<template>
    <div class="box">

        <div class="box-contents">
            <h2>我的展厅</h2>
            <!-- 按钮组 -->
            <div class="box-contents-btn">
                <el-button type="primary" @click="act_createShowroom">创建展厅</el-button>
                <el-button type="default" @click="get_userAppDataList">刷新</el-button>
            </div>

            <!-- 内容区 -->
            <div class="box-contnet" v-if="g_dataList.length > 0">

                <div class="box-content-item" v-for="item in g_dataList" :key="item.id">
                    <div class="box-content-item-img">
                        <el-image class="avatar"
                            :src="(item.cover?.indexOf('http') == 0 ? '' : 'https://') + item.cover" fit="cover" />
                    </div>

                    <div class="box-content-item-fun">
                        <div class="item-fun-top">
                            <div class="item-fun-top-name">
                                名称：{{ item.title }}
                            </div>
                            <div class="item-fun-top-price">
                                <el-switch v-model="item.status" class="ml-2" inline-prompt
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                    active-text="开启" inactive-text="关闭" @click="act_changeState(item)" />
                            </div>
                        </div>
                        <div class="item-fun-content">
                            {{ item.introduction }}
                        </div>
                        <div class="item-fun-bottom">
                            <el-button-group>
                                <el-button type="primary" @click="act_DataSources(item.id)">数据源管理</el-button>
                                <el-button type="primary" @click="act_modifiedShowroom(item.id)">编辑</el-button>
                            </el-button-group>
                        </div>
                    </div>

                </div>
            </div>
            <el-empty v-else description="无数据" />
            <!-- 分页栏 -->
            <div class="box-foot">
                <el-pagination v-model:current-page="g_PagingData.currentPage" v-model:page-size="g_PagingData.pageSize"
                    :page-sizes="[10, 50, 100, 200]" :small="g_PagingData.small" :disabled="g_PagingData.disabled"
                    :background="g_PagingData.background" layout="total, sizes, prev, pager, next, jumper"
                    :total="g_PagingData.total" @size-change="act_handleSizeChange"
                    @current-change="act_handleCurrentChange" />
            </div>
        </div>


        <!-- 抽屉 -->
        <drawer :isVisible="g_drawerVisible" :title="g_drawerTitle" :size="'50%'"
            @update:isVisible="act_updateVisibility" :CloseCallback="act_closeCallback">

            <!-- 内容 -->
            <template v-slot:content>
                <component :is="g_pageComponent[g_pageType]" :act_updateVisibility="act_updateVisibility"
                    :g_ShowroomDataList="g_ShowroomDataList" :get_userAppDataList="get_userAppDataList"></component>
            </template>

        </drawer>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { getUserAppsList, updateAppsList } from '@/http/api/pages/Gallery/index'
import drawer from '@/components/Common/drawer.vue' // 抽屉
import CreateEditShowroom from './CreateEditPage/CreateEditShowroom.vue'; // 创建/编辑展厅组件
import CreateEditDataSources from './CreateEditPage/CreateEditDataSources.vue'; // 创建/编辑数据源组件
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore, useMyShowroomStore } from "@/store/index";




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

// 用户id
const g_userId = g_userStore.userInfo.user.id

// 页面组件
const g_pageComponent = { CreateEditShowroom, CreateEditDataSources }
// 页面组件当前状态
const g_pageType = ref('CreateEditShowroom')

// 抽屉状态
const g_drawerVisible = ref(false)
// 抽屉标题
const g_drawerTitle = ref("")
// 选择展厅详细数据
const g_ShowroomDataList = ref({})

// 表格数据
const g_dataList = ref([])
// 配置分页
const g_PagingData = ref({
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页条数
    total: 0, // 总条数
    small: false, // 是否使用小型分页样式
    background: false, // 是否使用背景主题
    disabled: false, // 是否禁用
});




/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    get_userAppDataList();
    console.log(g_userStore.userInfo.user)
})






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

// 创建展厅
const act_createShowroom = () => {
    g_drawerTitle.value = '展厅创建';
    g_ShowroomDataList.value = { id: null, userId: g_userId };
    g_pageType.value = 'CreateEditShowroom'
    act_updateVisibility(true);
}

// 查看修改展厅
const act_modifiedShowroom = (id) => {
    g_drawerTitle.value = '展厅编辑';
    g_ShowroomDataList.value = { id: id, userId: g_userId };
    g_pageType.value = 'CreateEditShowroom'
    act_updateVisibility(true);
}

// 查看数据源
const act_DataSources = (id) => {
    g_drawerTitle.value = '数据源管理';
    g_ShowroomDataList.value = { id: id, userId: g_userId };
    g_pageType.value = 'CreateEditDataSources'
    act_updateVisibility(true);
}

// 改变状态
const act_changeState = (item) => {
    const dataList = { ...item, status: item.status == false ? 0 : 1 }
    updateAppsList(dataList).then((res) => {

    })
}

// 改变每页条数
const act_handleSizeChange = (val) => {
    g_PagingData.value.pageSize = val
}

// 改变页码
const act_handleCurrentChange = (val) => {
    g_PagingData.value.currentPage = val
}

// 修改抽屉状态
const act_updateVisibility = (newValue = false) => {
    g_drawerVisible.value = newValue
}

// 关闭回调
const act_closeCallback = (done) => {
    ElMessageBox.confirm(
        '确定关闭吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        done();
    }).catch(() => {

    })
}


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

// 获取用户展厅列表
const get_userAppDataList = async () => {
    // if (g_useMyShowroomStore.isUpDataList(g_userId)) {
    const dataList = await (await getUserAppsList(g_userId)).data
    dataList.forEach(item => item.status = item.status == 0 ? false : true);
    g_dataList.value = dataList;
    // g_useMyShowroomStore.setMyShowroomData({ userId: g_userId, dataList: dataList });
    // } else {
    // g_dataList.value = g_useMyShowroomStore.myShowroomData.dataList;
    // }
}



</script>

<style scoped>
.box {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 24px;
    width: 100%;
    margin: 0;
    overflow: auto;
}

.box-contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.box-contents h2 {
    margin: 0;
    font-size: 20px;
    color: #2c3e50;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.box-contents-btn {
    width: 100%;
}

.box-contnet {
    flex: 1 1 0;
    width: 100%;
    margin: 8px 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    grid-gap: 20px;
    align-content: flex-start;
    overflow: auto;
}

/* 自定义滚动条样式 */
.box-contnet::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.1);
}

.box-contnet::-webkit-scrollbar-thumb {
    background-color: #FD571F;
}

.box-contnet::-webkit-scrollbar-thumb:hover {
    background-color: #50bfff;
}

.box-content-item {
    height: 280px;
    padding: 16px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.box-content-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.box-content-item-img {
    flex: 6;
    background-color: cadetblue;
    overflow: hidden;
    border-radius: 4px;
}

.box-content-item-fun {
    flex: 3;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-fun-top {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-fun-content {
    flex: 2;
    margin: 8px 0px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.item-fun-bottom {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.box-foot {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

::v-deep .PageDrawer {
    min-width: 800px;
    width: 100%;
    max-width: 800px;
}

::v-deep .el-image {
    width: 100%;
    height: 100%;
}
</style>