<!-- 我的场景页面 -->


<template>
    <div class="box">

        <div class="box-contents">
            <h2>我的场景</h2>
            <!-- 按钮组 -->
            <div class="box-contents-btn">
                <el-button type="primary" @click="act_createScene">创建场景</el-button>
                <el-button type="default" @click="get_userScenesDataList">刷新</el-button>
            </div>

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

                <div class="box-content-item" v-for="item in g_dataList">
                    <div class="box-content-item-img">
                        <el-image style="width: 100%;height: 100%;"
                            :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_showPoint(item)">展示点管理</el-button>
                                <el-button type="primary" @click="act_modifiedScene(item)">编辑</el-button>
                                <!-- <el-button type="danger" @click="act_deleteScene(item)">删除</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_SceneDataList="g_SceneDataList" :get_userScenesDataList="get_userScenesDataList" />
            </template>

        </drawer>


    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { getScenesList, updateScenes } from '@/http/api/pages/Scene/index'
import drawer from '@/components/Common/drawer.vue'
import CreateEditScene from './CreateEditPage/CreateEditScene.vue' // 创建/编辑场景组件
import CreateEditSpot from './CreateEditPage/CreateEditSpot.vue' // 创建/编辑展示点组件
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore, useMySceneStore } from "@/store/index";




/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取用户
const g_userStore = useUserStore();
// 获取我的场景
const g_useMySceneStore = useMySceneStore();
// 用户id
const g_userId = g_userStore.userInfo.user.id

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

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

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


/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    get_userScenesDataList();
})



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

// 创建场景
const act_createScene = () => {
    g_drawerTitle.value = '场景创建';
    g_SceneDataList.value = { id: null, userId: g_userId };
    g_pageType.value = "CreateEditScene"
    act_updateVisibility(true);
}

// 查看修改场景
const act_modifiedScene = (row) => {
    g_drawerTitle.value = '场景编辑';
    g_SceneDataList.value = { id: row.id, userId: g_userId };
    g_pageType.value = "CreateEditScene"
    act_updateVisibility(true);
}

// 查看展示点
const act_showPoint = (row) => {
    g_drawerTitle.value = '展示点管理';
    g_SceneDataList.value = { id: row.id, userId: g_userId, appId: row.appId };
    g_pageType.value = "CreateEditSpot"
    act_updateVisibility(true);
}

// 删除场景
const act_deleteScene = (row) => {
    ElMessageBox.confirm(
        '确定删除改场景吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage({
            message: '删除成功',
            grouping: true,
            type: 'success',
        })
    }).catch(() => {

    })
}

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

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

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

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

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

    })
}


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

// 获取用户场景列表
const get_userScenesDataList = async () => {
    // if (g_useMySceneStore.isUpDataList(g_userId)) {
    const dataList = await (await getScenesList(g_userId)).data
    dataList.forEach(item => item.status = item.status == 0 ? false : true);
    g_dataList.value = dataList;
    // g_useMySceneStore.setMySceneData({ userId: g_userId, dataList: dataList });
    // } else {
    // console.log("获取用户场景列表")
    // g_dataList.value = g_useMySceneStore.mySceneData.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;
}

.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;
}
</style>