<template>
    <div class="mySwiper">
        <div class="swiper-content" :class="{ windowHorizontal: !windowVertical, horizontal: !isVertical }">
            <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>{{ blindBoxsNums || assets.length }}</span>
                    </div>
                    <div
                        class="top-btn submit"
                        @click="like(info)"
                        v-if="(!isVertical || !windowVertical) && info.publish"
                    >
                        <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 @click="share" class="top-btn submit" v-if="(!isVertical || !windowVertical) && info.publish">
                        <img src="../../assets/icon-fenxiang1.png" alt="" />
                        <span>分享</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 class="btn" @click="isVertical = !isVertical">
                    <img src="../../assets/icon-qiehuanhengping.png" alt="" />
                    <span>切换{{ isVertical || windowVertical ? '横屏' : '竖屏' }}</span>
                </div> -->
            </div>
            <div class="btns" v-if="isVertical && windowVertical && info.publish">
                <div class="btn">
                    <img src="../../assets/icon-tupian.png" alt="" />
                    <span>{{ blindBoxsNums || assets.length }}</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 class="btn" @click="share">
                    <img src="../../assets/icon-fenxiang1.png" alt="" />
                    <span>分享</span>
                </div>
            </div>
            <post ref="post" :info="info"></post>

            <div class="user-bg">
                <!-- <div
                    class="user-bg-img"
                    :style="{
                        'background-image': getBg()
                    }"
                ></div> -->
                <img class="user-bg-img" v-if="!isVertical || !windowVertical" :src="getBg()" alt="" />
                <div class="user">
                    <div class="icon">
                        <van-image
                            :src="info.pic || require('../../assets/icon-tianjiacangping.png')"
                            :width="picWidth"
                            :height="picWidth"
                            fit="cover"
                            radius="8"
                            @click="changeLogo"
                        />
                        <van-uploader
                            ref="upload"
                            v-if="isMine"
                            class="avatar"
                            :after-read="afterRead"
                            result-type="file"
                        />
                    </div>
                    <div class="user-content">
                        <div class="name" @click="goName">
                            <div v-if="info.name" class="nameOnly">{{ info.name }}</div>
                            <template v-else>
                                <div>{{ info.nickname }}</div>
                                <div>的展馆</div>
                            </template>
                        </div>
                    </div>
                    <div class="sub-box">
                        <div class="sub" @click="goEdit">
                            <span class="van-multi-ellipsis--l3">{{ info.introduction || '介绍一下展馆主题吧' }}</span>
                            <img src="../../assets/icon-jieshaozhanguan.png" v-if="isMine" alt="" />
                            <span v-else-if="showMore" @click.stop="showIntro = true" class="more">展开</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="img-bg">
                <div class="bg" :style="{ 'background-image': `url(${info.showroomBg})`, ...getBgStyle() }"></div>
                <div class="imgs" v-if="assets.length === 0 && isMine && info.type !== 'COMPANY_BOX'">
                    <div class="icon">
                        <van-image
                            :src="require('../../assets/icon-tianjiacangping1.png')"
                            @click="addCollections"
                            :width="picWidth"
                            :height="picWidth"
                            fit="coevr"
                            radius="8"
                        />
                    </div>
                </div>
                <template v-if="info.type === 'COMPANY_BOX'">
                    <div class="imgs blindContent" v-for="(item, index) in blindList" :key="index" :style="getStyle()">
                        <div class="icon blind" @click="goBlind(blindCollectionInfo)">
                            <div class="img-box" v-if="index === 0">
                                <van-image
                                    :src="changeImgs(blindCollectionInfo.pic)"
                                    :width="picWidth"
                                    :height="picWidth"
                                    fit="coevr"
                                    radius="8"
                                />
                                <div class="icon-status status2">
                                    <span v-if="isSoldOut">展示({{ blindBoxsNums }}份)</span>
                                    <template v-else>
                                        <span>{{ blindCollectionInfo.salable ? '售价:' : '仅展示' }}</span>
                                        <span v-if="blindCollectionInfo.salable">¥{{ blindCollectionInfo.price }}</span>
                                    </template>
                                </div>
                                <div class="boxs-text" v-if="isVertical && windowVertical && !isSoldOut">
                                    <span>盲盒内含：</span>
                                    <span>{{ contentNum }}/{{ blindBoxsNums }}</span>
                                </div>
                            </div>

                            <div class="boxs" :class="{ isFirst: index === 0 }">
                                <div class="boxs-text" v-if="(!isVertical || !windowVertical) && !isSoldOut">
                                    <span>盲盒内含：</span>
                                    <span>{{ contentNum }}/{{ blindBoxsNums }}</span>
                                </div>
                                <div
                                    class="blind-imgs"
                                    :class="{ blindImgs2: !isSoldOut }"
                                    :style="getBlindStyle(index, item.imgs.length)"
                                >
                                    <div
                                        class="blind-img"
                                        v-for="img in item.imgs"
                                        :key="img.id"
                                        @click.stop="goBlind(img)"
                                    >
                                        <van-image
                                            :src="getImg(changeImgs(img.pic))"
                                            :width="blindWidth"
                                            :height="blindWidth"
                                            fit="cover"
                                            radius="4"
                                        />

                                        <div v-if="isSoldOut" class="blind-price" :class="{ status1: !img.salable }">
                                            {{ img.salable ? `¥${img.price}` : '仅展示' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="imgs" v-for="(item, index) in showList" :key="index" :style="getStyle(item.length)">
                        <div class="icon" v-for="(img, imgIndex) in item" :key="imgIndex" @click="goCollection(img)">
                            <div class="img-box">
                                <van-image :src="img.pic" :width="picWidth" :height="picWidth" fit="coevr" radius="8" />
                                <div class="icon-status" :class="{ status1: img.status === '仅展示' }">
                                    <span>{{ img.status }}</span>
                                    <span v-if="img.status === '寄售中'">¥{{ img.price }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <van-action-sheet
            v-model:show="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="actionSelect"
        />
        <van-popup v-model:show="showIntro" closeable>
            <div class="intro">
                <div class="text1">展馆主题</div>
                <div class="text2">{{ info.introduction }}</div>
            </div>
        </van-popup>
        <van-popup
            class="collection-popup"
            :class="{ windowHorizontalPopup: !windowVertical || !isVertical, isHorizontalPopup: !isVertical }"
            v-model:show="collectionShow"
            @click="collectionShow = false"
        >
            <div class="collection-box">
                <div class="collection" @click.stop="goCollectionDetail(collectionInfo.id)">
                    <van-image
                        :width="!windowVertical || !isVertical ? 154 : 198"
                        :height="!windowVertical || !isVertical ? 154 : 198"
                        radius="8"
                        :src="getImg(changeImgs(collectionInfo.pic))"
                        fit="cover"
                    />
                    <div class="collection-info">
                        <img
                            @click.stop="collectionShow = false"
                            src="../../assets/close2.png"
                            v-if="!windowVertical || !isVertical"
                            class="collection-close"
                            alt=""
                        />
                        <div class="name van-multi-ellipsis--l2">
                            {{ collectionInfo.name }}
                        </div>
                        <div class="code" v-if="collectionInfo.number">
                            编号&nbsp;&nbsp; {{ collectionInfo.number }}
                        </div>
                        <div class="flex1"></div>
                        <div class="collection-user">
                            <div class="collection-user-item">
                                <div class="text1">铸造者</div>
                                <div class="text2">
                                    <van-image
                                        width="18"
                                        height="18"
                                        radius="18"
                                        :src="collectionInfo.minterAvatar"
                                        fit="cover"
                                    />
                                    <span>{{ collectionInfo.minter }}</span>
                                </div>
                            </div>
                            <div class="collection-user-item">
                                <div class="text1">持有者</div>
                                <div class="text2">
                                    <van-image
                                        width="18"
                                        height="18"
                                        radius="18"
                                        :src="collectionInfo.ownerAvatar"
                                        fit="cover"
                                    />
                                    <span>{{ collectionInfo.owner }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="collection-price">
                            <template v-if="collectionInfo.salable">
                                <img src="../../assets/icon_jiagebai1.png" alt="" />
                                <span>{{ collectionInfo.price }}</span>
                            </template>
                            <div class="status" v-else>仅展示</div>
                            <div class="btn">查看详情</div>
                        </div>
                    </div>
                </div>

                <img
                    v-if="windowVertical && isVertical"
                    src="../../assets/icon_fenxiang_close.png"
                    alt=""
                    class="close"
                />
            </div>
        </van-popup>
    </div>
</template>

<script>
// import required modules
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', 'appHeight'],
    components: {
        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, height };
    },
    mixins: [product, room],
    data() {
        return {
            isVertical: true,
            roomId: 0,
            info: {},
            assets: [],
            distances: [0, 0, 0, 0],
            swiperRef: null,
            inApp,
            isEdit: false,
            show: false,
            showIntro: false,
            actions: [{ name: '藏品室上传' }],
            collectionShow: false,
            collectionInfo: {},
            blindBoxs: [],
            blindBoxsNums: 0,
            blindBoxItems: [],
            blindCollectionInfo: {}
        };
    },
    computed: {
        contentNum() {
            if (this.groupBlindNum[0] < this.blindBoxsNums) {
                return this.groupBlindNum[0];
            } else {
                return this.blindBoxsNums;
            }
        },
        showList() {
            let status = ['仅展示'];
            let assets = [...this.assets].sort((a, b) => {
                return status.indexOf(a.status) - status.indexOf(b.status);
            });
            let list = [];
            for (let i = 0; i <= Math.floor(assets.length / this.groupNum); i++) {
                list.push(assets.slice(i * this.groupNum, (i + 1) * this.groupNum));
            }
            return list.filter(item => {
                return item.length > 0;
            });
        },
        groupNum() {
            if (!this.isVertical) {
                return 4;
            } else if (!this.windowVertical) {
                return 4;
            } else {
                return 18;
            }
        },
        isMine() {
            return this.isLogin && this.$store.state.userInfo.id === this.info.userId;
        },
        bgParallax() {
            return (
                '-' +
                ((this.isVertical ? this.width : this.height) * ((this.showList.length || 1) - 1) +
                    (this.isVertical && this.windowVertical ? 280 : 418))
            );
        },
        picWidth() {
            if (!this.isVertical) {
                return '35vw';
            } else if (!this.windowVertical) {
                return this.accMul(0.35, this.pageHeight);
            } else {
                return this.accMul(0.15, this.pageHeight);
            }
        },
        blindWidth() {
            if (!this.isVertical) {
                return '11vw';
            } else if (!this.windowVertical) {
                return this.accMul(0.11, this.pageHeight);
            } else {
                return this.accMul(0.1, this.pageHeight);
            }
        },
        showMore() {
            if (
                this.isVertical &&
                this.windowVertical &&
                this.info.introduction &&
                this.info.introduction.length > 27
            ) {
                return true;
            } else if (
                (!this.isVertical || !this.windowVertical) &&
                this.info.introduction &&
                this.info.introduction.length > 39
            ) {
                return true;
            }
            return false;
        },
        isBlind() {
            return this.info.type === 'COMPANY_BOX';
        },
        isSoldOut() {
            if (this.isBlind) {
                return (
                    this.blindCollectionInfo &&
                    !this.blindCollectionInfo.noSoldOut &&
                    this.blindCollectionInfo.salable &&
                    this.blindCollectionInfo.source === 'OFFICIAL'
                );
            }
            return false;
        },
        groupBlindNum() {
            if (!this.isVertical) {
                return [18, 22];
            } else if (!this.windowVertical) {
                return [20, 24];
            } else {
                return [36, 42];
            }
        },
        blindList() {
            let blindBoxs = [...this.blindBoxs];
            let list = [];
            list.push(blindBoxs.slice(0, 1 * this.groupBlindNum[0]));
            let num = blindBoxs.length - this.groupBlindNum[0];
            console.log(num);
            if (num > 0 && this.isSoldOut) {
                for (let i = 1; i <= Math.ceil(num / this.groupBlindNum[1]); i++) {
                    list.push(
                        blindBoxs.slice(
                            this.groupBlindNum[0] + (i - 1) * this.groupBlindNum[1],
                            this.groupBlindNum[0] + i * this.groupBlindNum[1]
                        )
                    );
                }
            }

            let _list = list.filter(item => {
                return item.length > 0;
            });
            console.log(_list);

            if (_list.length === 0) {
                return [{ imgs: [], start: 0, end: 0 }];
            } else {
                let _returnList = [];
                _list.map((item, index) => {
                    let start = index === 0 ? 1 : _returnList[index - 1].end + 1;
                    _returnList.push({
                        imgs: item,
                        start: start,
                        end: start + (item.length - 1)
                    });
                });
                return _returnList;
            }
        },
        search() {
            if (this.blindCollectionInfo.prefixName) {
                return this.blindCollectionInfo.prefixName;
            }
            if (this.isSoldOut) {
                let name = this.blindBoxItems.length > 0 ? this.blindBoxItems[0].name.split('#')[0] : '';
                name = name.replace(/：/, '·');
                name = name.replace(/:/, '·');
                return name.split('·')[0];
            }
            return this.blindCollectionInfo.name;
        },
        pageHeight() {
            let height = this.appHeight.replace(/px/, '');
            return Number(height);
        }
    },
    mounted() {
        if (window.cordova && StatusBar && StatusBar.isVisible) {
            StatusBar.styleLightContent();
        }
        if (this.$route.query.id) {
            this.roomId = this.$route.query.id;
            this.getDetail();
        }
        this.emitter.on('setName', e => {
            this.info.name = e;
            this.isEdit = true;
        });
        this.emitter.on('setIntroduction', e => {
            this.info.introduction = e;
            this.isEdit = true;
        });
        this.emitter.on('setPic', e => {
            this.info.pic = e;
            this.isEdit = true;
        });
        this.emitter.on('setAssets', assets => {
            this.assets = assets;
            this.isEdit = true;
        });
        if (this.isLogin) {
            this.$http.get(`/showroom/${this.roomId}/view`);
        }
    },
    beforeRouteEnter(to, from) {
        fromRoute = from;
    },
    methods: {
        changeLogo() {
            if (this.isMine) {
                this.show = true;
            }
        },
        getBlindStyle(index = 0, num = 0) {
            if (!this.isVertical) {
                return {
                    width: 32 + 'vw',
                    height: Math.ceil(num / 2) * 16 + 'vw'
                };
            } else if (!this.windowVertical) {
                return {
                    height: this.accMul(0.32, this.pageHeight) + 'px'
                };
            } else {
                return {
                    height: this.accMul(0.35, this.pageHeight) + 'px'
                };
            }
        },
        getStyle(num = 1) {
            if (this.info.type === 'COMPANY_BOX') {
                if (!this.isVertical) {
                    return {
                        height: '196vw',
                        paddingBottom: '26.5vw'
                    };
                } else if (!this.windowVertical) {
                    return {
                        width: this.accMul(2.1, this.pageHeight) + 'px',
                        paddingRight: this.accMul(0.203, this.pageHeight) + 'px'
                    };
                } else {
                    return {
                        width: this.accMul(2, this.pageHeight) + 'px',
                        paddingRight: this.accMul(0.205, this.pageHeight) + 'px'
                    };
                }
            } else {
                if (!this.isVertical) {
                    return {
                        height: num * 49 + 'vw',
                        paddingBottom: num == 4 ? '26.5vw' : '10vw'
                    };
                } else if (!this.windowVertical) {
                    return {
                        width: this.accMul((num * 49) / 100, this.pageHeight) + 'px',
                        paddingRight:
                            num == 4
                                ? this.accMul(0.265, this.pageHeight) + 'px'
                                : this.accMul(0.1, this.pageHeight) + 'px'
                    };
                } else {
                    return {
                        width: this.accMul((Math.round(num / 2) * 22) / 100, this.pageHeight) + 'px',
                        paddingRight:
                            Math.round(num / 2) == 9
                                ? this.accMul(0.23, this.pageHeight) + 'px'
                                : this.accMul(0.1, this.pageHeight) + 'px'
                    };
                }
            }
        },
        getBgStyle() {
            if (!this.isVertical) {
                let blindList = [];
                if (this.info.type === 'COMPANY_BOX') {
                    blindList = [...this.blindList];
                } else {
                    blindList = [...this.showList];
                }
                let num = 0;
                blindList.forEach(item => {
                    console.log(item);
                    let style = {};
                    if (this.info.type === 'COMPANY_BOX') {
                        style = { ...this.getStyle() };
                    } else {
                        style = { ...this.getStyle(item.length) };
                    }
                    console.log(style);
                    let _num = this.accAdd(
                        Number(style.height.split('vw')[0]),
                        Number(style.paddingBottom.split('vw')[0])
                    );
                    _num += 23;
                    num += _num;
                });
                console.log(num);
                return {
                    width: num + 'vw'
                };
            } else {
                return {};
            }
        },
        getBg() {
            if (!this.isVertical || !this.windowVertical) {
                return this.info.headBg;
            } else {
                return '';
            }
        },
        getImgWidth(num = 1) {
            if (!this.isVertical) {
                return num * 49 + 'vw';
            } else if (!this.windowVertical) {
                return this.accMul((num * 49) / 100, this.pageHeight) + 'px';
            } else {
                return this.accMul((Math.round(num / 2) * 22) / 100, this.pageHeight) + 'px';
            }
        },
        getRight(num = 1) {
            if (!this.isVertical) {
                return '36vw';
            } else if (!this.windowVertical) {
                return num == 4 ? this.accMul(0.265, this.pageHeight) : this.accMul(0.1, this.pageHeight);
            } else {
                return Math.round(num / 2) == 9
                    ? this.accMul(0.23, this.pageHeight)
                    : this.accMul(0.1, this.pageHeight);
            }
        },
        share() {
            this.getDetail().then(res => {
                this.$refs.post.init();
            });
        },
        getDetail() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.$http.get('/showroom/get/' + this.roomId).then(res => {
                this.$toast.clear();
                this.info = { name: '', ...res };

                // this.$nextTick(() => {
                //     if (!this.isMine && res.type === 'COMPANY' && res.status !== 'SUCCESS') {
                //         this.$dialog
                //             .alert({
                //                 title: '提示',
                //                 message: '当前展厅正在审核中'
                //             })
                //             .then(() => {
                //                 this.backPage();
                //             });
                //     }
                // });
                this.assets =
                    res.collections.map(item => {
                        return {
                            ...item,
                            id: item.collectionId
                        };
                    }) || [];
                // this.assets = [...res.collections, ...res.collections, ...res.collections, ...res.collections];
                if (res.type === 'COMPANY_BOX') {
                    this.getBlindInfo();
                }
            });
        },
        getBlindInfo() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            if (this.assets.length > 0) {
                this.goCollection(this.assets[0], false)
                    .then(() => {
                        return this.$http.post(
                            '/blindBoxItem/all',
                            {
                                query: {
                                    blindBoxId: this.assets[0].id
                                },
                                size: 36
                            },
                            { body: 'json' }
                        );
                    })
                    .then(res => {
                        this.blindBoxItems = res.content;
                        this.blindBoxsNums = res.totalElements;

                        if (this.isSoldOut) {
                            return this.$http.post(
                                '/collection/all',
                                {
                                    query: {
                                        source: 'TRANSFER'
                                    },
                                    search: this.search,
                                    sort: 'salable,desc;price,asc',
                                    size: 9999
                                },
                                { body: 'json' }
                            );
                        } else {
                            return Promise.resolve();
                        }
                    })
                    .then(res => {
                        this.$toast.clear();
                        console.log(res);
                        if (this.isSoldOut) {
                            this.blindBoxs = res.content;
                            this.blindBoxsNums = res.totalElements;
                        } else {
                            this.blindBoxs = [...this.blindBoxItems];
                        }
                    })
                    .catch(e => {
                        this.$toast.clear();
                    });
            } else {
                this.$toast.clear();
            }
        },
        back() {
            if (this.isMine && this.isEdit) {
                let _this = this;
                this.$dialog.confirm({ title: '提示', message: '确定要退出展馆吗？' }).then(() => {
                    this.isEdit = false;
                    if (_this.isMine) {
                        _this.backPage();
                    } else {
                        _this.$router.push('/' + this.$route.params.companyId + '/home');
                    }
                });
            } else {
                this.backPage();
            }
        },
        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('/' + this.$route.params.companyId + '/home');
            } else {
                this.$router.back();
            }
        },
        afterRead(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 'hall', 500).then(img => {
                this.$toast.clear();
                this.emitter.emit('setPic', img);
            });
        },
        addCollections() {
            this.$router.push(
                '/' +
                    this.$route.params.companyId +
                    '/productAdd?ids=' +
                    this.assets
                        .map(item => {
                            return item.id;
                        })
                        .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.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/showroom/update', form, { body: 'json' })
                .then(res => {
                    this.isEdit = false;
                    this.$toast.success('保存成功');
                    setTimeout(() => {
                        this.getDetail().then(res => {
                            this.emitter.emit('updateList', res);
                        });
                        this.backPage();
                    }, 1000);
                })
                .catch(e => {
                    this.$toast(e.error);
                });
        },
        goEdit() {
            if (this.isMine) {
                this.$router.push(
                    '/' +
                        this.$route.params.companyId +
                        '/hallEdit?message=' +
                        encodeURIComponent(this.info.introduction || '')
                );
            }
        },
        goName() {
            if (this.isMine) {
                this.$router.push(
                    '/' +
                        this.$route.params.companyId +
                        '/hallEdit?message=' +
                        encodeURIComponent(this.info.name || '') +
                        '&type=name'
                );
            }
        },
        goCollection(info, show = true) {
            return this.$http.get('/collection/get/' + info.collectionId).then(res => {
                if (!show) {
                    this.blindCollectionInfo = res;
                } else {
                    this.collectionInfo = res;
                    this.collectionShow = show;
                }
            });
            // if (!this.isMine) {
            //     this.$router.push('/productDetail/' + info.collectionId);
            // }
        },
        goCollectionDetail(id) {
            this.$router.push('/' + this.$route.params.companyId + '/productDetail/' + id);
        },
        actionSelect(action) {
            console.log(action);
            if (action.name === '本地上传') {
                this.$refs.upload.chooseFile();
            } else {
                this.$router.push('/' + this.$route.params.companyId + '/productChoose');
            }
        },
        goBlind(info) {
            if (!this.isSoldOut) {
                this.collectionInfo = { ...this.blindCollectionInfo };
                this.collectionShow = true;
            } else {
                this.collectionInfo = { ...info };
                this.collectionShow = true;
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/store' && this.isEdit) {
            next(false);
            setTimeout(() => {
                this.back();
            }, 100);
        } else {
            if (!to.meta.isHall) {
                this.setKeeps(['Hall'], false);
            } else {
                this.setKeeps(['Hall']);
            }
            next();
        }
    }
};
</script>

<style lang="less" scoped>
.mySwiper {
    background-color: #1c1c1c;
    overflow: auto;
    width: 100vw;
    height: var(--app-height);
}
.swiper-content {
    position: relative;
    .flex();
    align-items: stretch;
    & > div {
        flex-shrink: 0;
    }
    height: var(--app-height);
}
.user-bg {
    background-size: 100% 100%;
    z-index: 1;
    position: relative;
    .user-bg-img {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
}
.user {
    width: 130px;
    padding: calc(0.23 * var(--app-height)) 0 0 30px;
    position: absolute;
    left: 0;
    background-image: none;
    .icon {
        position: relative;
        .van-image {
            transition: transform ease-in-out 0.3s;
            position: relative;
            z-index: 1;
        }
        .avatar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            z-index: 0;
        }
    }

    .name {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        padding-top: 6px;
        position: relative;
        & > div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        img {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    .sub {
        padding-top: 20px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 17px;
        position: relative;
        word-break: break-all;

        .flex();
        align-items: flex-start;
        img {
            width: 16px;
            height: 16px;
            display: block;
            margin-left: 6px;
            position: absolute;
            bottom: -25px;
            left: 0px;
        }
        .more {
            position: absolute;
            bottom: -25px;
            left: 0px;
            text-decoration: underline;
        }
    }
    .user-content {
        flex-grow: 1;
        overflow: hidden;
    }
}

.mySwiper {
    width: 100%;
    height: 100%;
    background: #000;
}
.img-bg {
    .flex();
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    min-width: 100vw;

    .bg {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        background-size: auto 100%;
    }
}
.imgs {
    // box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // align-items: center;
    flex-wrap: wrap;
    // padding: 0 10vw;
    // width: 259vh;
    height: calc(var(--app-height) * 0.45);
    padding: 0 calc(var(--app-height) * 0.1) 0 calc(var(--app-height) * 0.23);
    margin-top: calc(var(--app-height) * 0.185);
    min-width: calc(100vw - calc(var(--app-height) * 0.33));
    &.blindContent {
        margin-top: calc(var(--app-height) * 0.22);
    }
    .icon {
        padding: calc(var(--app-height) * 0.03) 0;

        .flex();
        justify-content: center;
        width: calc(var(--app-height) * 0.22);
        box-sizing: border-box;
        position: relative;
        &.blind {
            width: calc(var(--app-height) * 2.05);
            justify-content: flex-start;
        }
        img {
            width: 110px;
            height: 110px;
            display: block;
        }
        .van-image {
            display: block;
            position: relative;
            transition: transform ease-in-out 0.3s;
        }
        .img-box {
            position: relative;
            .boxs-text {
                padding: 10px 0;
            }
        }
        .icon-status {
            position: absolute;
            left: 0;
            top: 0;
            background: #ffffff;
            border-radius: 8px 0px 8px 0px;
            z-index: 3;
            padding: 0 8px;
            line-height: 18px;
            white-space: nowrap;
            font-size: 10px;
            font-weight: bold;
            color: #000000;
            span + span {
                margin-left: 3px;
            }

            &.status1 {
                color: @text3;
            }

            &.status2 {
                color: #3ab200;
            }
        }
    }
}

.blind {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(30px);
    padding: calc(var(--app-height) * 0.02) 0 calc(var(--app-height) * 0.02) calc(var(--app-height) * 0.02) !important;
    align-items: flex-start !important;
    .boxs {
        padding-left: calc(var(--app-height) * 0.05);
        flex-grow: 1;
        .boxs-text {
            padding-right: calc(var(--app-height) * 0.08);
        }
    }
    .boxs-text {
        font-size: 10px;
        font-weight: bold;
        color: #ffffff;
        line-height: 10px;
        .flex();
        justify-content: space-between;
        white-space: nowrap;
    }
    .blind-imgs {
        .flex();
        flex-wrap: wrap;
        overflow: hidden;
        align-items: flex-start;
        .blind-img {
            margin: 0 calc(var(--app-height) * 0.05) calc(var(--app-height) * 0.02) 0;
            position: relative;
            .blind-price {
                padding: 4px;
                font-size: 10px;
                font-weight: bold;
                color: #000000;
                line-height: 10px;
                background: #ffffff;
                border-radius: 4px 0px 4px 0px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                white-space: nowrap;

                &.status1 {
                    color: #939599;
                }
            }
        }
    }
}

.bottom {
    position: fixed;
    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: fixed;
    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;
        }
    }
}

.top {
    position: fixed;
    top: var(--safe-top);
    left: 0;
    z-index: 20;
    right: 0;
    height: 44px;
    .flex();
    justify-content: space-between;
    .top-btn {
        .flex();
        padding: 2px 10px;
        border-radius: 100px;
        min-width: 76px;
        box-sizing: border-box;
        justify-content: center;
        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 {
    .user {
        width: calc(var(--app-height) * 0.95);
        display: flex;
        flex-direction: row;
        position: relative;
        padding: calc(var(--app-height) * 0.22) 0 0 60px;
        box-sizing: border-box;
        .sub-box {
            position: absolute;
            bottom: 0px;
            left: calc(var(--app-height) * 0.35 + 70px);
            .sub {
                padding-top: 0;
            }
        }
        .name {
            margin-left: 10px;
            padding-top: 0;
            font-size: calc(var(--app-height) * 0.064);
            line-height: calc(var(--app-height) * 0.08);
            display: block;
            overflow: hidden;
            & > div {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .nameOnly {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
            }
        }
    }
    .imgs {
        height: calc(var(--app-height) * 0.42);
        flex-direction: row;
        padding: 0 calc(var(--app-height) * 0.23);
        min-width: calc(100vw - var(--app-height) * 1.28);
        margin-top: calc(var(--app-height) * 0.2);
        &.blindContent {
            padding: 0 calc(var(--app-height) * 0.15);
        }
        .icon {
            // padding: 15vh 0;
            padding: 0 0;
            width: calc(var(--app-height) * 0.49);
            padding-bottom: calc(var(--app-height) * 0.04);

            &.blind {
                width: calc(var(--app-height) * 0.88);
                padding: 12px 0 12px calc(var(--app-height) * 0.06) !important;
                align-items: center !important;
                .boxs {
                    padding-left: calc(var(--app-height) * 0.06);
                    .boxs-text {
                        padding-bottom: calc(var(--app-height) * 0.03);
                    }
                }
                width: calc(var(--app-height) * 2.1);
                .blind-imgs {
                    .blind-img {
                        margin: 0 calc(var(--app-height) * 0.05) calc(var(--app-height) * 0.05) 0;

                        .blind-price {
                            font-size: 12px;
                            color: #ffffff;
                            line-height: 10px;
                            position: absolute;
                            padding: 0;
                            top: calc(var(--app-height) * 0.11);
                            left: 0;
                            width: calc(var(--app-height) * 0.11);
                            text-align: center;
                            background-color: transparent;
                            transform: scale(0.8);
                            margin-top: 2px;
                            height: 12px;
                        }
                    }
                }
            }
        }
    }

    .user-bg {
        .user-bg-img {
            width: calc(calc(var(--app-height) * 0.95) + 0.5px);
        }
    }

    .bottom {
        bottom: 60px;
        left: 60px;
    }
    .img-bg {
        min-width: calc(100vw - var(--app-height) * 0.95);
    }

    .parallax-bg-img {
        width: 100%;
        height: 100%;
        transition: transform ease-in-out 0.3s;
        background-size: 410px 100%, 100vw 100%;
        background-repeat: no-repeat, repeat-x;
        background-position: 0 0, 410px 0;
    }
}

.horizontal {
    padding-top: 0;
    // padding-right: 32px;
    flex-direction: column;
    .user-content {
        overflow: inherit;
    }
    .parallax-bg {
        width: 100%;
        height: 600%;
    }
    .parallax-bg-img {
        width: calc(var(--app-height) * 6);
        height: 100vw;
        transform: rotate(90deg) translateX(-100vw);
        transform-origin: left bottom;
    }
    .img-bg {
        min-height: calc(var(--app-height) - 95vw);
    }
    .user-bg {
        height: 95vw;
    }
    .user-bg-img {
        height: 100vw;
        width: 95vw;
        transform: rotate(90deg) translateX(-100vw);
        transform-origin: left bottom;
    }

    .bg {
        width: 100%;
        height: 100vw;
        transform: rotate(90deg) translateX(-100vw);
        transform-origin: left bottom;
        min-width: 600vw;
    }

    // .user-bg {
    //     transform: rotate(90deg) translate(-50%, 55%);
    //     transform-origin: bottom;
    // }

    .user {
        padding: 60px calc(100vw - 35vw - 23vw) 0;
        height: 95vw;
        width: 32vw;
        position: relative;
        box-sizing: border-box;
        .van-image {
            transform: rotate(90deg);
        }
        .name {
            font-size: 6.4vw;
            line-height: 8vw;
            width: 168px;
            padding-top: 0;
            transform: rotate(90deg) translate(-13vw, -13vw);
            transform-origin: left bottom;
            min-height: 68px;
        }
        .sub {
            width: 168px;
            padding-top: 0;
            transform-origin: left bottom;
            min-height: 52px;
            transform: rotate(90deg) translate(-105px, 12px);
        }
    }
    .img-bg {
        flex-direction: column;
        align-items: flex-end;
    }
    .imgs {
        width: 44.6vw;
        padding: 23vw 0;
        margin-top: 0;
        padding-right: 18vw;
        .icon {
            height: 49vw;
            width: auto;
            &.blind {
                flex-direction: column;
                padding: 6vw 12px 0 12px !important;
                align-items: center !important;
                .boxs {
                    &.isFirst {
                        // padding-top: 5vw;
                    }
                    padding-left: 0;
                    position: relative;

                    .boxs-text {
                        position: absolute;
                        transform: rotate(90deg);
                        white-space: nowrap;
                        /* width: 100vw; */
                        transform-origin: left bottom;
                        left: 30vw;
                        top: 8vw;
                    }
                }
                height: 196vw;
                .blind-imgs {
                    justify-content: flex-end;
                    .blind-img {
                        margin: 5vw 0 0 5vw;
                        transform: translateX(-1.5vw);

                        .blind-price {
                            font-size: 12px;
                            color: #ffffff;
                            line-height: 10px;
                            position: absolute;
                            left: -2vw;
                            top: 0;
                            padding: 0;
                            text-align: center;
                            background-color: transparent;
                            transform: scale(0.8) rotate(90deg);
                            margin-right: 2px;
                            transform-origin: left;
                            width: 11vw;
                        }
                    }

                    &.blindImgs2 {
                        .blind-img {
                            margin: 5vw 5vw 0 0;
                        }
                    }
                }
            }
        }
        .van-image {
            transform: rotate(90deg);
        }
        .icon-status {
            transform: rotate(90deg);
            left: calc(35vw - 19px);
            transform-origin: bottom left;
            top: -18px;
        }
    }

    .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;
        left: auto;
        height: var(--app-height);
        width: 40px;
        flex-direction: column;
        right: 5px;
        padding-top: var(--safe-top);
        box-sizing: border-box;
        .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;
    // }
}
/deep/.van-popup {
    border-radius: 8px;
    .van-icon {
        font-size: 16px;
    }
}
.intro {
    padding: 12px 0;
    width: 260px;
    .text1 {
        font-size: 14px;
        color: #000000;
        font-weight: bold;
        line-height: 24px;
        padding: 0 16px 12px;
        border-bottom: 1px solid #f2f3f5;
    }

    .text2 {
        font-size: 12px;
        color: @text3;
        line-height: 18px;
        padding-top: 6px;
        margin-top: 10px;
        text-indent: 24px;
        background: @bg3;
        border-radius: 4px;
        padding: 10px;
        margin: 10px 16px 0;
    }
}
/deep/.collection-popup {
    background-color: transparent;
}
.collection-box {
    .flex-col();
    align-items: center;
    overflow: hidden;

    .collection {
        background: rgba(15, 15, 15, 0.8);
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        box-sizing: border-box;
        width: 222px;

        .name {
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            line-height: 20px;
            margin-top: 8px;
        }

        .code {
            font-size: 12px;
            color: #c8c9cc;
            line-height: 22px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 4px;
            display: inline-block;
            align-self: flex-start;
            padding: 0 6px;
            margin-top: 6px;
        }

        .collection-price {
            height: 24px;
            background: #3ab200;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 15px;
            .flex();
            img {
                width: 8px;
                height: 8px;
                margin-left: 4px;
                margin-top: 4px;
            }

            span {
                font-size: 20px;
                font-family: OSP-DIN, OSP;
                font-weight: normal;
                color: #ffffff;
                line-height: 14px;
                flex-grow: 1;
                margin-left: 1px;
            }

            .status {
                font-size: 12px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
                flex-grow: 1;
                padding: 0 6px;
            }

            .btn {
                font-size: 12px;
                font-weight: bold;
                color: #3ab200;
                line-height: 24px;
                padding: 0 6px;
                background-color: #fff;
                border-radius: 4px;
            }
        }
    }

    .close {
        width: 40px;
        height: 40px;
        display: block;
        margin-top: 66px;
    }

    .van-image {
        flex-shrink: 0;
    }
}

.windowHorizontalPopup {
    .collection {
        .flex();
        width: 386px;
        align-items: stretch;
        overflow: hidden;
        .collection-info {
            flex-grow: 1;
            margin-left: 12px;
            overflow: hidden;
            .flex-col();
            position: relative;

            .name {
                padding-right: 30px;
            }
        }

        .code {
            margin-top: 3px;
        }
        .name {
            margin-top: 3px;
        }
        .collection-price {
            margin-top: 10px;
        }
    }
    .collection-close {
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 24px;
    }
}
/deep/.isHorizontalPopup {
    overflow: initial;
    .collection-box {
        transform: rotate(90deg);
    }
}

.collection-user {
    .flex();
    margin-top: 10px;
    .collection-user-item {
        flex-grow: 1;
        overflow: hidden;
        .text1 {
            font-size: 12px;
            color: #c8c9cc;
            line-height: 17px;
        }

        .text2 {
            margin-top: 4px;
            .flex();
            overflow: hidden;
            span {
                font-size: 12px;
                color: #ffffff;
                line-height: 17px;
                margin-left: 2px;
                overflow: hidden; //溢出隐藏
                white-space: nowrap; //禁止换行
                text-overflow: ellipsis;
            }
        }
    }

    .collection-user-item + .collection-user-item {
        min-width: 50%;
        margin-left: 6px;
    }
}
</style>
