<template>
    <router-link
        :to="{
            path: '/hall',
            query: {
                id: info.id
            }
        }"
        class="showInfo"
    >
        <van-image radius="6" :src="info.showroomBg" width="100%" height="140" fit="cover" />
        <div class="collecions">
            <div class="users">
                <van-image :src="info.pic" width="120" height="120" radius="8" fit="cover" />
                <div class="users-text">
                    <div class="name">
                        <div>{{ info.nickname }}</div>
                        <div>的展馆</div>
                    </div>
                    <div class="sub">
                        <span>{{ info.introduction }}</span>
                    </div>
                </div>
            </div>
            <van-image
                v-for="(item, index) in collections"
                :src="item.pic"
                width="120"
                height="120"
                fit="coevr"
                radius="8"
                :key="index"
            />
        </div>
        <img src="../../assets/png-zhantai1.png" class="bg-img" alt="" />
        <div class="text">
            <div class="text1">{{ info.introduction || '展馆未使用' }}</div>
            <div class="text2">{{ info.nickname }}</div>
        </div>
        <div class="btns" @click.prevent="">
            <div class="btn">
                <img src="../../assets/icon-liulanliang.png" alt="" />
                <span>{{ 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>
    </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 {};
            }
        }
    },
    computed: {
        collections() {
            return this.info.collections || [];
        }
    },
    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;
    }
}

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

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

    .text2 {
        font-size: 12px;
        color: #939599;
        line-height: 12px;
    }
}

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

.collecions {
    position: absolute;
    top: 40px;
    left: 16px;
    right: 16px;
    z-index: 3;
    width: calc(200% - 64px);
    .flex();
    overflow: hidden;
    transform: scale(0.5);
    transform-origin: 0 0 0;
    .van-image {
        flex-shrink: 0;
    }

    .users {
        padding-left: 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;
        }
        .sub {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 17px;
        }
    }

    & > .van-image {
        margin-right: 60px;
    }
}
</style>
