<template>
    <van-pull-refresh
        class="home_refresh"
        success-text="加载成功"
        success-duration="1000"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <div class="home">
            <div class="contect" :class="shopList.length < 2 ? 'shop_list_one' : ''">
                <!-- 首页轮播 -->
                <van-swipe class="swipe_banner" :autoplay="3000" indicator-color="#ffffff">
                    <van-swipe-item v-for="(item, index) in banners" :key="index">
                        <!-- <img :src="item.pic" alt="" class="swipe_banner_img" /> -->
                        <van-image
                            width="100%"
                            height="140px"
                            :src="getImg(item.pic)"
                            fit="cover"
                            @click="goNext(item)"
                        />
                    </van-swipe-item>
                </van-swipe>
                <!-- <swiper
            pagination
            class="swipe_banner"
            :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="collection_list">
                    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getList"> -->
                    <!-- @load="getList" -->
                    <product-large
                        v-for="(item, index) in shopList"
                        :key="index"
                        v-model:info="shopList[index].obj"
                        :type="item.type"
                    ></product-large>
                    <!-- </van-list> -->
                    <div class="tip_title">
                        <van-divider class="tip_title_one">南京数藏文化科技有限公司</van-divider>
                        <div class="tip_title_two" @click="keepRecord">苏ICP备2022016578号-1</div>
                    </div>
                </div>
            </div>
            <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
             <van-swipe-item v-for="item in banners" :key="item.id">
                 <img :src="item.img" alt="">
             </van-swipe-item>
        </van-swipe> -->
            <!-- <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">
                <img :src="item.img" alt="">
            </swiper-slide>
        </swiper> -->
            <!-- <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].obj"
                :type="item.type"
            ></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>
    </van-pull-refresh>
</template>
<script>
import product from '../mixins/product';
import ProductLarge from '../components/product/productLarge.vue';
import banner from '../mixins/banner';
// import ProductSmall from '../components/product/productSmall.vue';
export default {
    data() {
        return {
            collectionId: '',
            banners: [],
            shopList: [],
            loading: false,
            finished: false,
            page: 0,
            isLoading: true
        };
    },
    mixins: [product, banner],
    components: {
        ProductLarge
        // ProductSmall
    },
    methods: {
        // 获取藏品列表
        getList() {
            if (this.page === 0) {
                this.shopList = [];
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.loading = true;
            this.$http.get('/collection/recommend').then(res => {
                this.shopList = res.filter(item => {
                    return item.type === 'collection';
                });
                this.$toast.clear();
            });
        },
        // 获取首页轮播
        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();
                });
        },
        getUser() {
            this.$http.post('user/my').then(res => {});
        },
        onRefresh() {
            Promise.all([this.getBanner(), this.getList()]).then(res => {
                this.isLoading = false;
            });
        },
        keepRecord() {
            document.location.replace('https://beian.miit.gov.cn');
        }
    },
    mounted() {
        let that = this;
        that.getList();
        that.getBanner();
        // that.getUser();
    }
};
// 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'])
// },
// data() {
//     return {
//         banners: [],
//         products: [],
//         active: 0,
//         news: [],
//         loading: false,
//         finished: false,
//         page: 0,
//         empty: false,
//         bgImg: ''
//     };
// },
// mounted() {
//     if (window.cordova && StatusBar && StatusBar.isVisible) {
//         StatusBar.backgroundColorByHexString('#F5F7FA');
//         StatusBar.styleDefault();
//     }
//     this.getInit();
//     this.showTips();
// this.$http.get('sysConfig/get/home_bg').then(res => {
//     this.bgImg = res.value || '';
// });
// },
// methods: {
//     showTips() {
//         let inApp = /#cordova#/i.test(navigator.userAgent);
//         let inIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);

//         if (!window.localStorage.getItem('AppTips') && !inIos && inApp) {
//             this.$dialog
//                 .confirm({
//                     title: '古藏站服务协议和隐私政策',
//                     message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意古藏站宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
//                     confirmButtonText: '同意并继续',
//                     cancelButtonText: '不同意',
//                     allowHtml: true
//                 })
//                 .then(() => {
//                     return this.$dialog.confirm({
//                         title: '温馨提示',
//                         message:
//                             '收集个人信息为我们向您提供服务所必须哦。我们仅会将您的个人信息用于为您提供服务，若不同意此协议，我们将无法为您提供服务并退出应用。',
//                         confirmButtonText: '同意',
//                         cancelButtonText: '不同意'
//                     });
//                 })
//                 .then(() => {
//                     window.localStorage.setItem('AppTips', '1');
//                 });
//         }
//     },
//     getInit() {
//         this.$toast.loading({
//             message: '加载中...',
//             forbidClick: true
//         });
//         this.getBanner();
//         this.getProduct().then(res => {
//             this.products = res;
//         });
//         // this.getNews();
//     },
//     getProduct() {
//         return this.$http.get('/collection/recommend').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>
.home_refresh {
    background: #0f0f27;
}
.home {
    .contect {
        width: 100%;
        height: 100%;
        background-color: #0f0f27;
        padding: 16px;
        box-sizing: border-box;
        .swipe_banner {
            width: 100%;
            height: 140px;
            margin-bottom: 20px;
            border-radius: 20px;
            .swipe_banner_img {
                width: 100%;
            }
        }
        .collection_list {
            margin-bottom: 50px;
            .tip_title {
                text-align: center;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
            }
            .tip_title_one {
                font-size: 14px;
                color: #939599;
                // background: rgba(147, 149, 153, 0.3);
            }
            .tip_title_one::before {
                height: 1px;
                background: #5f646f;
                opacity: 0.3;
            }
            .tip_title_one::after {
                height: 1px;
                background: #5f646f;
                opacity: 0.3;
            }
        }
    }
    .shop_list_one {
        height: 100%;
        position: absolute;
    }
}
</style>
