<template>
    <div class="room" @click="goRoom">
        <van-image
            class="room-icon"
            width="58"
            height="58"
            radius="4"
            :src="host.avatar || require('@assets/img_default_photo.png')"
        />
        <div class="host">{{ host.nickname }}</div>

        <div class="room-info">
            <div class="text1">
                <span>{{ info.name }}</span>
            </div>
            <div class="text2">
                <span>人数</span>
                <van-progress track-color="#ffffff10" :show-pivot="false" :percentage="percentage" />
                <span>{{ players.length }}/{{ info.maxPlayerNum }}</span>
            </div>
            <div class="text3">
                <span>{{ info.zone }}区</span>
                <span>创建时间 {{ createdAt }}</span>
            </div>
        </div>

        <div class="ticket">{{ getLabelName(info.requireTicket, requireTicketOptions, 'saishi') }}</div>
        <div class="status status2" v-if="info.status === 'WAITING' && players.length === info.maxPlayerNum">
            匹配成功
        </div>

        <div class="status" v-else :class="{ status1: info.status === 'WAITING', status2: info.status === 'GAMING' }">
            {{ getLabelName(info.status, statusOptions) }}
        </div>
    </div>
</template>
<script>
import room from '../mixins/room.js';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    mixins: [room],
    computed: {
        host() {
            return this.info.host || {};
        },
        players() {
            return this.info.players || [];
        },
        percentage() {
            if (this.info.maxPlayerNum) {
                return Math.ceil((this.players.length * 100) / this.info.maxPlayerNum);
            } else {
                return 0;
            }
        },
        createdAt() {
            return this.dayjs(this.info.createdAt).format('MM-DD HH:mm');
        }
    },
    methods: {
        goRoom() {
            this.$router.push({
                path: '/room',
                query: {
                    id: this.info.id
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.van-progress__portion {
    background: linear-gradient(316deg, @prim2 0%, @prim 100%);
}
.room-icon {
    flex-shrink: 0;
}
.room {
    background: @bg2;
    padding: 20px 12px 12px;
    .flex();
    box-sizing: border-box;
    position: relative;
    align-items: flex-end;
    .room-info {
        color: #fff;
        flex-grow: 1;
        margin-left: 10px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            height: 24px;
            .flex();
            .van-progress {
                flex-grow: 1;
                margin: 0 6px;

                & + span {
                    font-size: 10px;
                    color: #ffffff;
                    line-height: 12px;
                    background: linear-gradient(305deg, @prim2 0%, @prim 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
        .text3 {
            font-size: 12px;
            color: #6a6d83;
            line-height: 17px;
            .flex();
            span {
                .flex();
            }
            span + span {
                &::before {
                    content: '|';
                    line-height: 17px;
                    margin: 0 6px;
                }
            }
        }
    }
    .host {
        width: 58px;
        height: 12px;
        font-size: 10px;
        color: #ffffff;
        line-height: 12px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0px 0px 4px 4px;
        position: absolute;
        left: 12px;
        bottom: 12px;
        text-align: center;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
}

.ticket {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #1a1c2b;
    line-height: 18px;
    background: linear-gradient(135deg, #f6abf0 0%, #10f7ee 100%);
    border-radius: 4px 0px 4px 0px;
    padding: 0 16px;
}
.status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #ffffff;
    line-height: 18px;
    padding: 0 16px;
    background: #313346;
    border-radius: 0px 4px 0px 4px;

    &.status1 {
        background-color: #5464e6;
    }
    &.status2 {
        background-color: #e24f4f;
    }
}
</style>
