<!-- 展厅案例明细页面 -->

<template>
    <div class="showroom-case-detail-page">
        <div class="header">
            <h1>展厅明细</h1>
        </div>
        <div class="body">
            <div class="showroom-case">
                <div class="showroom-case-img">
                    <el-image style="width: 100%;height: 100%"
                        :src="(g_showroomCase.cover?.indexOf('http') == 0 ? '' : 'https://') + g_showroomCase.cover"
                        fit="cover" />
                </div>
                <div class="showroom-case-content">
                    <div class="item-content-title">{{ g_showroomCase.title }}</div>
                    <el-text class="item-content-introduction" line-clamp="2">
                        {{ g_showroomCase.introduction }}
                    </el-text>
                    <!-- <div class="item-content-price">{{ '100￥' }}</div> -->
                </div>
            </div>
            <div class="template-case">
                <div class="template-case-item" v-for="item in g_templateCaseList">
                    <div class="item-img">
                        <el-image style="width: 100%;height: 100%"
                            :src="(item.url?.indexOf('http') == 0 ? '' : 'https://') + item.url" fit="cover" />
                    </div>
                    <div class="item-content">
                        <div class="item-content-title">{{ item.title }}</div>
                        <el-text class="item-content-introduction" line-clamp="2">
                            {{ item.introduction }}
                        </el-text>
                        <!-- <div class="item-content-price">{{ '100￥' }}</div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="footer"> -->
        <!-- <el-button-group> -->
        <!-- <el-button type="default">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20" height="20">
                        <path fill="currentColor"
                            d="m512 747.84 228.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.72zM313.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;color: rgb(61, 61, 61);">收藏</span>
                </el-button> -->
        <!-- <el-button type="default"
                    style="background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));">
                    <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));">
                    <span style="font-weight: bold; color: rgb(255, 255, 255);">立即购买</span>
                </el-button> -->
        <!-- </el-button-group> -->
        <!-- </div> -->
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, watch, onMounted } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import { useUserStore } from '@/store/index'
import { getAppsDetail } from '@/http/api/pages/Gallery/index'
import { getTemplatesDetail } from '@/http/api/pages/Template/index'

/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
const g_route = useRoute();
const g_showroomCase = ref({});
const g_templateCaseList = ref([]);

/************************************************
 * 生命周期函数
 ************************************************/
onMounted(() => {
    get_showroomCase();
    // todo 缺少接口：通过展厅ID获取展厅下的模板列表
    // get_templateCaseList();
})

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

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

const get_showroomCase = async () => {
    var response = await getAppsDetail(g_route.query.showroomId);
    g_showroomCase.value = response.data;
}

const get_templateCaseList = async () => {
    var response = await getTemplatesDetail(g_route.query.showroomId);
    g_templateCaseList.value = response.data;
}

</script>

<style scoped>
.showroom-case-detail-page {
    flex: 1;
    padding: 24px calc(2vw + 2vh + 2vmin);
    min-height: calc(100% - 66px);
    background-color: rgb(240, 240, 240);
    overflow: hidden;

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

    .body {
        padding: 16px 0;

        .showroom-case {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
            grid-gap: 10px;
            justify-items: center;
            animation: slide-out 0.8s ease-in-out;

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

            .showroom-case-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);
            }

            .showroom-case-content {
                flex: 3;
                padding: 4px 0px;

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

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

                .item-content-price {
                    text-align: right;
                }
            }
        }

        .template-case {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
            grid-gap: 10px;
            justify-items: center;
            animation: slide-out 0.8s ease-in-out;

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

                .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-content-title {
                        font-size: 20px;
                        font-weight: 600;
                        margin-bottom: 4px
                    }

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

                    .item-content-price {
                        text-align: right;
                    }
                }
            }
        }

        .other-info {
            background-color: rgb(255, 255, 255);
            margin-top: 16px;
            padding: 8px;
            border-radius: 8px;


            .other-info-item {
                padding: 4px;

                .item-title {
                    font-weight: 600;
                }
            }
        }
    }

    .footer {
        padding: 16px;
        background-color: rgb(255, 255, 255);
        border-radius: 8px;
        animation: lapse 0.5s ease-in-out;
        text-align: right;

        .button-group {
            display: flex;
            justify-content: center;
        }
    }
}

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

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

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

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

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