<!-- 我的收藏页面 -->
<template>
    <div class="box">
        <div class="box-contents">
            <h2>我的收藏</h2>

            <!-- 内容区 -->
            <template v-if="g_dataList.length > 0">
                <div class="box-contnet">
                    <div class="box-content-item" v-for="item in g_dataList" :key="item.id">
                        <div class="box-content-item-img">
                            <el-image
                                :src="(item.template?.imgUrl?.indexOf('http') == 0 ? '' : 'https://') + item.template?.imgUrl"
                                fit="cover" />
                        </div>

                        <div class="box-content-item-fun">
                            <div class="item-fun-top">
                                <div class="item-fun-top-name">
                                    名称：{{ item.template?.title }}
                                </div>
                                <div class="item-fun-top-time">
                                    收藏时间：{{ formatDate(item.template?.createTime, 'YYYY-MM-DD HH:mm:ss') }}
                                </div>
                            </div>
                            <div class="item-fun-content">
                                {{ item.template?.introduction }}
                            </div>
                            <div class="item-fun-bottom">
                                <el-button-group>
                                    <!-- <el-button type="primary" @click="act_viewDetails(item)">查看详情</el-button> -->
                                    <el-button type="danger" @click="act_removeFavorite(item)">取消收藏</el-button>
                                </el-button-group>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <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, 20, 50, 100]" :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 { listFavorite, removeFavorite } from '@/http/api/pages/Favorite/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/store/index";

/************************************************
 * 全局变量
 ************************************************/
const g_userStore = useUserStore();
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: true,
    disabled: false,
});

/************************************************
 * 生命周期函数
 ************************************************/
onMounted(() => {
    get_favoriteList();
});

/************************************************
 * 事件处理
 ************************************************/

// 取消收藏
const act_removeFavorite = (item) => {
    ElMessageBox.confirm(
        '确定取消收藏吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        removeFavorite({ userId: g_userId, templateId: item.templateId, status: 0, id: item.id }).then(() => {
            ElMessage({
                message: '取消收藏成功',
                type: 'success',
            });
            get_favoriteList();
        });
    }).catch(() => { });
};

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

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

/************************************************
 * 获取数据
 ************************************************/
const get_favoriteList = async () => {
    try {
        const params = {
            userId: g_userId,
            page: g_PagingData.value.currentPage,
            pageSize: g_PagingData.value.pageSize
        };
        const res = await listFavorite(params);
        g_dataList.value = res.data.filter(item => item.template && item.status == 1);
        g_PagingData.value.total = res.data.length;
    } catch (error) {
        console.error('获取收藏列表失败:', error);
        ElMessage.error('获取收藏列表失败');
    }
};


function formatDate(date, format) {
    if (!date) return "";
    date = new Date(date);
    const pad = (num, length = 2) => num.toString().padStart(length, '0');

    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const milliseconds = date.getMilliseconds();
    const isAM = hours < 12;

    const replacements = {
        'YYYY': pad(year, 4),
        'YY': pad(year % 100),
        'MM': pad(month),
        'M': month,
        'DD': pad(day),
        'D': day,
        'HH': pad(hours),
        'H': hours,
        'hh': pad(hours % 12 || 12),
        'h': hours % 12 || 12,
        'mm': pad(minutes),
        'm': minutes,
        'ss': pad(seconds),
        's': seconds,
        'SSS': pad(milliseconds, 3),
        'A': isAM ? 'AM' : 'PM',
        'a': isAM ? 'am' : 'pm'
    };

    return format.replace(/YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|SSS|A|a/g, match => replacements[match]);
}


</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));
    grid-gap: 20px;
    align-content: flex-start;
    overflow: auto;
}

.box-content-item {
    height: 280px;
    padding: 16px;
    background-color: #fff;
    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: #f5f7fa;
    overflow: hidden;
    border-radius: 4px;
}

.box-content-item-img :deep(.el-image) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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-top-name {
    font-weight: 500;
    color: #2c3e50;
}

.item-fun-top-time {
    font-size: 12px;
    color: #909399;
}

.item-fun-content {
    flex: 2;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.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;
    margin-top: 20px;
}

/* 自定义滚动条样式 */
.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;
}
</style>