<template>
    <aside id="aside">
        <div class="aside-content">
            <div class="model-section">
                <div class="model-section-title">
                    <svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_1116_3867)">
                            <path
                                d="M6.50039 22C6.06638 22 5.65015 21.8068 5.34325 21.463C5.03636 21.1192 4.86395 20.6529 4.86395 20.1667V17.1111H4.88032V12.0218C4.80722 12.0389 4.74285 12.0548 4.67522 12.0634L4.56939 12.0707C4.30211 12.0707 4.03482 11.9644 3.82318 11.7676L3.72281 11.6612L0.804488 8.1498C0.618224 7.93082 0.510127 7.64291 0.500676 7.34061C0.491226 7.03831 0.58108 6.74263 0.753213 6.50958L0.849218 6.39347L5.48362 0.360595C5.66107 0.155419 5.89924 0.0298254 6.15347 0.00737322L6.28547 3.9996e-05H9.11542C9.53872 3.9996e-05 9.9391 0.265262 10.1409 0.673483L10.2315 0.845816L10.3591 1.0487C10.7006 1.54982 11.3628 2.18904 12.5247 2.18904C13.8513 2.18904 14.5277 1.35304 14.8179 0.845816L14.9084 0.674706C15.0873 0.310484 15.4059 0.0611512 15.7877 0.00981792L15.9339 3.9996e-05H18.897C19.1601 -0.00239303 19.4145 0.106257 19.6094 0.304373L19.6988 0.409484L24.1554 6.44236C24.3533 6.65035 24.475 6.93352 24.4965 7.23658C24.5181 7.53964 24.4381 7.84084 24.2721 8.08136L24.1783 8.19747L21.1476 11.5891C20.924 11.8299 20.6131 11.9741 20.301 11.9741L20.145 11.9497V19.5763C20.1448 19.5968 20.143 19.6173 20.1396 19.6374L20.1374 20.1667C20.1374 20.6529 19.965 21.1192 19.6581 21.463C19.3512 21.8068 18.935 22 18.501 22H6.50039ZM17.2169 7.33336H15.4212C15.0219 7.33336 14.6826 7.75258 14.6826 8.22069V9.10069C14.6826 10.1371 15.4212 11 16.319 11C16.7772 11 17.2169 10.7776 17.5365 10.384C17.8158 10.0381 17.9555 9.57002 17.9555 9.10069V8.24514C17.9555 7.75258 17.6162 7.33336 17.2169 7.33336Z"
                                fill="#4B5563" />
                        </g>
                        <defs>
                            <clipPath id="clip0_1116_3867">
                                <rect width="24" height="22" fill="white" transform="translate(0.5)" />
                            </clipPath>
                        </defs>
                    </svg>
                    <h3>我的模型</h3>
                </div>

                <div class="model-grid">
                    <div class="model-item" v-for="(model, index) in models" :key="model.id" @click="tabModel(model)">
                        <img :src="model.pic" :alt="model.name">
                    </div>
                </div>
                <button class="more-models-btn">更多模型</button>
            </div>

            <div class="reference-section">
                <div class="reference-item">
                    <h4 class="title">参考资料</h4>
                </div>
                <div class="reference-item">
                    <div class="reference-title">高级定制服务</div>
                    <div class="reference-desc">优质面料，精致细节</div>
                </div>
                <div class="reference-item">
                    <div class="reference-title">高级面料</div>
                    <div class="reference-desc">真丝感动</div>
                </div>
            </div>
            <hr style="border: 1px solid #E5E7EB; width: 90%; margin: 38.5px auto;">
            <div class="history-section">
                <h4 class="title">生成历史</h4>
                <div class="history-item" v-for="(item, index) in historyItems" :key="index">
                    <div class="history-title">{{ item.title }}</div>
                    <div class="history-time">{{ item.time }}</div>
                </div>
            </div>
        </div>
    </aside>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { fetchProductList } from "@/api/design.js";

const models = ref([]);

const historyItems = ref([
    { title: '连衣裙设计 v1', time: '2024-01-20 14:30' },
    { title: '连衣裙设计 v2', time: '2024-01-20 14:35' },
]);

const pageNo = ref(1)
const pageSize = ref(6)
const getProductList = async () => {
    models.value = await fetchProductList({ pageNo: pageNo.value, pageSize: pageSize.value });
}
getProductList()

// 切换模型
const tabModel = async (modelItem) => {
    console.log(modelItem);
    window.location.href = '/create?productId=' + modelItem.id;
}
</script>

<style scoped>
#aside {
    width: 100%;
    height: 100%;
    background-color: #EEEAEA;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.aside-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
}

.model-section-title {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 39px 29px 12px 28px;

    h3 {
        margin: 0;

        font-family: Inter;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0%;

    }
}

h3,
h4 {
    margin: 0;
    padding: 0;
    font-weight: 500;
    margin-bottom: 12px;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.model-item {
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    aspect-ratio: 1;
}

.model-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-models-btn {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.reference-section,
.history-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reference-item,
.history-item {
    font-family: Inter;
    font-weight: 200;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000;
    padding: 8px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.reference-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.reference-desc {
    font-family: Inter;
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;

    font-size: 12px;
    color: #666;
}

.history-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.history-time {
    font-size: 12px;
    color: #666;
}

.title {
    font-family: Inter;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #6B7280;
}
</style>
