<template>
    <div class="home">
        <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
        <div class="welcom">
            <div class="left">
                <div class="text1">WELCOME</div>
                <div class="text2" :class="{ text3: isLogin }">{{ isLogin ? `${userInfo.nickname}!` : '探索者!' }}</div>
            </div>
            <van-image
                width="38"
                height="38"
                :radius="32"
                :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
                :src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
            ></van-image>
        </div>

        <swiper
            pagination
            class="mySwiper"
            :slidesPerView="'auto'"
            :spaceBetween="20"
            :autoplay="{ delay: 3500 }"
            v-if="banners.length > 0"
        >
            <swiper-slide v-for="item in banners" :key="item.id">
                <product-small :info="item"></product-small>
            </swiper-slide>
        </swiper>

        <div class="tabs" v-if="!empty">
            <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
            <div class="tab" :class="{ active: active === 1 }" @click="active = 1">产品新闻端</div>
        </div>

        <div class="list" v-if="active == 0">
            <product-large
                v-for="(item, index) in products"
                :key="index"
                v-model:info="products[index]"
            ></product-large>
        </div>
        <template v-else>
            <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getNews">
                <news-info v-for="item in news" :key="item.id" :info="item"></news-info>
            </van-list>
        </template>
    </div>
</template>

<script>
import product from '../mixins/product';
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { Pagination, Autoplay } from 'swiper';

// install Swiper modules
SwiperCore.use([Pagination, Autoplay]);

import banner from '../mixins/banner';
import ProductLarge from '../components/product/productLarge.vue';
import ProductSmall from '../components/product/productSmall.vue';
import { mapState } from 'vuex';
import NewsInfo from '../components/product/NewsInfo';

export default {
    name: 'home',
    inject: ['bar'],
    mixins: [banner, product],
    components: {
        Swiper,
        SwiperSlide,
        ProductLarge,
        ProductSmall,
        NewsInfo
    },
    computed: {
        ...mapState(['userInfo']),
        bgImg() {
            let img = '';
            if (this.active === 0 && this.products.length > 0) {
                img = this.getImg(this.changeImgs(this.products[0].pic));
            }

            if (this.active === 1 && this.news.length > 0) {
                img = this.getImg(this.news[0].pic);
            }

            return img;
        }
    },
    data() {
        return {
            banners: [],
            products: [],
            active: 0,
            news: [],
            loading: false,
            finished: false,
            page: 0,
            empty: false
        };
    },
    mounted() {
        if (window.cordova && StatusBar && StatusBar.isVisible) {
            StatusBar.backgroundColorByHexString('#F5F7FA');
            StatusBar.styleDefault();
        }
        this.getInit();
    },
    methods: {
        getInit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.getBanner();
            this.getProduct('LIST').then(res => {
                this.products = res;
            });
            this.getNews();
        },
        getProduct(type = 'BANNER') {
            return this.$http
                .get('/collection/recommend', {
                    type: type
                })
                .then(res => {
                    return Promise.resolve(res);
                });
        },
        getBanner() {
            this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'HOME',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    this.$toast.clear();
                });
        },
        getList() {
            if (this.page === 0) {
                this.list = [];
            }
            this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: 20,
                        query: {
                            onShelf: true,
                            del: false
                        },
                        sort: 'createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.list = [...this.list, ...res.content];
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                });
        },
        getMiner() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { minter: true },
                        size: 5,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.miners = res.content;
                    // console.log(this.miners);
                });
        },
        getNews() {
            if (this.page === 0) {
                this.news = [];
            }
            this.loading = true;
            this.finished = false;
            this.empty = false;
            this.$http
                .post(
                    '/news/all',
                    {
                        page: this.page,
                        size: 20,
                        query: {
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.news = [...this.news, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 9px 16px;
    background-color: @bg;
    display: flex;
    align-items: center;
    .logo {
        width: 74px;
        height: 26px;
    }

    .search {
        flex-grow: 1;
        background-color: @bg3;
        display: flex;
        align-items: center;
        margin-left: 10px;
        padding: 4px 20px;
        border-radius: 21px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
        font-size: 14px;
        color: @text3;
        line-height: 24px;
    }
}

.home {
    // background-color: @bg3;
    position: relative;
    z-index: 1;
}

::v-deep(.mySwiper) {
    // height: 255px;
    padding-top: 16px;
    padding-left: 16px;
    box-sizing: border-box;
    padding-bottom: 35px;

    .swiper-pagination {
        bottom: 13px;
    }

    .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        border-radius: 5px;
        background: @text3;
        margin: 0 4px;
    }

    .swiper-pagination-bullet-active {
        background: #fff;
    }
}
.swiper-slide {
    width: 255px;
}

.list {
    padding: 12px 0 100px;
}

.welcom {
    .flex();
    align-items: flex-end;
    padding: 12px 16px 0;
    .left {
        flex-grow: 1;
        .text1 {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            line-height: 24px;
        }
        .text2 {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            line-height: 32px;
            letter-spacing: 2px;

            &.text3 {
                letter-spacing: 0px;
                font-weight: normal;
                font-family: SourceHanSans-Medium;
            }
        }
    }
}

.tabs {
    .flex();
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 24px;
    padding: 0 16px;

    .tab + .tab {
        margin-left: 20px;
    }

    .tab {
        position: relative;
        &.active {
            font-weight: bold;
            color: #ffffff;

            &::after {
                content: '';
                height: 2px;
                background-color: #fff;
                width: 18px;
                position: absolute;
                bottom: -2px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>
