<template>
    <swiper
        :style="{
            '--swiper-navigation-color': '#fff',
            '--swiper-pagination-color': '#fff'
        }"
        :speed="600"
        :parallax="true"
        :slidesPerView="'auto'"
        class="mySwiper"
        @swiper="setSwiperRef"
        :class="{ horizontal: !isVertical, windowHorizontal: !windowVertical }"
        :direction="isVertical ? 'horizontal' : 'vertical'"
    >
        <div class="top">
            <div class="top-btn left" @click="back">
                <img src="../../assets/icon-tuichu.png" alt="" />
                <span>退出展馆</span>
            </div>
            <div class="top-right">
                <div class="top-btn submit" v-if="!isVertical || !windowVertical">
                    <img src="../../assets/icon-tupian.png" alt="" />
                    <span>{{ assets.length }}</span>
                </div>
                <div @click="share" class="top-btn submit" v-if="!isVertical || !windowVertical">
                    <img src="../../assets/icon-fenxiang1.png" alt="" />
                    <span>{{ info.share }}</span>
                </div>
                <div class="top-btn submit" @click="like(info)" v-if="!isVertical || !windowVertical">
                    <img v-if="info.liked" src="../../assets/icon-dianzan3.png" alt="" />
                    <img v-else src="../../assets/icon-dianzan4.png" alt="" />
                    <span>{{ info.likes }}</span>
                </div>
                <div class="top-btn submit" @click="submit" v-if="isMine">
                    <img src="../../assets/icon-fabu.png" alt="" />
                    <span>发布</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="btn" @click="addCollections" v-if="isMine">
                <img src="../../assets/icon-bianjicangpin.png" alt="" />
                <span>编辑藏品</span>
            </div>
            <div class="btn" v-if="inApp" @click="isVertical = !isVertical">
                <img src="../../assets/icon-qiehuanhengping.png" alt="" />
                <span>切换{{ isVertical || windowVertical ? '横屏' : '竖屏' }}</span>
            </div>
        </div>
        <div class="btns" v-if="isVertical && windowVertical">
            <div class="btn">
                <img src="../../assets/icon-tupian.png" alt="" />
                <span>{{ assets.length }}</span>
            </div>
            <div class="btn" @click="share">
                <img src="../../assets/icon-fenxiang1.png" alt="" />
                <span>{{ info.share }}</span>
            </div>
            <div class="btn" @click="like(info)">
                <img v-if="info.liked" src="../../assets/icon-dianzan3.png" alt="" />
                <img v-else src="../../assets/icon-dianzan4.png" alt="" />
                <span>{{ info.likes }}</span>
            </div>
        </div>
        <post ref="post" :info="info"></post>
        <div class="parallax-bg" :data-swiper-parallax="bgParallax">
            <div
                class="parallax-bg-img"
                :style="{
                    'background-image': `url(${info.showroomBg})`
                }"
            ></div>
        </div>
        <swiper-slide class="user">
            <div class="icon" data-swiper-parallax="-300">
                <van-image
                    :src="info.pic || require('../../assets/icon-tianjiacangping.png')"
                    :width="isVertical && windowVertical ? 110 : 120"
                    :height="isVertical && windowVertical ? 110 : 120"
                    fit="cover"
                    radius="8"
                />
                <van-uploader v-if="isMine" class="avatar" :after-read="afterRead" result-type="file" />
            </div>
            <div data-swiper-parallax="-200">
                <div class="name">
                    <div>{{ info.nickname }}</div>
                    <div>的展馆</div>
                </div>
            </div>
            <div class="sub-box" data-swiper-parallax="-100">
                <div class="sub" @click="goEdit">
                    <span>{{ info.introduction || '介绍一下展馆主题吧' }}</span>
                    <img src="../../assets/icon-jieshaozhanguan.png" v-if="isMine" alt="" />
                </div>
            </div>
        </swiper-slide>
        <swiper-slide class="imgs" v-if="assets.length === 0 && isMine">
            <div class="icon" :data-swiper-parallax="distances[0]">
                <van-image
                    :src="require('../../assets/icon-tianjiacangping1.png')"
                    @click="addCollections"
                    :width="isVertical && windowVertical ? 110 : 120"
                    :height="isVertical && windowVertical ? 110 : 120"
                    fit="coevr"
                    radius="8"
                />
            </div>
        </swiper-slide>
        <swiper-slide class="imgs" v-for="(item, index) in showList" :key="index">
            <div
                class="icon"
                :data-swiper-parallax="distances[imgIndex]"
                v-for="(img, imgIndex) in item"
                :key="imgIndex"
                @click="goCollection(img)"
            >
                <van-image
                    :src="img.pic"
                    :width="isVertical && windowVertical ? 110 : 120"
                    :height="isVertical && windowVertical ? 110 : 120"
                    fit="coevr"
                    radius="8"
                />
            </div>
        </swiper-slide>
    </swiper>
</template>

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

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';
// import required modules
import SwiperCore, { Pagination, Parallax, Navigation } from 'swiper';
SwiperCore.use([Pagination, Parallax, Navigation]);
import { watch, ref, computed } from 'vue';
import { useWindowSize } from '@vant/use';
import product from '../../mixins/product';
import room from '../../mixins/room';
import Post from './Post.vue';
let fromRoute = null;
let inApp = /#cordova#/i.test(navigator.userAgent);
export default {
    name: 'Hall',
    inject: ['setKeeps'],
    components: {
        Swiper,
        SwiperSlide,
        Post
    },
    setup() {
        const { width, height } = useWindowSize();

        console.log(width.value); // -> 窗口宽度
        console.log(height.value); // -> 窗口高度

        const windowVertical = computed(() => {
            if (width.value > height.value) {
                return false;
            } else {
                return true;
            }
        });

        return { windowVertical, width };
    },
    mixins: [product, room],
    data() {
        return {
            isVertical: true,
            roomId: 0,
            info: {},
            assets: [],
            distances: [0, 0, 0, 0],
            swiperRef: null,
            inApp
        };
    },
    computed: {
        showList() {
            let assets = [...this.assets];
            let list = [];
            for (let i = 0; i <= Math.floor(assets.length / 4); i++) {
                list.push(assets.slice(i * 4, (i + 1) * 4));
            }
            return list.filter(item => {
                return item.length > 0;
            });
        },
        isMine() {
            return this.isLogin && this.$store.state.userInfo.id === this.info.userId;
        },
        bgParallax() {
            return (
                '-' +
                (this.width * ((this.showList.length || 1) - 1) + (this.isVertical && this.windowVertical ? 280 : 418))
            );
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.roomId = this.$route.query.id;
            this.getDetail();
        }
        this.emitter.on('setIntroduction', e => {
            this.info.introduction = e;
        });
        this.emitter.on('setAssets', assets => {
            this.assets = assets;
            setTimeout(() => {
                this.$nextTick(() => {
                    this.swiperRef.updateSlides();
                });
            }, 500);
        });
    },
    beforeRouteEnter(to, from) {
        fromRoute = from;
    },
    methods: {
        share() {
            this.$http.get(`/showroom/${this.roomId}/share`).then(res => {
                this.getDetail();
            });
            this.$refs.post.init();
        },
        getDetail() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/showroom/get/' + this.roomId).then(res => {
                this.$toast.clear();
                this.info = res;
                this.assets = res.collections || [];
            });
        },
        back() {
            let _this = this;
            this.$dialog.confirm({ title: '提示', message: '确定要退出展馆吗？' }).then(() => {
                if (_this.isMine) {
                    _this.backPage();
                } else {
                    _this.$router.push('/home');
                }
            });
        },
        backPage() {
            if (this.$store.state.loginBackUrl) {
                this.$router.replace(this.$store.state.loginBackUrl);
            } else if (
                !fromRoute.name ||
                fromRoute.name === 'hall' ||
                fromRoute.name === 'userRegister' ||
                fromRoute.name === 'userLogin'
            ) {
                this.$router.replace('/home');
            } else {
                this.$router.back();
            }
        },
        afterRead(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 500).then(img => {
                this.$toast.clear();
                this.info.pic = img;
            });
        },
        addCollections() {
            this.$router.push(
                '/productAdd?ids=' +
                    this.assets
                        .map(item => {
                            return item.collectionId;
                        })
                        .join(',') +
                    '&maxCollection=' +
                    this.info.maxCollection
            );
        },
        setSwiperRef(ref) {
            console.log(ref);
            this.swiperRef = ref;
        },
        submit() {
            let form = {
                ...this.info,
                collections: [...this.assets].map(item => {
                    return {
                        showroomId: this.roomId,
                        collectionId: item.id
                    };
                }),
                publish: true
            };
            this.$http.post('/showroom/update', form, { body: 'json' }).then(res => {
                this.$toast.success('保存成功');
                this.backPage();
            });
        },
        goEdit() {
            if (this.isMine) {
                this.$router.push('/hallEdit?message=' + (this.info.introduction || ''));
            }
        },
        goCollection(info) {
            if (!this.isMine) {
                this.$router.push('/productDetail/' + info.collectionId);
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        if (!to.meta.isHall) {
            this.setKeeps(['Hall'], false);
        } else {
            this.setKeeps(['Hall']);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.mySwiper {
    background-color: #1c1c1c;
}
.user {
    width: 130px;
    padding: 6.3vh 100px 0 30px;
    .icon {
        position: relative;
        .van-image {
            transition: transform ease-in-out 0.3s;
        }
        .avatar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
    }

    .name {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        padding-top: 6px;
    }
    .sub {
        padding-top: 20px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 17px;

        .flex();
        img {
            width: 16px;
            height: 16px;
            display: block;
            margin-left: 6px;
        }
    }
}

.swiper {
    width: 100%;
    height: 100%;
    background: #000;
}

.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 100%;
    .parallax-bg-img {
        width: 100%;
        height: 100%;
        -webkit-background-size: contain;
        background-size: contain;
        transition: transform ease-in-out 0.3s;
    }
}

.imgs {
    width: 100vw;
    height: calc(25.2vh + 230px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // align-items: center;
    flex-wrap: wrap;
    .icon {
        padding: 6.3vh 0;

        .flex();
        justify-content: center;
        width: 50vw;
        box-sizing: border-box;
        img {
            width: 110px;
            height: 110px;
            display: block;
        }
        .van-image {
            transition: transform ease-in-out 0.3s;
        }
    }
}

.bottom {
    position: absolute;
    bottom: 120px;
    left: 30px;
    z-index: 20;
    .bottom(0px);
    .flex();
    .btn {
        transition: transform ease-in-out 0.3s;
    }

    .btn + .btn {
        margin-left: 40px;
    }
    img {
        width: 48px;
        height: 48px;
        display: block;
    }
    span {
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        margin-top: 4px;
    }
}

.btns {
    .bottom(0px);
    background-color: #181818;
    height: 56px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 21;
    .flex();

    .btn {
        .flex();
        width: 33%;
        justify-content: center;
        img {
            width: 18px;
            height: 18px;
            display: block;
        }
        span {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-left: 3px;
        }
    }
}

.mySwiper {
    padding-top: 7.72vh;
}
/deep/.swiper-wrapper {
    height: calc(var(--app-height) - 7.72vh);
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    right: 0;
    height: 44px;

    .flex();
    justify-content: space-between;
    .top-btn {
        .flex();
        padding: 2px 20px;
        border-radius: 100px;
        img {
            width: 18px;
            height: 18px;
        }

        span {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-left: 4px;
        }

        &.submit {
            background-color: fade(#fff, 30%);
            margin-right: 16px;
        }
    }

    .top-right {
        .flex();
    }
}

.windowHorizontal {
    padding-top: 7.72vw;
    .user {
        width: 298px;
        height: 120px;
        display: flex;
        flex-direction: row;
        position: relative;
        padding: 6.3vh 60px;

        .sub-box {
            position: absolute;
            bottom: 60px;
            left: 190px;
            .sub {
                padding-top: 0;
            }
        }
        .name {
            margin-left: 10px;
            padding-top: 0;
        }
    }
    .imgs {
        box-sizing: border-box;
        height: calc(12.6vh + 120px);
        flex-direction: row;
        .icon {
            padding: 6.3vh;
            width: 25vw;
        }
    }

    /deep/.swiper-wrapper {
        height: calc(var(--app-height) - 7.72vw);
    }

    .bottom {
        bottom: 60px;
        left: 60px;
    }
}

.horizontal {
    padding-top: 0;
    padding-right: 7.72vh;
    .parallax-bg {
        width: 100%;
        height: 600%;
    }
    .parallax-bg-img {
        width: 600vh;
        height: 100vw;
        transform: rotate(90deg) translateX(-100vw);
        transform-origin: left bottom;
    }

    .imgs {
        width: calc(12.6vw + 120px);
        height: var(--app-height);
        box-sizing: border-box;
        .icon {
            padding: 6.3vw;
        }
    }

    .user {
        padding: 60px 6.3vw 0 30px;
        height: 298px;
        width: 120px;
        .van-image {
            transform: rotate(90deg);
        }
        .name {
            width: 168px;
            padding-top: 0;
            transform: rotate(90deg) translate(-50px, -50px);
            transform-origin: left bottom;
        }
        .sub {
            width: 168px;
            padding-top: 0;
            transform-origin: left bottom;
            transform: rotate(90deg) translate(-65px, 0px);
        }
    }

    .imgs {
        .icon {
            height: 25vh;
            width: auto;
        }
        .van-image {
            transform: rotate(90deg);
        }
    }

    /deep/.swiper-wrapper {
        height: var(--app-height);
        align-items: flex-end;
    }

    .bottom {
        top: 60px;
        left: 49px;
        .flex-col();
        .btn {
            transform: rotate(90deg) translateX(-10px);
        }
        .btn + .btn {
            margin-left: 0;
            margin-top: 40px;
        }
    }

    .top {
        // transform: rotate(90deg) translate(calc(100vh - 100vw), 3px);
        // width: 100vh;
        // transform-origin: bottom;
        top: 0;
        bottom: 0;
        left: auto;
        height: var(--app-height);
        width: 40px;
        flex-direction: column;
        right: 20px;
        .top-btn {
            height: auto;
            white-space: nowrap;

            &.left {
                transform: rotate(90deg) translateX(50%);
            }
        }

        .top-right {
            transform: rotate(90deg) translateX(-50%);
        }
    }
    // .user {
    //     padding: calc(21vw - 110px) 100px 0 30px;
    // }
    // /deep/.swiper-wrapper {
    //     height: calc(100vw - 20vw);
    // }
    // &.mySwiper {
    //     padding-top: 20vw;
    // }
    // .imgs {
    //     height: 50vw;
    // }
}
</style>
