<!-- 模板案例主页 -->

<template>
    <div class="box">

        <div class="box-top">
            <!-- 查询框 -->
            <div class="box-top-search">
                <el-input class="search-input" v-model="g_searchForm.title" style="width: 240px" size="large"
                    placeholder="请输入需要查询的模板名称" :prefix-icon="Search" />
                <el-button class="search-btn" type="primary" @click="act_searchButtonClick(this)">搜索</el-button>
            </div>

            <!-- 类型框 -->
            <ul class="box-top-type">
                <li class="box-top-item">
                    <span class="box-top-item-title">类型</span>
                    <el-radio-group v-model="g_searchForm.type" @change="act_radioGroupChange(this)">
                        <el-radio value="" size="large">全部</el-radio>
                        <el-radio value="1" size="large">Unity</el-radio>
                        <el-radio value="2" size="large">720全景</el-radio>
                    </el-radio-group>
                </li>
            </ul>
        </div>

        <div class="box-content">

            <div class="box-content-item" v-for="(item, index) in g_templateCaseList">
                <div class="box-content-item-img">
                    <el-image style="width: 100%;height: 100%"
                        :src="(item.imgUrl?.indexOf('http') == 0 ? '' : serverConfig.resourceBaseUrl) + 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 class="item-fun">
                    <!-- <div class="item-fun-user">
                        <div class="item-fun-user-via">头像</div>
                        <span class="item-fun-user-name">{{ item.userId }}</span>
                    </div> -->

                    <div class="item-fun-left">
                        <div class="item-fun-left-heat">
                            <svg t="1715422736242" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3261" width="20" height="20">
                                <path
                                    d="M462.611692 1016.398769l-61.912615-26.072615c-158.011077-66.481231-258.481231-161.555692-290.500923-274.983385-14.729846-52.105846-14.808615-107.401846-0.275692-164.312615 14.572308-57.068308 43.953231-115.948308 87.315692-175.025231 24.379077-33.870769 38.4-62.936615 44.189538-91.372308 6.380308-31.192615 2.796308-63.527385-10.909538-98.855384l-22.173539-57.107693 57.816616 22.724924c62.227692 24.457846 102.833231 67.741538 124.652307 134.06523 9.137231-23.04 14.769231-49.230769 16.423385-77.193846 3.268923-54.980923-9.019077-114.806154-34.540308-168.526769L354.146462 0.669538l43.874461 0.984616c4.647385 0.078769 114.884923 3.780923 234.889846 117.366154l0.787693 0.787692a483.997538 483.997538 0 0 1 77.272615 102.793846c16.817231 29.932308 31.192615 62.739692 43.008 98.107077 4.371692-13.587692 7.719385-26.939077 9.137231-39.266461l8.822154-76.918154 41.472 65.772307c29.853538 47.300923 81.92 148.676923 95.113846 220.002462 21.110154 89.166769 22.252308 168.763077 3.426461 236.504615a312.477538 312.477538 0 0 1-93.420307 150.567385c-84.834462 76.445538-201.019077 103.069538-250.604308 114.451692l-96.886154 22.173539 71.798154-67.584c55.453538-52.224 77.508923-111.222154 65.536-175.261539a213.700923 213.700923 0 0 0-34.422154-81.683692l-0.905846-1.181539-0.787692-1.260307c-0.512-0.787692-41.472-67.820308-68.529231-110.158769-32.571077 24.300308-69.710769 56.635077-91.254154 104.88123-14.257231 31.901538-20.48 68.489846-18.550154 108.62277 2.363077 48.600615 16.699077 104.132923 42.692923 165.021538l25.993846 61.006769z m155.766154-358.006154c5.789538 7.876923 33.240615 47.458462 43.638154 103.069539a224.098462 224.098462 0 0 1-27.332923 156.750769c47.261538-15.753846 102.793846-40.487385 146.904615-80.344615a259.859692 259.859692 0 0 0 77.705846-125.164308c16.502154-59.234462 15.123692-130.205538-4.056615-210.944l-0.275692-1.378462c-7.483077-41.117538-31.547077-97.634462-55.571693-144.502153-5.553231 15.123692-11.618462 29.696-17.132307 42.92923-2.835692 6.695385-5.474462 13.075692-7.876923 19.02277l-33.910154 84.676923-18.195692-89.206154c-28.750769-141.272615-86.528-213.819077-127.606154-256.078769-30.562462-28.829538-79.635692-67.544615-140.8-89.009231a299.874462 299.874462 0 0 0-12.721231-4.135385 389.907692 389.907692 0 0 1 20.558769 147.298462c-3.859692 64.984615-26.112 122.958769-62.739692 163.249231L359.187692 418.461538l-7.561846-58.28923c-7.601231-58.289231-24.339692-98.894769-53.563077-126.739693 2.087385 20.873846 1.063385 41.353846-3.072 61.715693-7.364923 36.036923-24.260923 71.601231-53.208615 111.852307l-0.157539 0.236308c-39.384615 53.563077-65.851077 106.338462-78.76923 156.829539-12.209231 47.812923-12.209231 93.892923-0.039385 136.940307 23.394462 82.904615 92.081231 155.451077 199.955692 212.164923-13.666462-42.850462-21.504-83.101538-23.276307-120.280615-2.363077-48.443077 5.395692-93.065846 23.079384-132.647385 32.137846-72.034462 90.742154-113.821538 129.496616-141.469538l25.836307-18.432 15.753846 23.197538c22.016 32.374154 77.745231 123.352615 84.755693 134.852923z"
                                    fill="#d81e06" p-id="3262">
                                </path>
                            </svg>
                            <span style="margin: 0px 4px;">{{ item.viewCount }}</span>
                        </div>
                    </div>

                    <div class="item-fun-right">
                        <el-button-group>
                            <el-button type="default" @click="act_addFavorite(item.id)">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20" height="20">
                                    <path v-if="isTemplateFavorited(item.id)" fill="#ffd700"
                                        d="M512 747.84l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z">
                                    </path>
                                    <path v-else fill="currentColor"
                                        d="M313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z">
                                    </path>
                                </svg>
                                <!-- <span style="margin: 0px 4px;">{{ isTemplateFavorited(item.id) ? '已收藏' : '收藏' }}</span> -->
                            </el-button>
                            <el-button type="default"
                                style="background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));"
                                @click="act_addShoppingCartButtonClick(item.id)">
                                <span style="font-weight: bold; color: rgb(255, 255, 255);">加入购物车</span>
                            </el-button>
                            <el-button type="default"
                                style="background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));"
                                @click="act_purchaseButtonClick(item.id)">
                                <span style="font-weight: bold; color: rgb(255, 255, 255);">立即购买</span>
                            </el-button>
                        </el-button-group>
                    </div>

                </div>
            </div>

        </div>


    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import { useUserStore, useShoppingCartStore } from '@/store/index'
import { getTemplatesShowList } from '@/http/api/pages/Template/index'
import { addFavorite, listFavorite, removeFavorite } from '@/http/api/pages/Favorite/index'
import { ElMessage } from 'element-plus'
import serverConfig from "@/http/config";

/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
const g_route = useRoute();
const g_router = useRouter();
const g_userStore = useUserStore();
const g_shoppingCartStore = useShoppingCartStore();
const g_templateCaseList = ref([]);
const g_favoriteList = ref([]);
const g_searchForm = ref({
    title: "",
    tmt: "1", // 行业
    type: "" // 类型
});

/************************************************
 * 生命周期函数
 ************************************************/

onMounted(() => {
    console.log(serverConfig)
    get_templateCaseList();
})

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

const act_radioGroupChange = (ts) => {
    get_templateCaseList();
}

const act_searchButtonClick = (ts) => {
    get_templateCaseList(undefined, { isRefetch: true });
}

const act_addShoppingCartButtonClick = (templateId) => {
    if (!g_userStore.isUserLogin()) {
        ElMessage.warning('请先登录');
        g_userStore.clearProfile();
        // window.location.href = "/login";
        g_router.push("/login");
        return;
    }
    const template = g_templateCaseList.value.find(item => item.id === templateId);
    if (!template) {
        ElMessage.error('模板不存在');
        return;
    }

    g_shoppingCartStore.addItem({
        id: template.id,
        name: template.title,
        price: template.price || 0,
        stock: template.stock || 999,
        imgUrl: template.imgUrl,
        introduction: template.introduction
    });

    ElMessage.success('已添加到购物车');
}

const act_purchaseButtonClick = (templateId) => {
    if (!g_userStore.isUserLogin()) {
        ElMessage.warning('请先登录');
        g_userStore.clearProfile();
        // window.location.href = "/login";
        g_router.push("/login");
        return;
    }
    g_router.push({
        path: '/ConfirmOrder',
        query: {
            templateId: templateId
        }
    });
}

// 获取模板案例数据
const get_templateCaseList = async (payload = g_searchForm.value) => {
    const response = await getTemplatesShowList(payload);
    g_templateCaseList.value = response.data;

    // 获取收藏列表
    if (g_userStore.isUserLogin()) {
        try {
            const favoriteResponse = await listFavorite({ userId: g_userStore.userInfo.user.id });
            g_favoriteList.value = favoriteResponse.data.filter(item => item.template && item.status == 1);
        } catch (error) {
            console.error('获取收藏列表失败:', error);
        }
    }
}

// 检查模板是否已收藏
const isTemplateFavorited = (templateId) => {
    if (g_userStore.isUserLogin()) {
        return g_favoriteList.value.some(item => item.templateId == templateId);
    }
    return false;
}

// 添加/取消收藏
const act_addFavorite = async (templateId) => {
    if (!g_userStore.isUserLogin()) {
        ElMessage.warning('请先登录');
        g_userStore.clearProfile();
        // window.location.href = "/login";
        g_router.push("/login");
        return;
    }

    try {
        const params = {
            userId: g_userStore.userInfo.user.id,
            templateId: templateId
        };

        const isFavorited = isTemplateFavorited(templateId);
        if (isFavorited) {
            var current = g_favoriteList.value.find(item => item.templateId == templateId) || {};
            params.status = 0;
            params.id = current.id;
            // 取消收藏
            await removeFavorite(params);
            g_favoriteList.value = g_favoriteList.value.filter(item => item.templateId != templateId);
            ElMessage.success('已取消收藏');
        } else {
            // 添加收藏
            await addFavorite(params);
            // g_favoriteList.value.push({ templateId: templateId });
            act_searchButtonClick();
            ElMessage.success('收藏成功');
        }
    } catch (error) {
        console.error('操作失败:', error);
        ElMessage.error('操作失败');
    }
}

</script>

<style scoped>
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.box {
    flex: 1;
    padding: 24px calc(2vw + 2vh + 2vmin);
    min-height: calc(100% - 66px);
    background-color: rgb(240, 240, 240);
    overflow: hidden;
}

.box-top {
    padding: 16px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    animation: lapse 0.5s ease-in-out;
}

/* 向下滑出动画 */
@keyframes lapse {
    0% {
        transform: translateY(-100%);
    }


    100% {
        transform: translateY(0);
    }
}

.box-top-search {
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
}

.search-btn {
    margin-left: 16px;
}

.box-top-type {
    margin-top: 16px;
    padding: 0px 16px;
    border-radius: 8px;
}

.box-top-item-title {
    margin-right: 16px;
}

.box-content {
    padding: 16px 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    grid-gap: 10px;
    justify-items: center;
    border-radius: 8px;
    animation: Slide-out 0.8s ease-in-out;
}

/* 渐显动画 */
@keyframes Slide-out {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.box-content-item {
    width: calc(100% - 16px);
    height: 280px;
    padding: 8px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.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;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

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

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

.item-fun-user {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-fun-user-via {
    width: 40px;
    height: 40px;
    background-color: rgb(237, 196, 255);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-fun-user-name {
    margin: 0px 8px;
}

.item-fun-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-fun-left-heat {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-fun-left-collect {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-fun-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 隐藏单选框前面点 */
::v-deep .el-radio__input {
    display: none;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
    .box {
        padding: 16px 8px;
    }
}
</style>