<template>
<div class="course-page">
    <div class="topcontent">
        <img src="../../assets/img/bg/college_bg.png" alt="" style="height: 447px;width: 650px;margin-right:134px;">
        <div>
            <div style="font-size: 60px;width: 540px;">{{$t('college.text1')}}</div>
            <div style="font-size: 36px;width: 540px;">{{$t('college.text2')}}</div>
        </div>
    </div>
    <div class="banner">
        <div class="container pt-3 newcontent">
            <div class="row justify-content-center align-items-center" style="height: 100%;">
                <div class="col-5 left">
                    <div class="title h3 text-light" style="font-size: 48px;">{{$t('college.buy')}}</div>
                    <div>
                        <ul class="list">
                            <li class="d-flex align-items-start my-3">
                                <div class="num text-light">1</div>
                                <div>
                                    <div class="label h5">{{$t('college.register')}} AMATAK</div>
                                    <div class="txt">{{$t('college.visit',{name:'AMATAK'})}}</div>
                                </div>
                            </li>
                            <li class="d-flex align-items-start my-3">
                                <div class="num text-light">2</div>
                                <div>
                                    <div class="label h5">{{$t('college.realName')}}</div>
                                    <div class="txt">{{$t('college.upload')}}</div>
                                </div>
                            </li>
                            <li class="d-flex align-items-start my-3">
                                <div class="num text-light">3</div>
                                <div>
                                    <div class="label h5">{{$t('college.oneClick')}}</div>
                                    <div class="txt">{{$t('college.inAssets')}}</div>
                                </div>
                            </li>
                        </ul>
                        <router-link tag="button" to="/exchange" class="btn btn-primary">{{$t('college.tradeNow')}}</router-link>
                    </div>
                </div>
                <div class=" right" v-if="video" style="width: 692px;height: 367px;">
                    <video class="video" preload controls :src="video.url" :poster="`https://guanli.coin.amatak.net/storage/` + video.poster"></video>
                </div>
            </div>
        </div>

        <div class="banner-tab">
            <div class="container">
                <div class="row">
                    <div class="col-12 d-flex justify-content-center">
                        <div class="dianItem" :class="index==nowIndex?'active':''" v-for="(banner, index) in bannerList" :key="index" @click="view(banner, index)"></div>
                        <!-- <div class="w-25 item active" v-for="(banner, index) in bannerList" :key="index" @click="view(banner)">
                            <div class="icon fn-22">
                                <i class="default el-icon-refresh"></i>
                                <i class="iconshow el-icon-coin"></i>
                            </div>
                            <div class="txt">{{ banner.name }}</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 列表 -->
    <div class="container course-list" style="width: 1320px !important;max-width:none;padding: 0px;">
        <div class="row mt-3" v-for="(item, index) in categoryList" :key="index">
            <div class="col-12">
                <div class="title h3 my-4 d-flex justify-content-between align-items-center mb-5">
                    <span style="font-size: 50px;">
                        {{ item.name }}
                    </span>
                    <router-link :to="`/college/list/${item.id}`" class="fn-28 text-light">
                        {{$t('college.seeMore')}}&gt;&gt;
                    </router-link>
                </div>
                <div class="row justify-content-between">
                    <div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(article, index) in item.article" :key="index">
                        <router-link :to="`/college/detail/${item.id}/${article.id}`">
                            <div class="banner">
                                <img :src="article.full_cover" alt />
                            </div>
                            <div class="txt">
                                {{article.title}}
                            </div>
                            <div class="txt2" v-html="article.body"></div>
                            <div class="txt2">{{article.updated_at}}</div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- lattest-news-section -->
    <div class="colto-section" v-if="0">
        <div class="container">
            <div class="colto-content-wrap d-flex flex-column align-items-center justify-content-center">
                <div class="colto-content">
                    <div class="title">{{ $t("common.start-trade") }}</div>
                </div>
                <div class="colto-btn-group" v-if="!isLogin">
                    <router-link tag="button" to="/sign-in" class="btn  btn-success rounded-pill callto-btn">{{$t('common.login')}}</router-link>
                    <span>or</span>
                    <router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn">{{$t('common.register')}}</router-link>
                </div>
                <div v-else class="colto-btn-group">
                    <router-link tag="button" to="/exchange" class="btn btn-primary rounded-pill callto-btn">{{$t('common.trading')}}</router-link>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import College from "@/api/college";

export default {
    data() {
        return {
            // 当前播放的视频
            video: null,
            categoryList: [],
            bannerList: [],
            nowIndex: 0
        }
    },
    computed: {
        isLogin() {
            return Boolean(localStorage.token);
        },
    },
    methods: {
        view(banner, index) {
            this.video.url = banner.url;
            this.video.poster = banner.poster;
            this.nowIndex = index;
        },

        initPage() {
            College.college().then(response => {
                ({
                    categoryList: this.categoryList,
                    bannerList: this.bannerList
                } = response);

                this.video = this.bannerList[0];
            }).catch(err => {

            });
        },
        getVideo() {

        }
    },
    created() {
        this.initPage();
    },
};
</script>

<style lang="scss" scoped>
.course-page{
    background-color: #1a1a1a;
    padding: 118px 0px 100px;
}
.course-page .banner{
    background: transparent;
}
.topcontent{
    display: flex;
    justify-content: center;
    align-items: center;
}
.newcontent{
    width: 1400px !important;max-width:none;
    height:594px;border:1px solid #828282;
    border-radius: 44px;margin-bottom:66px;
    margin-top: 156px;
}
.course-page .banner .banner-tab {
    border-top: none;

    .dianItem{
        width: 12px;
        height: 12px;
        background-color: #4A4A4A;
        border-radius: 50%;
        margin: 0px 14px;
        cursor: pointer;

        &.active{
            background-color: #fff;
        }
    }
}
.course-page .banner .right .video{
    height: 100%;
}
.course-page .course-list .item .banner{
    width: 310px;
    height: 164px;
    border-radius: 10px;
    margin-bottom: 35px;
}
.course-page .course-list .item .txt{
    padding: 0px 45px 0px 25px;
    font-size: 22px;
    color: #fff;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 66px;
}
.course-page .course-list .item .txt2{
    padding: 0px 45px 0px 25px;
    font-size: 16px;
    color: #929292;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>
