<template>
    <router-link
        :to="{
            path: '/' + $route.params.companyId + '/hall',
            query: {
                id: info.id
            }
        }"
        class="showInfo"
        :class="{ listShow: list }"
    >
        <div class="bg">
            <van-image :src="info.headBg" width="131" height="140" fit="cover" />
            <van-image :src="info.showroomBg" width="343" height="140" fit="cover" />
        </div>
        <!-- <div class="bg" v-else :style="{ backgroundImage: `url(${info.showroomBg})` }"></div> -->
        <!-- <van-image radius="6" :src="info.showroomBg" width="100%" height="140" fit="cover" /> -->
        <div class="collecions">
            <div class="users">
                <van-image
                    :src="info.pic || require('../../assets/icon-tianjiacangping.png')"
                    width="112"
                    height="112"
                    radius="8"
                    fit="cover"
                />
                <div class="users-text">
                    <div class="name" v-if="info.name">
                        <div>{{ info.name }}</div>
                    </div>
                    <div class="name" v-else>
                        <div>{{ info.nickname }}</div>
                        <div>的展馆</div>
                    </div>
                    <div class="sub">
                        <span class="van-multi-ellipsis--l2">{{ info.introduction }}</span>
                    </div>
                </div>
            </div>
            <van-image
                v-for="(item, index) in showCollections"
                :src="item.pic"
                width="112"
                height="112"
                fit="coevr"
                radius="8"
                :key="index"
            />
        </div>
        <img v-if="!list" src="../../assets/png-zhantai1.png" class="bg-img" alt="" />
        <div class="content">
            <div class="text">
                <div class="text1 van-ellipsis">{{ info.introduction || '展馆未设置' }}</div>
                <div class="text2">
                    <van-image
                        width="18"
                        height="18"
                        radius="18"
                        :src="info.avatar || require('@assets/img_default_photo.png')"
                        fit="contain"
                    />
                    <span>{{ info.nickname }}</span>
                </div>
            </div>
            <div class="btns" @click.prevent="">
                <div class="btn">
                    <img src="../../assets/icon-liulanliang.png" alt="" />
                    <span>{{ info.type === 'COMPANY_BOX' ? info.num : collections.length }}</span>
                </div>
                <!-- <div class="btn">
                    <img src="../../assets/icon-fenxiang2.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-dianzan2.png" alt="" />
                    <span>{{ info.likes }}</span>
                </div>
            </div>
        </div>

        <div class="hot" v-if="list">
            <img src="../../assets/info_icon_relizhi.png" alt="" />
            <span>热力值 {{ info.heats || 0 }}</span>
        </div>

        <div class="manghe" v-if="info.type === 'COMPANY_BOX'">
            <img src="@assets/png-manghe.png" alt="" />
            <span>盲盒展厅</span>
        </div>
    </router-link>
</template>

<script>
import asset from '../../mixins/asset';
import product from '../../mixins/product';
import room from '../../mixins/room';

export default {
    mixins: [asset, product, room],
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        list: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        collections() {
            return this.info.collections || [];
        },
        showCollections() {
            let list = [...this.collections];
            return list.slice(0, 4);
        }
    },
    methods: {
        getDetail(info) {
            this.$emit('update:info', info);
        }
    }
};
</script>

<style lang="less" scoped>
.showInfo {
    padding: 10px 16px;
    position: relative;
    display: block;

    & > div {
        z-index: 1;
    }

    &.listShow {
        padding: 0 0;
        overflow: hidden;
        // .bg {
        //     background-size: 100% auto;
        // }
        .collecions {
            // padding: 0 25vw;
            box-sizing: border-box;
            top: 35px;
            left: 30px;
            width: calc(300% - 126px);
        }
        .content {
            padding: 0 16px 10px;
        }
    }
}

.bg {
    height: 140px;
    // background-size: auto 140px, auto 140px;
    // background-repeat: no-repeat, repeat-x;
    // background-position: 0 0, 133px 0;
    z-index: 1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    .flex();
    .van-image {
        flex-shrink: 0;
    }
}

.bg-img {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    z-index: 0;
}

.text {
    margin-top: 12px;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 17px;
        margin-bottom: 3px;
    }

    .text2 {
        font-size: 12px;
        color: @text3;
        line-height: 12px;
        margin-top: 2px;
        .flex();
        span {
            margin-left: 4px;
        }
    }
}

.btns {
    .flex();
    .btn {
        .flex();
        img {
            width: 12px;
            height: 12px;
            display: block;
            margin-right: 3px;
        }
        span {
            font-size: 12px;
            color: @text3;
            line-height: 17px;
        }
    }
    .btn + .btn {
        margin-left: 16px;
    }
    position: absolute;
    right: 16px;
    bottom: 5px;
}

.collecions {
    position: absolute;
    box-sizing: border-box;
    top: 45px;
    left: 35px;
    right: 16px;
    z-index: 3;
    width: calc(260% - 168px);
    .flex();
    overflow: hidden;
    transform: scale(0.4);
    transform-origin: 0 0 0;
    .van-image {
        flex-shrink: 0;
    }

    .users {
        padding-left: 0px;
        padding-right: 60px;
        .flex();
        .users-text {
            .flex-col();
            align-self: stretch;
            width: 180px;
            padding-left: 10px;
        }
        .name {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
            flex-grow: 1;
            div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .sub {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 17px;
        }
    }

    & > .van-image + .van-image {
        margin-left: 60px;
    }
}

.hot {
    .flex();
    background-color: #fff3f8;
    border-radius: 12px 2px 12px 2px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 10px;
    z-index: 2;
    img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }
    span {
        font-weight: bold;
        font-size: 12px;
        color: #ffffff;
        line-height: 22px;
        background: linear-gradient(90deg, #ff2400 0%, #ff6800 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.manghe {
    position: absolute;
    z-index: 4;
    top: 116px;
    .flex();
    justify-content: center;
    left: 0;
    right: 0;
    img {
        width: 24px;
        height: 24px;
    }
    span {
        width: 50px;
        height: 24px;
        font-size: 12px;
        font-weight: bold;
        color: #c5e9ff;
        line-height: 24px;
        background: linear-gradient(118deg, #9aecff 0%, #f6f7ff 48%, #d1d9ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 8px;
    }

    background: rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 12px 12px;
    border: 1px solid #9df7ff;
    backdrop-filter: blur(20px);
}
</style>
