<!-- 阵容 -->
<template>
    <van-pull-refresh v-if="!no_data && lineup" success-text="刷新成功" v-model="loading" @refresh="onRefresh">
        <template #loosing> 
            <div class="refresh-txt">
                <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
                <span>释放即可刷新</span>
            </div> 
        </template>
        <template #loading>  
            <div class="refresh-txt">
                <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
                <span>加载中……</span>
            </div>
        </template> 
        <template #success>  
            <div class="refresh-txt">
                <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
                <span>刷新成功</span>
            </div>
        </template> 
        <section class="first" v-if="lineup.confirmed > -1 && lineup.away_formation && lineup.home_formation">
            <div class="title-lineup">首发阵容</div>
            <div class="team-formation">
                <div>
                    <div class="team-info">
                        <img v-lazy="{src:game_info?.host_photo,error:getTeamLazyErrorLogo(game_detail.nm_home_team_logo)}" width="30px"><span class="team-name">{{ game_info?.host_name }}</span>
                    </div>
                    <div class="team-rating" v-if="team_rating?.home_first_mean > 0">首发均评分<span class="fen">{{ team_rating.home_first_mean }}</span>分</div>
                </div>
                <div>阵型<span class="formation">{{lineup.home_formation}}</span></div>
            </div>
            <div class="first-lineup">
                <div class="home-lineup" >
                    <template v-for="(item,index) in lineup.home" :key="item.id">
                        <div v-if="item.first == 1" class="player" :style="`left: ${item.x}%; top: ${item.y}%; z-index: ${index};`">
                            <div>
                                <div class="player-img" v-lazy:background-image="item.logo || player_default_img" :style="`border-color:${lineup.home_color}`">
                                    <div v-if="item.rating > 0" class="img-top">
                                        <div class="rating" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.home_count - 3 && index < team_rating.home_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</div>
                                    </div>
                                    <div class="img-left">
                                        <div class="shirt-number">{{item.shirt_number}}</div>
                                    </div>
                                </div>
                                <div class="player-live">
                                    <div class="name">
                                        <b class="captain" v-if="item.captain == 1">队长</b>
                                        <b class="captain" v-if="index == 0">最佳</b>
                                        {{item?.short_name || item.name}}
                                    </div>
                                    <div class="incident" v-if="item.incidents">
                                        <template v-for="(val,index) in item.incidents" :key="index">
                                            <svg-icon v-if="val.assist1 && val.assist1.id == item.id" className="icon" :iconName="type[18].icon"></svg-icon>
                                            <svg-icon v-else-if="val.type == 9" className="icon" iconName="huanxia"></svg-icon>
                                            <svg-icon v-else className="icon" :iconName="type[val.type].icon"></svg-icon>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </template>
                </div>
                <div class="away-lineup">
                    <template  v-for="(item,index) in lineup.away" :key="item.id">
                        <div v-if="item.first == 1" class="player away" :style="`left: ${100-item.x}%; bottom: ${item.y}%; z-index: ${index};`">
                            <div>
                                <div class="player-img" v-lazy:background-image="item.logo || player_default_img" :style="`border-color:${lineup.away_color}`">
                                    <div v-if="item.rating > 0" class="img-top">
                                        <div class="rating" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.away_count - 3 && index < team_rating.away_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</div>
                                    </div>
                                    <div class="img-left">
                                        <div class="shirt-number">{{item.shirt_number}}</div>
                                    </div>
                                </div>
                                <div class="player-live">
                                    <div class="name">
                                        <b class="captain" v-if="item.captain == 1">队长</b>
                                        <b class="captain" v-if="index == 0">最佳</b>
                                        {{item?.short_name || item.name}}
                                    </div>
                                    <div class="incident" v-if="item.incidents">
                                        <template v-for="(val,index) in item.incidents" :key="index">
                                            <svg-icon v-if="val.assist1 && val.assist1.id == item.id" className="icon" :iconName="type[18].icon"></svg-icon>
                                            <svg-icon v-else-if="val.type == 9" className="icon" iconName="huanxia"></svg-icon>
                                            <svg-icon v-else className="icon" :iconName="type[val.type].icon"></svg-icon>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </template>
                </div>
            </div>
            <div class="team-formation">
                <div>
                    <div class="team-info">
                        <img v-lazy="{src:game_info?.away_photo,error:getTeamLazyErrorLogo(game_detail.nm_away_team_logo)}" width="30px">
                        <span class="team-name">{{ game_info?.away_name }}</span>
                    </div>
                    <div class="team-rating" v-if="team_rating?.away_first_mean > 0">首发均评分<span class="fen">{{ team_rating.away_first_mean }}</span>分</div>
                </div>
                <div>阵型<span class="formation">{{lineup.away_formation}}</span></div>
            </div>
        </section>
        <section class="first second" v-else>
            <div class="title-lineup">首发阵容</div>
            <div class="match_team">
                <div class="match_team_container">
                    <div class="team_logo" :style="`background-image: url(${game_info?.host_photo});`"></div> 
                    <div class="text-info">
                        <p class="team_name">{{ game_info?.host_name }}</p> 
                    </div>
                </div>
                 <div class="match_team_container">
                    <div class="team_logo mat-left" :style="`background-image: url(${game_info?.away_photo});`"></div> 
                    <div class="text-info">
                        <p class="team_name">{{ game_info?.away_name }}</p> 
                    </div>
                </div>
            </div>
            <div class="second-lineup" >
                <div class="home-lineup">
                    <template v-for="(item,index) in lineup.home" :key="item.id">
                        <div v-if="item.first == 1" class="player-box">
                            <div class="player-left">
                                <div class="player-img" :style="`background-color: ${lineup.home_color || '#204077'};`">
                                    {{ item.shirt_number }}
                                </div>
                            </div>
                            <div class="player-right">
                                <div class="n-p-r">
                                    <div class="name">
                                        {{item?.short_name || item.name}}
                                        <span class="rating" v-if="item.rating > 0" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.home_count - 3 && index < team_rating.home_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</span>
                                    </div>
                                    <div class="position-icon">
                                        <span class="position">{{position[item.position]}}</span>
                                        <div class="time-svg" v-if="item.incidents">
                                            <template v-for="val in item.incidents" :key="val.time">
                                                <div v-if="val.type != 9">
                                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-svg" v-if="item.incidents">
                                    <template v-for="val in item.incidents" :key="val.time">
                                        <div v-if="val.type == 9">
                                            <svg-icon className="icon" iconName="huanxia"></svg-icon>
                                            <span>{{ val.time }}</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="away-lineup">
                    <template v-for="(item,index) in lineup.away" :key="item.id">
                        <div v-if="item.first == 1" class="player-box">
                            <div  class="player-left">
                                <div class="player-img" :style="`background-color: ${lineup.away_color || '#ae5971'};`">
                                    {{ item.shirt_number }}
                                </div>
                            </div>
                            <div class="player-right">
                                <div class="n-p-r">
                                    <div class="name">
                                        {{item?.short_name || item.name}}
                                        <span class="rating" v-if="item.rating > 0" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.away_count - 3 && index < team_rating.away_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</span>
                                    </div>
                                    <div class="position-icon">
                                        <span class="position">{{position[item.position]}}</span>
                                        <div class="time-svg" v-if="item.incidents">
                                            <template v-for="val in item.incidents" :key="val.time">
                                                <div v-if="val.type != 9">
                                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-svg" v-if="item.incidents">
                                    <template v-for="val in item.incidents" :key="val.time">
                                        <div v-if="val.type == 9">
                                            <svg-icon className="icon" iconName="huanxia"></svg-icon>
                                            <span>{{ val.time }}</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </section>
        <section class="second" v-if="second_show">
            <div class="title-lineup">替补阵容</div>
            <div class="match_team">
                <div class="match_team_container">
                    <div class="team_logo" :style="`background-image: url(${game_info?.host_photo});`"></div> 
                    <div class="text-info">
                        <p class="team_name">{{ game_info?.host_name }}</p> 
                    </div>
                </div>
                 <div class="match_team_container">
                    <div class="team_logo mat-left" :style="`background-image: url(${game_info?.away_photo});`"></div> 
                    <div class="text-info">
                        <p class="team_name">{{ game_info?.away_name }}</p> 
                    </div>
                </div>
            </div>
            <div class="second-lineup" >
                <div class="home-lineup">
                    <template v-for="(item,index) in lineup.home" :key="item.id">
                        <div v-if="item.first == 0" class="player-box">
                            <div class="player-left">
                                <div class="player-img" :style="`background-color: ${lineup.home_color || '#204077'};`">
                                    {{ item.shirt_number}}
                                </div>
                            </div>
                            <div class="player-right">
                                <div class="n-p-r">
                                    <div class="name">
                                        {{item?.short_name || item.name}}
                                        <span class="rating" v-if="item.rating > 0" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.home_count - 3 && index < team_rating.home_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</span>
                                    </div>
                                    <div class="position-icon">
                                        <span class="position">{{position[item.position]}}</span>
                                        <div class="time-svg" v-if="item.incidents">
                                            <template v-for="val in item.incidents" :key="val.time">
                                                <div v-if="val.type != 9">
                                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-svg" v-if="item.incidents">
                                    <template v-for="val in item.incidents" :key="val.time">
                                        <div v-if="val.type == 9">
                                            <svg-icon className="icon" iconName="huanshang"></svg-icon>
                                            <span>{{ val.time }}</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="away-lineup">
                    <template v-for="(item,index) in lineup.away" :key="item.id">
                        <div v-if="item.first == 0" class="player-box">
                            <div  class="player-left">
                                <div class="player-img" :style="`background-color: ${lineup.away_color || '#ae5971'};`">
                                    {{ item.shirt_number }}
                                </div>
                            </div>
                            <div class="player-right">
                                <div class="n-p-r">
                                    <div class="name">
                                        {{item?.short_name || item.name}}
                                        <span class="rating" v-if="item.rating > 0" :style="`background-color:${index < 3 ? '#ff8710' : index > team_rating.away_count - 3 && index < team_rating.away_count ? '#649F04' : '#6EC96F'}`">{{item.rating}}</span>
                                    </div>
                                    <div class="position-icon">
                                        <span class="position">{{position[item.position]}}</span>
                                        <div class="time-svg" v-if="item.incidents">
                                            <template v-for="val in item.incidents" :key="val.time">
                                                <div v-if="val.type != 9">
                                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-svg" v-if="item.incidents">
                                    <template v-for="val in item.incidents" :key="val.time">
                                        <div v-if="val.type == 9">
                                            <svg-icon className="icon" iconName="huanshang"></svg-icon>
                                            <span>{{ val.time }}</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </section>
        <section class="injury">
            <div class="title-lineup">伤停信息</div>
            <div class="injury-lineup">

            </div>
        </section>
        <div class="icon-box">
            <div class="icon-son" v-for="(item,index) in icon_list" :key="index">
                <div class="icon-svg">
                    <svg-icon className="icon" :iconName="item.icon"></svg-icon>
                    <span>{{item.text}}</span>
                </div>
            </div>
        </div>
    </van-pull-refresh>
    <noData v-if="no_data" nodata_message="暂无对阵数据！"></noData>
</template>
  
<script lang="ts">
import { ref,defineComponent,onMounted,onUnmounted,toRef,watch} from 'vue';
import * as nm_match_api from '@/api/nm_match_api';
import { useRoute } from 'vue-router';
import { default as _ } from 'lodash';
import noData from '@/components/NoData.vue';
import { nm_type } from '@/common/js/nm_config';
import { default as moment } from 'moment';
import {getTeamLazyErrorLogo } from '@/until/index';
//mitt插件 实现组件间的通信
import { events } from '@/until/eventBus.js';

export default defineComponent({
    name:'GameLineup',
    components: {noData},
    props: { 
        gameInfo: {
            type: Object,
            default: () => { return {}; }
        },
        gameDetail: {
            type: Object,
            default: () => { return {}; }
        },
        activeName: { type: String, default: '' },
    },
    setup(props:any){
        const route = useRoute();
        const game_info:any = toRef(props,'gameInfo');
        const game_detail:any = toRef(props,'gameDetail')
        const loading = ref(true);
        const no_data = ref(false);
        const player_default_img = ref('https://img2.ydniu.com/app/images/default_user.png');
        const lineup:any = ref(null);
        const status_id:any = ref(1);
        const icon_list = ref([
            {icon:"jinqiu",text:"进球",order:1},
            {icon:"dianqiu",text:"点球",order:2},
            {icon:"dianqiuweijin",text:"点球未进",order:3},
            {icon:"wulongqiu",text:"乌龙球",order:4},
            {icon:"zhugong",text:"助攻",order:5},
            {icon:"duizhang",text:"队长",order:6},
            {icon:"huangpai",text:"黄牌",order:7},
            {icon:"hongpai",text:"红牌",order:8},
            {icon:"lianghuangbianhong",text:"两黄一红",order:9},
            {icon:"huanren",text:"换人",order:10},
            {icon:"quanchangzuijia",text:"全场最佳",order:11},
            {icon:"var",text:"VAR",order:12},
        ]);
        const team_rating:any = ref({
            home_count:0,
            home_first_mean:0,
            away_count:0,
            away_first_mean:0,
        })
        const type:any = ref(nm_type);
        const position:any = ref({
            "G":"守门员","F":"前锋","D":"后卫","M":"中场"
        });
        const second_show:any = ref(false);
        const lineup_timer:any = ref(null);
        events.on('lineup', (data:any) => {  
            status_id.value = data.status_id;
            if(data.lineup && (data?.lineup?.home || data?.lineup?.away)){
                lineup.value = formatLineup(data.lineup)
                no_data.value = false;
            }else{
                no_data.value = true;
            }
        }); 

        const init_data = async() => {
            // if((props.activeName || route.name) =='GameLineup'){
                setTimeout(() => {
                    getDataNm();
                }, 300);
                loading.value = false;
            // }

            // 轮询比赛
            if (moment() > moment(game_info.value?.match_time) && moment() < moment(game_info.value?.match_time).add(150,'minutes')) {
                getIntervalLineup(status_id.value);
            }
        }

        onMounted(init_data);

        watch(() => route.query.yiqiuid || route.params.yiqiuid, (newVal: any) => {
            if (newVal && newVal != game_info.value.id) {
                console.info('lineup',newVal,game_info.value.id)
                init_data();
            }
        });

        onUnmounted(() => {   
            if(lineup_timer.value){
                clearInterval(lineup_timer.value);
            }
            events.off('lineup');  
        }); 

        const onRefresh = () => {
            setTimeout(() => {
                getDataNm();
                loading.value = false;
            }, 500);
        };

        const getDataNm = async()=>{
            if(!lineup.value){
                let yiqiu_id = game_info?.value?.id || route.query.yiqiuid || route.params.yiqiuid;
                let nm_result = await nm_match_api.nm_match_detail({yiqiu_id: yiqiu_id});
                if(nm_result && nm_result?.lineup && (nm_result?.lineup?.home || nm_result?.lineup?.away)){
                    lineup.value = formatLineup(nm_result.lineup)
                    no_data.value = false;
                }
            }
        };

        //nm轮询比赛
        const getIntervalLineup = (status:any) => {
            if(status){
                if (status == 1) {
                    lineup_timer.value = setInterval(async function () {
                        // console.info("lineup" , 'nm状态为1未开赛轮询3分钟一次')
                        await getLineupDataNm();
                    },  60 * 3 * 1000);
                }else if([2,4,5,6,7].includes(status)){
                    lineup_timer.value = setInterval(async function () {
                        // console.info('lineup35秒钟一次')
                        await getLineupDataNm();
                    }, 35 * 1000);
                }else{
                    clearInterval(lineup_timer.value);
                }
            }
        }

        const getLineupDataNm = async()=>{
            let yiqiu_id = game_info?.value?.id || route.query.yiqiuid || route.params.yiqiuid;
            let lineup_result = await nm_match_api.nm_match_lineup({yiqiu_id: yiqiu_id});
            if(lineup_result && (lineup_result?.home || lineup_result?.away)){
                lineup.value = formatLineup(lineup_result) ?? null;
            }
        };

        const formatLineup = (lineup:any)=>{
            if(lineup?.home){
                    let home = _.orderBy(lineup.home,'rating','desc');
                    let first = _.filter(home,item => item.first == 1);
                    team_rating.value.home_count = _.filter(home,item => item.rating > 0).length;
                    let first_mean = _.meanBy(first, function(o) { if(o.rating) return parseInt(o.rating); });
                    team_rating.value.home_first_mean = first_mean.toFixed(2);
                    let home_arr = [];
                    _.forEach(home,function(item:any){
                        item.name = getName(item.name);
                        item.shirt_number = item.shirt_number == 0 ? '-' : item.shirt_number;
                        //如果给的数据坐标有问题就不显示首发阵容
                        if(item.x != 0 && item.y != 0){
                            home_arr.push(item)
                        }
                        if(item.first == 0){
                            second_show.value = true;
                        }
                    })
                    lineup.home = home
                    if(home_arr.length == 0){
                        lineup.confirmed = -1;
                    }
            }
            if(lineup?.away){
                let away = _.orderBy(lineup.away,'rating','desc');
                let first = _.filter(away,item => item.first == 1);
                team_rating.value.away_count = _.filter(away,item => item.rating > 0).length;
                let first_mean = _.meanBy(first, function(o) { if(o.rating) return parseInt(o.rating); });
                team_rating.value.away_first_mean = first_mean?.toFixed(2);
                let away_arr = [];
                _.forEach(away,function(item:any){
                    item.name = getName(item.name);
                    item.shirt_number = item.shirt_number == 0 ? '-' : item.shirt_number;
                    //如果给的数据坐标有问题就不显示首发阵容
                    if(item.x != 0 && item.y != 0){
                        away_arr.push(item)
                    }
                    if(item.first == 0){
                        second_show.value = true;
                    }
                })
                lineup.away = away;
                if(away_arr.length == 0){
                    lineup.confirmed = -1;
                }
            }
            return lineup
        }
        const getName = (name:any) => {
            if(name.indexOf("·") > -1){
                let names = name.split('·')
                name = names[names.length-1];
            }
            return name;
        }
        const getIcon = (icon_name:any) => {
            return `../../assets/svg/sprite.svg#${icon_name}`;
        }

        return{
            no_data,
            loading,
            icon_list,
            type,
            position,
            game_info,
            game_detail,
            team_rating,
            second_show,
            player_default_img,
            lineup,
            onRefresh,
            getIcon,
            getTeamLazyErrorLogo,
        }
    }
})
</script>
<style lang="scss" scoped>
@use '@/common/style/common' as *;
body{
    text-align: left;
}
.title-lineup{
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    padding:0 10px;
    line-height: 30px;
}
.team-formation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
    font-size: 14px;
    background-color: #A4D99C;
    .team-info{
        @include flex-center;
        img{
            width: 30px;
            border-radius: 50%;
        }
        .team-name{
            color:#000;
            font-size: 18px;
            font-weight: bold;
            margin-left: 10px;
        }
    }
    .team-rating{
        background-color: rgba(149, 203, 142, 1);
        color: rgba(58, 92, 54, 1);
        font-size: 12px;
        text-align: center;
        padding:0 10px;
        margin-top: 5px;
        border-radius: 15px;
        .fen{
            font-weight: bold;
            color:#000;
            padding:0 2px;
        }
    }
    .formation{
        display: block;
        font-size: 18px;
        font-weight: bold;
        color:#3A5C36;
    }
}
.first-lineup{
    @include back-img('../../assets/game/lineup_bg.jpg');
    height:880px;
    color:#fff;
    font-weight: 500;
    .home-lineup,.away-lineup{
       position: relative;
       height: 50%;
       .player{
            font-size: 12px;
            width:100%;
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            .player-img{
                position: relative;
                background-color: #fff;
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: contain;
                box-shadow: 0 0.533vw 1.067vw 0 rgba(36,77,0,.6);
                width: 40px;
                height: 36px;
                margin: 0 auto;
                border-radius: 5px;
                border-width: 0.533vw;
                border-style: solid;
                .img-top,.img-left{
                    position: absolute;
                    width: 18px;
                }
                .img-top{
                    top:-10px;
                    width: 90%;
                    margin-left: 5%;
                    .rating{
                        font-size: 12px;
                        height: 14px;
                        line-height: 14px;
                        border-radius: 6px;
                        background-color: green;
                        text-align: center;
                    }
                }
                .img-left{
                    bottom: 0;
                    left:-10px;
                    text-align: center;
                    .shirt-number{
                        border-radius: 50%;
                        font-size: 12px;
                        background-color:#34C094;
                        height: 16px;
                        width: 16px;
                    }
                }
                
            }
            .player-live{
                position: relative;
                .incident{
                    position: absolute;
                    width: 100%;
                    padding-top: 2px;
                    @include flex-center;
                    .icon{
                        width:12px;
                        height:12px;
                    }
                }
                .name{
                    font-size: 10px;
                    color:#333;
                    padding-top: 5px;
                    text-align: center;
                    .captain{
                        font-size: 8px;
                        border-radius: 2px;
                        color:#fff;
                        padding:0 3px;
                        text-align: center;
                        background-color: #E74C4C;
                    }
                }
            }
            
        }
        .away{
            transform: translate(-50%, 70%);
            -webkit-transform: translate(-50%, 70%);
            -moz-transform: translate(-50%, 70%);
            -o-transform: translate(-50%, 70%);
        }
    }
    
}
.second{
    margin-top: 10px;
    .match_team .match_team_container, .match_team {
        display: flex;
        align-items: center;
    }
    .match_team {
        -ms-flex-align: center;
        background: #f5f7f9;
        border-bottom: 1px solid #f5f7f9;
        
        .match_team_container{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -ms-flex-align: center;
            display: flex;
            align-items: center;
            padding: 10px;
            .team_logo{
                width: 26px;
                height: 26px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: 50%;
            }
            .team_name{
                align-items: flex-start;
                margin-left: 10px;
                font-size: 16px;
                font-weight: bold;
                color:#000;
            }
        }
    }
    .second-lineup{
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .home-lineup{
            border-right: solid 1px #f4f5f8;
        }
        .home-lineup,.away-lineup{
            flex: 1;
            .player-box{
                width: 100%;
                padding:0 10px;
                box-sizing: border-box;
                height: 50px;
                @include flex-center;
                border-bottom: 1px solid #f4f5f8;
                font-size: 12px;
                
                .player-left{
                    width: 30px;
                    color:#fff;
                    margin-right: 5px;
                    .player-img{
                        background: url(../../assets/game/coat.png) no-repeat 50%;
                        background-size: 100% 100%;
                        font-size: 14px;
                        width:30px;
                        height:30px;
                        @include flex-center;
                    }
                }
                .player-right{
                    flex:1;
                    display: flex;
                    width: 100%;
                    align-items: center;
                    justify-content: space-between;
                    .n-p-r{
                        text-align: left;
                        .position-icon{
                            display: flex;
                            align-items: center;
                            .icon{
                                width: 12px;
                                height: 12px;
                            }
                        }
                        .name{
                            color:#000;
                        }
                        .rating{
                            border-radius: 6px;
                            padding: 0 5px;
                            background-color: green;
                            color:#fff;
                            font-size: 12px;
                            height: 14px;
                            line-height: 14px;
                        }
                    }
                    .time-svg{
                        @include flex-center;
                    }
                    .time-svg .icon{
                        width:16px;
                    }
                }
            }
        }
    }
}

.icon-box{
    display: inline-block;
    width: 100%;
    padding-top:10px;
    padding-left:10px;
    .icon-son{
        color: #333;
        font-size: 12px;
        font-weight: 500;
        width: 20%;
        display: grid;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: start;
        align-items: center;
        float: left;
        margin-bottom: 10px;
        
        text-align: center;
        .icon-svg{
            @include flex-center;
        }
        .icon{
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }
    }
}
</style>