<template>
    <van-pull-refresh
        class="home_refresh"
        success-text="加载成功"
        success-duration="1000"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <!-- <img :src="require('@assets/png-shouye-guang@3x.png')" alt="" class="contect_img"> -->
        <div class="home">
            <div class="contect">
                <!-- 首页轮播 -->
                <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="calc(41vw - 13px)"
                            radius="18"
                            :src="getImg(item.pic)"
                            fit="cover"
                            @click="goNext(item)"
                        />
                    </van-swipe-item>
                </van-swipe>
                <!-- 藏品切换 -->
                <div class="tabs">
                    <div class="tab" :class="{ active: active === 0 }" @click="active = 0">传奇藏品</div>
                    <div class="tab" :class="{ active: active === 1 }" @click="offeringNotice">发售预告</div>
                </div>
                <!-- <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" v-if="active === 0">
                    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="- 更多藏品敬请期待 -" @load="getList"> -->
                    <!-- @load="getList" -->
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="empty ? '' : '- 更多藏品敬请期待 -'"
                        @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>
                <div class="collection_list" v-else>
                    <div class="advance_notice_sale">
                        <!-- <div class="advance_notice_sale_left">近期发售计划</div> -->
                        <img :src="require('@assets/offering-plan@3x.png')" alt="" class="advance_notice_sale_left" />
                        <!-- <div class="advance_notice_sale_right">
                            <div
                                :class="
                                    scheduledStatus.length == 0
                                        ? 'advance_notice_sale_right_one'
                                        : 'advance_notice_sale_right_two'
                                "
                                @click="reserveButton"
                            >
                                {{ scheduledStatus.length == 0 ? '已预定' : '预定' }}
                            </div>
                        </div> -->
                    </div>
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        @load="offeringNotice"
                        :finished-text="saleList.length == 0 ? '' : '- 更多藏品敬请期待 -'"
                    >
                        <div class="collection_list_con" v-for="(item, index) in saleList" :key="index">
                            <div class="collection_list_con_month">
                                {{ item.dateTime.slice(5, 7) }}月{{ item.dateTime.slice(8, 10) }}日
                            </div>
                            <div v-for="(item,index) in item.subscribeMapDto" :key="index">
                                <div class="collection_list_con_time_con">{{ item.localTime.slice(0, 5) }}</div>
                                 <RecentSale v-model:arr="item.collectionDTOS"></RecentSale>
                            </div>
                        </div>
                    </van-list>
                    <div v-if="saleList.length == 0" class="empty_two">暂无近期发售计划</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 common from '../mixins/common';
import ProductLarge from '../components/product/productLarge.vue';
import banner from '../mixins/banner';
import RecentSale from '../components/product/recentSale.vue';
import { Toast } from 'vant';
import { mapState } from 'vuex';
// import ProductSmall from '../components/product/productSmall.vue';
export default {
    name: 'home',
    inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
    data() {
        return {
            collectionId: '',
            banners: [],
            shopList: [],
            loading: false,
            finished: false,
            page: 0,
            isLoading: true,
            active: 0,
            reserve: false,
            saleList: [],
            scheduledStatus: [],
            scrollTop: 0
        };
    },
    mixins: [product, banner, common],
    components: {
        ProductLarge,
        RecentSale
        // ProductSmall
    },
    computed: {
        ...mapState(['userInfo']),
        getMonth() {
            if (this.saleList.length != 0) {
                this.saleList.map(item => {
                    return item.dateTime.slice(5, 10);
                });
            }
            return '';
        },
        getTime() {
            if (this.saleList.length != 0) {
                this.saleList.map(item => {
                    return item.dateTime.slice(11, 16);
                });
            }
            return '';
        }
    },
    methods: {
        // 获取藏品列表
        getList(loading = true) {
            if (this.page === 0) {
                this.shopList = [];
            }
            if (loading) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
            }
            this.loading = true;
            this.finished = false;
            this.$http.get('/collection/recommend').then(res => {
                this.shopList = res.filter(item => {
                    return item.type === 'collection';
                });
                this.finished = true;
                this.loading = false;
                this.$toast.clear();
            });
        },
        // 发售预告
        offeringNotice() {
            this.active = 1;
            // this.finished = false;
            // if (!this.isLogin) {
            //     return;
            // }
            this.loading = true;
            this.finished = false;
            return this.$http.get('collection/subscribeList').then(res => {
                // if (res.first) {
                //     this.saleList = [];
                // }
                this.saleList = res.subList;
                this.scheduledStatus = res.notSubscribedIds;
                this.finished = true;
                this.loading = false;
                // this.loading = false;
                // this.finished = res.last;
                // if (!this.finished) {
                //     this.page = this.page + 1;
                // }
            });
        },
        // 获取首页轮播
        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(false), this.getList(false)]).then(res => {
                this.isLoading = false;
            });
        },
        // 预定
        reserveButton() {
            if (!this.isLogin) {
                this.checkLogin();
                return;
            }
            if (this.scheduledStatus.length != 0) {
                this.scheduledStatus.forEach(item => {
                    this.$http
                        .get('/subscribe/makeAnAppointment', {
                            collectionId: item,
                            userId: this.userInfo.id
                        })
                        .then(res => {
                            // Toast.success('预定成功');
                            Toast({
                                message: '已订阅',
                                icon: require('@assets/yudingwancheng@3x.png')
                            });
                            this.offeringNotice();
                        })
                        .catch(e => {
                            Toast(e.error);
                        });
                });
            }
        }
    },
    mounted() {
        let that = this;
        // that.getList();
        that.getBanner();
        // that.getUser();
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
            setTimeout(() => {
                this.changeScroll(this.scrollTop + 1);
            }, 100);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/productDetail') {
            this.scrollTop = this.scrollWrapper.value.scrollTop;
            this.setKeeps(['index', 'home']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['index', 'home'], false);
        }
        next();
    }
};
// 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>
// .contect_img{
//     width: 221px;
//     height: 192px;
//     position: absolute;
//     left: 0;
//     top: 0;
// }
.home_refresh {
    background: #201B15;
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
.empty_two {
    margin-top: 90px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.3;
    text-align: center;
}
.scroll-content {
    background: #201B15;
}
.home {
    background: #201B15;
    background-image: url(../assets/png-shouye-guang@3x.png);
    background-size: 221px 192px;
    background-repeat: no-repeat;
    .contect {
        width: 100%;
        padding: 12px 15px;
        box-sizing: border-box;
        .swipe_banner {
            width: 100%;
            // height: 140px;
            margin-bottom: 24px;
            border-radius: 18px;
            .swipe_banner_img {
                width: 100%;
            }
        }
        .tabs {
            display: flex;
            margin-bottom: 18px;
            .tab {
                margin-right: 18px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.5);
                line-height: 26px;
            }
            .active {
                font-size: 20px;
                font-weight: 600;
                color: #f2d5b2;
            }
        }
        .collection_list {
            margin-bottom: 80px;
            .advance_notice_sale {
                padding-top: 8px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                .advance_notice_sale_left {
                    width: 116px;
                    height: 18px;
                    // margin-top: 5px;
                }
                .advance_notice_sale_right {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    display: flex;
                    .advance_notice_sale_right_one {
                        width: 60px;
                        height: 28px;
                        border-radius: 4px;
                        border: 1px solid #222630;
                        color: rgba(255, 255, 255, 0.3);
                        box-sizing: border-box;
                        line-height: 28px;
                        text-align: center;
                        margin-right: 9px;
                    }
                    .advance_notice_sale_right_two {
                        width: 60px;
                        height: 28px;
                        background: #f9ddb3;
                        border-radius: 4px;
                        color: #503a1e;
                        line-height: 28px;
                        text-align: center;
                    }
                }
            }
            .collection_list_con {
                padding-top: 12px;
                box-sizing: border-box;
                background: linear-gradient(180deg, #232731 0%, #201B15 100%);
                border-radius: 18px;
                .collection_list_con_month {
                    margin-left: 15px;
                    height: 28px;
                    font-size: 20px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                    line-height: 28px;
                    margin-bottom: 2px;
                }
                .collection_list_con_time_con {
                    margin-left: 15px;
                    height: 22px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 22px;
                    margin-bottom: 8px;
                    opacity: 0.6;
                }
            }
        }
    }
    /deep/ .van-popup {
        background: #444955 !important;
    }
    /deep/ .van-toast {
        background: #444955 !important;
    }
}
</style>
