<!-- 我的模板页面 -->

<template>
    <div class="box">
        <div class="box-contents">
            <h2>我的模板</h2>
            <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.imgUrl?.indexOf('http') == 0 ? '' : 'https://') + item.imgUrl" fit="cover" />
                    </div>

                    <div class="item-content">
                        <div class="item-title">{{ item.title }}</div>
                        <el-text class="item-introduction" line-clamp="2">
                            {{ item.introduction }}
                        </el-text>
                    </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>
    </div>

</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { getTemplatesBuyList } from '@/http/api/pages/Template/index'
import { useUserStore, useMyTemplateStore } from "@/store/index";




/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取用户
const g_userStore = useUserStore();
// 获取模板
const g_myTemplateStore = useMyTemplateStore();

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


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




/************************************************
* 事件处理
*
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/
// 改变每页条数
const act_handleSizeChange = (val) => {
    g_PagingData.value.pageSize = val
}

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





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

// 获取用户模板数据
const get_TemplatesBuyList_v1 = async () => {
    if (g_myTemplateStore.isUpDataList(g_userId)) {
        const dataList = await (await getTemplatesBuyList(g_userId)).data
        g_dataList.value = dataList;
        g_myTemplateStore.setMyTemplateData({ userId: g_userId, dataList: dataList });
    } else {
        g_dataList.value = g_myTemplateStore.myTemplateData.dataList;
    }
}

const get_TemplatesBuyList = async () => {
    var response = await getTemplatesBuyList(g_userId);
    g_dataList.value = response.data;
}


</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-contnet {
    flex: 1 1 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    align-content: flex-start;
    grid-gap: 20px;
    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 {
    width: calc(100% - 16px);
    height: 220px;
    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: 7;
    background-color: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0px 0px 3px rgb(183 183 183);
}

.item-content {
    flex: 3;
    padding: 4px 0px;
}

.item-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px
}

.item-introduction {
    width: 100%;
    font-size: 15px
}

.box-content-item-button {
    margin-top: 12px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

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