<template>
    <div class="soldierLive" >
        <div class="sort-box">
            <span class="sort-btn" @click="_setSort"><i class="icon icon-sort"></i>{{sort ? '倒序' : '正序'}}</span>
        </div>
        <div class="list-box" ref="listBox" @scroll="_getMore">
            <ul class="list" ref="listDom">
                <li class="item" v-for="(item,index) in newList" :key="index">
                    <div class="time">● {{item.time*1000 | formatDate}}</div>
                    <div class="content">
                        <div class="text">{{item.text}}</div>
                        <div class="imgs" v-if="item.img && item.img.length" :class="imgClass(item.img)">
                            <div class="img-item" v-for="(img,index) in item.img" :key="index">
                                <div class="img-box" v-if="item.img.length != 1">
                                    <img :src="`${img}`" v-photoswipe="{group:'soldier'}" class="img">
                                </div>
                                <div class="img-box" v-else>
                                    <img :src="`${img}`" v-photoswipe="{group:'soldier'}" class="img">
                                </div>
                            </div>
                        </div>
                        <div class="videos" v-if="item.video && item.video.length">
                            <div v-for="(video,index) in item.video" :key="index">
                                <video preload="none" controls playsinline="" webkit-playsinline="" x5-playsinline="" x-webkit-airplay="allow" :poster="video.thumbnail" :src="video.url"></video>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {getSoldierLive} from '@/plugins/API/apiOld'
    import {mapGetters} from 'vuex'

    export default {
        props: {
            id: {}
        },
        data(){
            return {
                list: [],
                page: 1,
                num: 15,
                isAjax: true,
                imgsClass: ['img-part1','img-part2','img-part3'],
                sort: true,
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
            }),
            newList(){
                return this.list.sort((a,b)=>{
                    if(this.sort){
                        return b.time - a.time
                    }else{
                        return a.time - b.time
                    }
                })
            }
        },
        mounted(){
            this._getList();
        },
        methods: {
            async _getList(){
                if(!this.isAjax){
                    return false;
                }
                this.isAjax = false;
                const res = await getSoldierLive({
                    uin: this.channelInfo.uin,
                    channelId: this.id,
                    num: this.num,
                    page: this.page
                })
                this.isAjax = true;
                if(res.code == 200 && res.errorCode == 0){
                    this.page ++;
                    if(res.data.length < this.num){
                        this.isAjax = false;
                    }
                    this.list = [...this.list,...res.data]
                }
            },
            _getMore(){
                let listBoxHieght = this.$refs.listBox.clientHeight;
                let listBoxScrollY = this.$refs.listBox.scrollTop;
                let listDomHieght = this.$refs.listDom.clientHeight;
                if(listBoxHieght + listBoxScrollY > listDomHieght -250){
                    this._getList();
                }

            },
            imgClass(list){
                let num = list.length;
                if(num == 1){
                    return this.imgsClass[0];
                }else if(num == 2 || num == 4){
                    return this.imgsClass[1];
                }else{
                    return this.imgsClass[2];
                }
            },
            _setSort(){
                this.sort = !this.sort;
            },
        }
    }
</script>

<style lang="less" scoped>
    .soldierLive{
        padding-top: 20px;
        height: 100%;

        .sort-box{
            background: #fff;
            text-align: right;
            padding: 10px 15px 5px;

            .sort-btn{
                height: 20px;
                line-height: 20px;
                color: #008DF6;
                font-size: 16px;

                .icon{
                    display: inline-block;
                    vertical-align: middle;
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    background-image: url("./img/icon-sort.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 100% 100%;
                }
            }
        }
        .list-box {
            padding: 0 10px 10px;
            height: calc(100% - 35px);
            overflow: auto;

            .item {
                .time {
                    line-height: 30px;
                    color: #008DF6;
                }
                .content {
                    padding: 5px;
                    background: #fff;
                    border-radius: 5px;
                    border: 1px solid #E5E5E5;

                    .text {
                        line-height: 25px;
                        color: #4B4B4B;
                        word-break: break-word;
                    }
                    .imgs {
                        max-width: 600px;
                        display: flex;
                        flex-wrap: wrap;

                        &.img-part1 {
                            .img-item {
                                flex: 1;
                                width: 100%;

                                .img-box{
                                    padding-top: 100% * 9 / 16;
                                }
                            }
                        }
                        &.img-part2 {
                            .img-item {
                                flex: 0 0 50%;
                                width: 50%;
                                padding: 2px;

                                .img-box{
                                    padding-top: 100%;
                                }
                            }
                        }
                        &.img-part3 {
                            .img-item {
                                flex: 0 0 1/3*100%;
                                width: 1/3*100%;
                                padding: 2px;

                                .img-box{
                                    padding-top: 100%;
                                }
                            }
                        }
                        .img-item {
                            overflow: hidden;

                            .img-box{
                                position: relative;
                                background-color: #ddd;

                                .img{
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    display: block;
                                    width: 100%;
                                    transform: translate(-50%, -50%);
                                }
                            }


                        }
                    }
                    .videos {
                        position: relative;
                        max-width: 600px;

                        video {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
</style>
