<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="discover"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <van-sticky ref="top">
            <div class="padding-safe-top">
                <div class="top">
                    <img src="@assets/nav_logo.png" class="logo" alt="" />

                    <div class="search" @click="$router.push('/' + $route.params.companyId + '/productSearch')">
                        <img src="@assets/icon-sosuo.png" alt="" />
                        <span>搜索你要的精彩</span>
                    </div>
                </div>
            </div>
        </van-sticky>

        <!-- <swiper :slides-per-view="3" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
            <swiper-slide v-for="(item, index) in banners" :key="item.id">
                <van-image
                    width="100%"
                    radius="8"
                    height="calc(33vw - 21.3px)"
                    :src="item.pic"
                    fit="cover"
                    @click="goNext(item)"
                />
                <div class="name">
                    <img :src="icons[index]" alt="" />
                    <span>{{ item.name }}</span>
                </div>
            </swiper-slide>
        </swiper> -->

        <div class="menu">
            <div class="menu-item menu-left" @click="goHall">
                <div class="text1">
                    <img src="../assets/info_icon_yishuzhanguan.png" alt="" />
                    <span>艺术展览</span>
                </div>
                <div class="text2">环球捕猎顶级艺术展览，尽在绿洲宇宙！</div>
                <img src="../assets/discover/yishuzhanlan-diwen.png" alt="" class="menu-bg" />
            </div>
            <div class="menu-right">
                <div class="menu-item" @click="$router.push('/hopeMarket')">
                    <div class="text1">
                        <img src="../assets/discover/info_icon_banquanshichang.png" alt="" />
                        <span>版权市场</span>
                    </div>
                    <div class="text2">环球捕猎顶级艺术展览，尽在绿洲宇宙！</div>
                    <img src="../assets/discover/banquanshichang-diwen.png" alt="" class="menu-bg" />
                </div>
                <div
                    class="menu-item"
                    @click="
                        goWin(
                            'https://shop103867459.m.youzan.com/v2/showcase/homepage?alias=Zp3noaegLR&reft=1649311507717_1652343999681&spm=f.100904662_f.100904662_t.1688564850'
                        )
                    "
                >
                    <div class="text1">
                        <img src="../assets/info_icon_yanshengping.png" alt="" />
                        <span>艺术衍生品商城</span>
                    </div>
                    <div class="text2">最酷炫的艺术衍生品集成店，快来pick你的精彩！</div>
                    <img src="../assets/shangcheng-diwen.png" alt="" class="menu-bg" />
                </div>
            </div>
        </div>

        <van-grid :border="false" :column-num="$store.state.review ? 2 : 4">
            <van-grid-item
                text="绿洲头条"
                :to="{
                    path: '/' + $route.params.companyId + '/newsList'
                }"
            >
                <template v-slot:icon>
                    <img class="grid-img" src="@assets/discover/info_icon_lvzhoutoutiao.png" />
                </template>
            </van-grid-item>
            <van-grid-item
                text="绿洲公益"
                :to="{ name: 'newsDetail', query: { id: 5528513 } }"
                v-if="!$store.state.review"
            >
                <template v-slot:icon>
                    <img class="grid-img" src="@assets/discover/info_icon_lvzhougongyi.png" />
                </template>
            </van-grid-item>
            <van-grid-item text="拍卖中心" @click="goAuction" v-if="!$store.state.review">
                <template v-slot:icon>
                    <img class="grid-img" src="@assets/info_icon_paimaixilie.png" />
                </template>
            </van-grid-item>

            <van-grid-item text="铸造中心" :to="{ path: '/' + $route.params.companyId + '/activityList' }">
                <template v-slot:icon>
                    <img class="grid-img" src="@assets/info_icon_weshoushichang.png" />
                </template>
            </van-grid-item>
            <!-- <van-grid-item text="铸造商店" @click="wait">
                <template v-slot:icon>
                    <img class="grid-img" src="@assets/info_icon_zhuzaoshangdian.png" />
                </template>
            </van-grid-item> -->
        </van-grid>

        <div class="box" ref="box">
            <van-sticky :offset-top="tabOffSet">
                <van-tabs
                    class="box-tabs"
                    v-model:active="sort"
                    shrink
                    line-width="16"
                    :before-change="beforeChange"
                    line-height="2"
                    @change="getList(true)"
                >
                    <van-tab
                        v-for="(item, index) in selectOptions"
                        :key="index"
                        :title="item.label"
                        :name="item.value"
                    ></van-tab>
                </van-tabs>
            </van-sticky>

            <van-list
                style="padding-bottom: 100px"
                class="box-list"
                v-model:loading="loading"
                :finished="finished"
                finished-text=""
                @load="getList"
                :class="{ hotList: sort === 'hot' }"
                :immediate-check="false"
            >
                <template v-for="(item, index) in list" :key="item.id">
                    <product-info v-if="sort === 'collection'" v-model:info="list[index]" dark></product-info>
                    <creator-small v-else-if="sort === 'creator'" v-model:info="list[index]"></creator-small>
                    <show-info v-else-if="sort === 'hot'" v-model:info="list[index]" list></show-info>
                </template>
            </van-list>
        </div>

        <div class="tabbar-placeholder"></div>
        <img src="../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
    </van-pull-refresh>
</template>

<script>
import product from '../mixins/product';
import ProductInfo from '../components/product/productInfo.vue';
import banner from '../mixins/banner';
import CreatorSmall from '../components/creator/CreatorSmall.vue';
import ShowInfo from '../components/asset/showInfo.vue';
import { useCssVar } from '@vueuse/core';
export default {
    name: 'discover',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll', 'safeTop'],
    mixins: [banner, product],
    components: {
        ProductInfo,
        CreatorSmall,
        ShowInfo
    },
    data() {
        return {
            stiky: null,
            banners: [],
            box: [],
            products: [],
            hots: [],
            miners: [],
            list: [],
            loading: false,
            finished: false,
            page: 0,
            empty: false,
            scrollTop: 0,
            sort: 'collection',
            selectOptions: [
                {
                    label: '最新发布',
                    value: 'collection'
                },
                {
                    label: '艺术机构',
                    value: 'creator'
                },
                {
                    label: '热力展览',
                    value: 'hot'
                }
            ],
            icons: [
                require('../assets/info_icon_lvzhoutoutiao.png'),
                require('../assets/info_icon_lvzhougongyi.png'),
                require('../assets/info_icon_banquanshichang.png')
            ],
            swiperRef: null,
            notLike: '',
            safeTop: useCssVar('--safe-top', document.body)
        };
    },
    computed: {
        tabOffSet() {
            return Number((this.safeTop || '0').replace('px', '')) + 50;
        }
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        this.getInit();

        if (window.cordova && StatusBar && StatusBar.isVisible) {
            StatusBar.styleLightContent();
        }
        this.$http
            .get('/sysConfig/get/collect_not')
            .then(res => {
                console.log(res);
                this.notLike = res.value;
                return Promise.resolve();
            })
            .catch(e => {
                return Promise.resolve();
            })
            .then(() => {
                this.getList();
            });

        this.emitter.on('updateList', info => {
            let list = [...this.list];
            list.forEach((item, index) => {
                if (info.id === item.id) {
                    list[index] = info;
                }
            });
            this.list = list;
        });
    },
    methods: {
        getInit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.getBanner();
            // this.getProduct('BLIND_BOX', this.sortOptions['精选盲盒']).then(res => {
            //     this.box = res;
            // });
            // this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
            //     this.hots = res;
            // });
            // this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
            //     this.products = res;
            // });
            // this.getMiner();
        },
        setSwiperRef(ref) {
            this.swiperRef = ref;
        },
        getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 4) {
            return this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: size,
                        query: {
                            type: type,
                            onShelf: true,
                            del: false,
                            source: source
                        },
                        sort: sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    return Promise.resolve(res.content);
                });
        },
        getBanner() {
            return this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'DISCOVER',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    this.$toast.clear();
                    if (this.swiperRef) {
                        this.swiperRef.update();
                    }
                });
        },
        beforeChange(index) {
            // if (index === 'hot') {
            //     this.wait();
            //     return false;
            // }
            return true;
        },
        getList(isFirst = false) {
            if (isFirst) {
                this.page = 0;
                this.list = [];
                this.changeScroll(this.$refs.box.offsetTop - 50);
            }
            this.loading = true;
            this.finished = false;
            this.empty = false;
            let url = '/collection/all';
            let query = {
                onShelf: true,
                del: false,
                source: this.$store.state.reviewPay ? 'OFFICIAL' : '',
                notLike: this.notLike
            };
            let sort = 'id,desc';
            if (this.sort === 'creator') {
                url = '/user/all';
                query = {
                    type: 'MINTER',
                    del: false
                };
            } else if (this.sort === 'hot') {
                url = 'showroom/all';
                query = {
                    del: false,
                    status: 'SUCCESS',
                    publish: true
                };
                sort = 'heats,desc';
            } else {
                query.minPrice = 0;
            }

            return this.$http
                .post(
                    url,
                    {
                        page: this.page,
                        size: 20,
                        query: query,
                        sort: sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    if (res.first) {
                        this.list = res.content;
                    } else {
                        this.list = [...this.list, ...res.content];
                    }
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!res.last) {
                        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);
                });
        },
        onRefresh() {
            this.page = 0;
            Promise.all([this.getInit(), this.getList(), this.$store.dispatch('getUsedBuy')]).then(res => {
                this.isLoading = false;
            });
        },
        goTop() {
            this.changeScroll(0, true);
        },
        goHall() {
            this.$http
                .get('/sysConfig/get/hall_show')
                .then(res => {
                    if (res.value === true || res.value === '1') {
                        this.$router.push('/' + this.$route.params.companyId + '/hallList');
                    } else {
                        return Promise.reject();
                    }
                })
                .catch(() => {
                    this.wait();
                });
        },
        goAuction() {
            this.$http
                .get('/sysConfig/get/auction_show')
                .then(res => {
                    if (res.value === true || res.value === '1') {
                        this.$router.push('/' + this.$route.params.companyId + '/auction');
                    } else {
                        return Promise.reject();
                    }
                })
                .catch(() => {
                    this.wait();
                });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
        if (window.cordova && StatusBar && StatusBar.isVisible) {
            StatusBar.styleLightContent();
        }
    },
    beforeRouteLeave(to, from, next) {
        if (!to.meta.menuPage || to.path === '/hall') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['index', 'discover']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['index', 'discover'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 9px 16px;
    background-color: #272b2e;
    display: flex;
    align-items: center;
    .logo {
        width: auto;
        height: 24px;
        display: block;
    }

    .search {
        flex-grow: 1;
        background-color: #373b3e;
        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;
    }
}

.discover {
    background-color: #272b2e;
}

.mySwiper {
    margin: 16px 16px 0;

    .swiper-slide {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        .van-image {
            display: block;
        }
        .name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            .flex();
            justify-content: center;
            height: 24px;
            img {
                width: 18px;
                height: 18px;
            }
            span {
                font-size: 12px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
                margin-left: 2px;
            }
        }
    }
}

.menu {
    .flex();
    padding: 16px 16px 0;
    justify-content: space-between;
    .menu-item {
        width: calc(50vw - 16px);
        box-sizing: border-box;
        position: relative;
        padding: 8px;
        background: linear-gradient(132deg, #3dbb00 0%, #01d890 100%);
        border-radius: 6px 8px 8px;

        .text1 {
            .flex();
            img {
                width: 18px;
                height: 18px;
            }
            span {
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
                margin-left: 2px;
            }
        }

        .text2 {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 12px;
            margin-top: 6px;
        }

        .menu-bg {
            position: absolute;
            right: 0;
            top: 0;
            width: 54px;
            height: 34px;
        }
    }
    .menu-left + .menu-right {
        margin-left: 12px;
    }
    .menu-left {
        align-self: stretch;
        .menu-bg {
            width: 100%;
            height: 100%;
        }

        background: linear-gradient(136deg, #0bc734 0%, #0ed0d8 100%);
    }
    .menu-right {
        .menu-item + .menu-item {
            margin-top: 12px;
        }

        .menu-item {
            &:nth-child(1) {
                background: linear-gradient(132deg, #6c7df9 0%, #87acf0 100%);
            }

            &:nth-child(2) {
                background: linear-gradient(132deg, #2f87d7 0%, #0ad2e6 100%);
            }
        }
    }
}

.grid-img {
    display: block;
    width: 32px;
    height: 32px;
}
// .van-grid {
//     margin-top: 12px;
// }ƒ
/deep/.van-tab.van-tab--active {
    color: #fff !important;
    font-size: 16px;
}
/deep/.van-tabs__line {
    background-color: #fff;
}
/deep/ .van-grid-item__content {
    padding: 16px 0 16px;
}
/deep/ .van-grid-item__text {
    color: #fff;
    font-size: @font1;
    line-height: 18px;
    margin-top: 4px;
}

.title {
    padding: 16px 20px 8px;
    color: @prim;
    font-size: @font3;
    font-weight: bold;
}

.box-list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 0 8px 2px;

    &.hotList {
        padding: 16px;
        background: #272b2e;

        .showInfo + .showInfo {
            margin-top: 16px;
        }
        .showInfo {
            background: #373b3e;
            border-radius: 12px;
        }
    }
    min-height: 100vh;
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-top-width: 0px !important;
}

/deep/.van-tab {
    color: #fff;
    flex: 0;
    // padding: 20px;
    flex-shrink: 0;
    // min-width: 74px;
    font-size: 16px;
    margin-right: 30px !important;
    &.van-tab--active {
        color: @prim;
    }
}
.casting {
    padding-bottom: 10px;
}
.van-tabs {
    border-top: 2px solid #373b3e;
}
/deep/.van-tab {
    margin-right: 0;
}

/deep/.van-sticky--fixed {
    background-color: #272b2e;
}
.goTop {
    position: fixed;
    right: 16px;
    bottom: 70px;
    bottom: calc(env(safe-area-inset-bottom) + 70px);
    width: 44px;
    height: 44px;
    display: block;
    z-index: 20;
}
</style>
