<template>
    <div class="result">
        <img
            class="topBg"
            :src="isWin ? require('@assets/png-victory-bg.png') : require('@assets/png-depeat-bg.png')"
            alt=""
        />

        <div class="topBox" :class="{ win: isWin }" :style="{ top: barHeight + 'px' }">
            <div class="top-info" v-if="isWin">
                <div class="text1">victory</div>
                <div class="text2">比赛胜利</div>
                <!-- <div class="text3">
                    <span>赢得</span>
                    <span></span>
                    <span>绿洲核</span>
                </div> -->
            </div>
            <div class="top-info" v-else>
                <div class="text1">defeat</div>
                <div class="text2">比赛失败</div>
                <div class="text3">无奖励</div>
            </div>
            <img
                :src="isWin ? require('@assets/png-victory.png') : require('@assets/png-defeat.png')"
                alt=""
                class="img"
            />
        </div>

        <div class="result-content">
            <div class="result-title">比赛截图</div>

            <div class="teams">
                <div class="team">
                    <div class="team-item" v-for="(item, index) in hosts" :key="index">
                        <div class="tag">主队</div>
                        <div class="user">
                            <van-image
                                :src="item.avatar || require('@assets/img_default_photo.png')"
                                width="34"
                                height="34"
                                fit="cover"
                            />
                            <div class="user-info">
                                <div class="text1">{{ item.nickname }}</div>
                                <div class="text2">UID:{{ item.userId }}</div>
                            </div>
                        </div>
                        <van-image
                            v-if="item.screenShot"
                            :src="item.screenShot"
                            class="screen"
                            width="100%"
                            fit="scale-down"
                            @click="preview(item.screenShot)"
                        />
                        <div class="not" v-else>
                            <img src="@assets/png-weishangchuan.png" alt="" />
                            <div>未上传</div>
                        </div>
                    </div>
                </div>
                <div class="team guest">
                    <div class="team-item" v-for="(item, index) in guests" :key="index">
                        <div class="tag">客队</div>
                        <div class="user">
                            <van-image
                                :src="item.avatar || require('@assets/img_default_photo.png')"
                                width="34"
                                height="34"
                                fit="cover"
                            />
                            <div class="user-info">
                                <div class="text1">{{ item.nickname }}</div>
                                <div class="text2">UID:{{ item.userId }}</div>
                            </div>
                        </div>
                        <van-image
                            v-if="item.screenShot"
                            :src="item.screenShot"
                            @click="preview(item.screenShot)"
                            class="screen"
                            width="100%"
                            fit="scale-down"
                        />
                        <div class="not" v-else>
                            <img src="@assets/png-weishangchuan.png" alt="" />
                            <div>未上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
    inject: ['barHeight'],
    data() {
        return {
            roomId: 0,
            results: [],
            players: []
        };
    },
    computed: {
        isWin() {
            return this.mine.status === 'WIN';
        },
        hosts() {
            let results = [...this.results];
            let players = [...this.players];
            return results
                .filter(item => {
                    return item.team === 'host';
                })
                .map(item => {
                    let info = players.find(player => {
                        return player.userId === item.userId;
                    });
                    return {
                        ...info,
                        ...item
                    };
                });
        },
        guests() {
            let results = [...this.results];
            let players = [...this.players];
            return results
                .filter(item => {
                    return item.team === 'guest';
                })
                .map(item => {
                    let info = players.find(player => {
                        return player.userId === item.userId;
                    });
                    return {
                        ...info,
                        ...item
                    };
                });
        },
        mine() {
            let results = [...this.results];
            let info = results.find(item => {
                return item.userId === this.$store.state.userInfo.id;
            });
            return info || {};
        }
    },
    mounted() {
        if (this.$route.query.roomId) {
            this.roomId = this.$route.query.roomId;
        }
        this.$http
            .get('/room/detail/' + this.roomId)
            .then(res => {
                this.players = res.players;
            })
            .catch(e => {
                if (e && e.error) {
                    this.$toast(e.error);
                }
            });
        this.$http
            .post(
                '/joinRoom/all',
                {
                    query: {
                        roomId: this.roomId
                    }
                },
                { body: 'json' }
            )
            .then(res => {
                this.results = res.content;
            });
    },
    methods: {
        preview(img) {
            ImagePreview({
                images: [img],
                startPosition: 0
            });
        }
    }
};
</script>

<style lang="less" scoped>
.result {
    background-color: #fff;
    position: relative;
    padding-bottom: 80px;
}
.topBg {
    width: 100%;
    display: block;
}
.topBox {
    position: absolute;
    padding: 20px 30px 0 20px;
    .flex();
    left: 0;
    right: 0;
    justify-content: space-between;

    .img {
        width: 146px;
        height: 178px;
    }
    .top-info {
        .text1 {
            font-size: 38px;
            font-family: SourceHanSans-Medium;
            font-weight: bolder;
            color: #ff7f1f;
            line-height: 38px;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: linear-gradient(295deg, #b5b5b5 0%, #434343 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text2 {
            font-size: 20px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            margin-top: 24px;
        }

        .text3 {
            font-size: 14px;
            color: #939599;
            line-height: 24px;
            margin-top: 8px;
        }
    }
}

.result-content {
    padding: 0 20px;
    .result-title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        padding: 0 4px;
    }
}

.teams {
    .flex();
    padding: 16px 0;
    justify-content: space-between;
    align-items: flex-start;
    .team {
        width: calc(50% - 8px);

        .team-item {
            background: rgba(255, 123, 59, 0.1);
            border-radius: 4px;
            padding: 34px 10px;
            position: relative;
            .user {
                .flex();

                .user-info {
                    flex-grow: 1;
                    margin-left: 8px;
                    .text1 {
                        font-size: 14px;
                        font-weight: bold;
                        color: #000000;
                        line-height: 24px;
                    }
                    .text2 {
                        font-size: 12px;
                        color: #c2c2c2;
                        line-height: 17px;
                    }
                }
            }

            .screen {
                margin-top: 17px;
            }

            .tag {
                font-size: 12px;
                font-weight: bold;
                background: #ff7b3b;
                border-radius: 4px 0px 4px 0px;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0 10px;
            }
        }

        .team-item + .team-item {
            margin-top: 20px;
        }

        &.guest {
            .team-item {
                background: rgba(88, 178, 255, 0.1);

                .tag {
                    background: #58b2ff;
                }
            }
        }
    }
}

.not {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    .flex-col();
    align-items: center;
    justify-content: center;
    height: 62px;
    margin-top: 17px;
    img {
        width: 24px;
        height: 24px;
    }
    span {
        font-size: 12px;
        color: #c2c2c2;
        line-height: 17px;
        margin-top: 3px;
    }
}
</style>
