<template>
    <van-dialog v-model:show="show" theme="round-button" :showConfirmButton="false">
        <div class="dialog-title">
            <span>玩家信息</span>
        </div>
        <div class="player-list">
            <div class="player" v-for="(item, index) in players" :key="index">
                <van-image
                    width="40"
                    height="40"
                    radius="4"
                    :src="item.avatar || require('@assets/img_default_photo.png')"
                    fit="cover"
                />
                <div class="info">
                    <div class="text1">{{ item.nickname }}</div>
                    <div class="text2">ID：{{ item.userId }}</div>
                </div>
                <div class="btn">踢出</div>
            </div>
        </div>
        <template #footer>
            <img class="close-img" @click="show = false" src="@assets/icon_fenxiang_close.png" alt="" />
        </template>
    </van-dialog>
</template>

<script>
export default {
    props: {
        roomInfo: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            show: false,
            playerInfo: {}
        };
    },
    computed: {
        players() {
            return this.roomInfo.players || [];
        }
    },
    methods: {
        init(info) {
            this.show = true;
            this.playerInfo = info;
        }
    }
};
</script>

<style lang="less" scoped>
.dialog-title {
    .flex-col();
    align-items: center;
    padding: 20px 0 24px;
    img {
        width: 48px;
        height: 48px;
    }
    span {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-top: 12px;
    }
}

.dialog-tips {
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    padding: 0 20px 30px;
}
.player-list {
    padding-bottom: 100px;
}
.player {
    .flex();
    padding: 10px 20px;
    .info {
        margin-left: 10px;
        flex-grow: 1;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            color: #6a6d83;
            line-height: 17px;
        }
    }
    .btn {
        width: 52px;
        border-radius: 4px;
        border: 1px solid #ff4f50;
        font-size: 12px;
        font-weight: bold;
        color: #ff4f50;
        line-height: 24px;
        text-align: center;
    }
}

.close-img {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    margin-left: -20px;
    bottom: -60px;
}
</style>
