<!-- 年度赛事页面 -->
<template>
    <div class="fill"></div>
    <div class="banner">
        <img src="../../assets/images/banner2.png" alt="">
    </div>
    <div class="competition" v-loading="loading">
        <!-- 简介 -->
        <div class="synopsis">
            <div class="name">年度比赛名称</div>
            <div class="content">
                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
                比赛简介比赛简介比赛简介比赛简介比赛简介</div>
            <div class="date">报名时间：2023.08.23-2023.09.23</div>
        </div>

        <!-- 选择项目 -->
        <div class="select">
            <div class="left">
                <div class="text-box">
                    <div class="title">选择项目</div>
                    <div class="small">300+竞赛登陆后请报名</div>
                </div>

                <div class="card-list">
                    <template v-for="o, i in dataList" :key="o.id">
                        <div v-if="(i + 5) % 4 == 1" class="card" type="yellow">
                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                            <div class="bottom">
                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                <el-link :underline="false" class="link">详情</el-link>
                            </div>
                        </div>

                        <div v-else-if="(i + 5) % 4 == 2" class="card" type="purple">
                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                            <div class="bottom">
                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                <el-link :underline="false" class="link">详情</el-link>
                            </div>
                        </div>

                        <div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00">
                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                            <div class="bottom">
                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                <el-link :underline="false" class="link">详情</el-link>
                            </div>
                        </div>

                        <div v-else-if="(i + 5) % 4 == 0" class="card" type="orange">
                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                            <div class="bottom">
                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                <el-link :underline="false" class="link">详情</el-link>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="right">
                <div class="text-box">
                    <div class="title">历史比赛</div>
                    <div class="small">往年历史赛事</div>
                </div>

                <div class="game-list">
                    <div class="card-game" v-for="i in 5" :key="i">
                        <div class="pos">
                            前往查看
                        </div>
                        <div class="top">
                            2023年度
                        </div>
                        <div class="center">
                            <div class="text">河南省大学生创新创业大赛</div>
                            <img src="../../assets/images/编组.png" alt="">
                        </div>
                        <div class="bottom">
                            报名时间：2023.08.23-2023.09.23
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getCompetitionApi } from '@/api/person';
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElLoading } from 'element-plus';

const route = useRoute();
const router = useRouter();

// loading
const loading = ref(false);
let loadingInstance: any;
watch(loading, newVal => {
    if (newVal) loadingInstance = ElLoading.service({ fullscreen: true });
    else if (loadingInstance) loadingInstance.close();
});

// 数据列表
const dataList = ref<any[]>([]);
async function getList() {
    try {
        loading.value = true;
        const res: any = await getCompetitionApi(route.query.id as string);
        if (!res.result) return
        dataList.value = res.result;
    } catch (error) {
        ElMessage.error('请求失败');
    } finally {
        loading.value = false;
    }
}

getList();

// 跳转项目名称
function goProjectName(id: any) {
    router.push(`/projectName?id=${id}&bcId=${route.query.id}`)
}
</script>

<style lang="scss" scoped>
.fill {
    padding-top: 80px;
}

.banner {
    width: 100%;
    height: 367px;
    border-radius: 0px 0px 0px 0px;

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

.competition {
    margin: 0 auto;
    width: $base-container-width;

    .synopsis {
        .name {
            height: 59px;
            line-height: 59px;
            font-family: Open Sans, Open Sans;
            font-weight: bold;
            font-size: 42px;
            color: #333333;
        }

        .content {
            margin-top: 40px;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #555555;
            line-height: 23px;
        }

        .date {
            margin-top: 30px;
            height: 23px;
            line-height: 23px;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #858585;
        }
    }

    .select {
        margin-top: 125px;
        margin-bottom: 500px;
        display: flex;
        justify-content: space-between;

        .left {
            width: 1100px;

            .card-list {
                display: flex;
                flex-wrap: wrap;
                column-gap: 20px;
                row-gap: 40px;

                .card {
                    width: 260px;
                    height: 160px;
                    padding: 40px 0 0 30px;

                    &[type="yellow"] {
                        background: url(../../assets/images/yellow.png) no-repeat;
                        background-size: cover;
                        --color: #FFC300;
                        --bg-color1: #FFCB9A;
                        --bg-color2: #FFC300;
                    }

                    &[type="purple"] {
                        background: url(../../assets/images/purple.png) no-repeat;
                        background-size: cover;
                        --color: #3F8BFF;
                        --bg-color1: #90BBFC;
                        --bg-color2: #C4CDFF;
                    }

                    &[type="cyan00"] {
                        background: url(../../assets/images/item.png) no-repeat;
                        background-size: cover;
                        --color: #76DAE5;
                        --bg-color1: #74D9E4;
                        --bg-color2: #74E4BC;
                    }

                    &[type="orange"] {
                        background: url(../../assets/images/orange.png) no-repeat;
                        background-size: cover;
                        --color: #FF907B;
                        --bg-color1: #FCA190;
                        --bg-color2: #FCD190;
                    }

                    .top {
                        margin-bottom: 30px;
                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                        font-weight: bold;
                        font-size: 24px;
                        text-wrap: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .bottom {
                        display: flex;
                        gap: 50px;

                        .top,
                        .link {
                            color: var(--color);
                        }

                        .btn {
                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                            font-weight: bold;
                            font-size: 14px;
                            width: 120px;
                            height: 30px;
                            border-radius: 15px;
                            color: #fff;
                            border: none;
                            background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));
                        }
                    }
                }
            }
        }

        .right {
            width: 260px;

            .game-list {
                .card-game {
                    width: 260px;
                    height: 140px;
                    background: linear-gradient(90deg, #21ACA5 0%, #42D9AC 100%);
                    border-radius: 4px 4px 4px 4px;
                    margin-bottom: 18px;
                    background: url(../../assets/images/Rectangle284.png) no-repeat;
                    background-position: top right;
                    padding: 20px 22px;
                    position: relative;

                    .pos {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 115px;
                        height: 28px;
                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                        font-weight: 400;
                        font-size: 12px;
                        color: #F6F5FB;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                    }

                    .top {
                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                        font-weight: 400;
                        font-size: 12px;
                        color: rgba(51, 51, 51, 0.8);
                        line-height: 14px;
                    }

                    .center {
                        margin: 10px 0;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .text {
                            width: 140px;
                            height: 40px;
                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                            font-weight: bold;
                            font-size: 16px;
                            color: #333333;
                            line-height: 20px;
                        }
                    }

                    .bottom {
                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                        font-weight: 400;
                        font-size: 12px;
                        color: rgba(51, 51, 51, 0.8);
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .left,
        .right {
            .text-box {
                margin-bottom: 46px;

                .title {
                    height: 42px;
                    line-height: 42px;
                    font-family: Inter, Inter;
                    font-weight: bold;
                    font-size: 40px;
                    color: #1E2033;
                }

                .small {
                    margin-top: 5px;
                    height: 24px;
                    line-height: 24px;
                    font-family: Inter, Inter;
                    font-weight: 400;
                    font-size: 16px;
                    color: #828282;
                }
            }
        }
    }
}
</style>