<!-- 赛况 -->
<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-duration="1000">
        <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="odds-box" v-if="odds.ah">
            <div class="odds-title">{{game_info?.nm_status == 1? '即时数据' : '赛前数据'}}</div>
            <div class="odds-content">
                <div>[{{odds.ah[1].indexOf('-') > -1 ? odds.ah[1].replace('-','+') : '-' + odds.ah[1]}}]<span class="team-name">{{ game_info?.host_name }}</span> <span class="odds">{{odds.ah[0]}}</span></div>
                <div>[{{odds.ah[1].indexOf('-') > -1 ? odds.ah[1] : '+' + odds.ah[1]}}]<span class="team-name">{{ game_info?.away_name }}</span> <span class="odds">{{odds.ah[2]}}</span></div>
            </div>
            <van-popup v-model:show="odds_more" round position="bottom" :style="{ height: '20%' }">
                <div class="ah" v-if="odds.ah">
                    <div class="title">亚洲数据</div>
                    <div>
                        <span>[{{odds.ah[1]}}]{{ game_info?.host_name }}</span>
                        <span>{{ game_info?.away_name }}</span>
                    </div>
                    <div>
                        <span>主胜 {{ odds.ah[0] }}</span>
                        <span>客胜 {{ odds.ah[2] }}</span>
                    </div>
                </div>
                <div class="hda" v-if="odds.hda">
                    <div class="title">欧洲数据</div>
                    <div>
                        <span>主胜{{ odds.hda[0] }}</span>
                        <span>平局{{ odds.hda[1] }}</span>
                        <span>客胜{{ odds.hda[2] }}</span>
                    </div>
                </div>
                <div class="ou" v-if="odds.ou">
                    <div class="title">大小盘数据</div>
                    <div>
                        <span>主胜{{ odds.ou[0] }}</span>
                        <span>指数{{ odds.ou[1] }}</span>
                        <span>客胜{{ odds.ou[2] }}</span>
                    </div>
                </div>
            </van-popup>
        </section>
        <!--支持率-->
        <section class="rate-box">

        </section>
        <!--球场动态-->
        <section class="map-box">
            <div class="map-title">球场动态</div>
            <div class="map-area">
                <div class="team-area">
                    <div class="logo1">
                        <img v-lazy="{src:game_info?.host_photo,error:getTeamLazyErrorLogo(game_detail.nm_home_team_logo)}" class="isLoaded">
                    </div>
                    <div class="logo2">
                        <img v-lazy="{src:game_info?.away_photo,error:getTeamLazyErrorLogo(game_detail.nm_away_team_logo)}" class="isLoaded">
                    </div>
                </div>
                <div class="charts-area">
                    <div class="time-list">
                        <div v-for="(time,index) in time_list" :key="time" class="line" :style="`left:${parseInt(time) * 100 / trend.maxTime}%`">
                            <span v-if="time == '45'" class="time2">HT</span>
                            <span v-else-if="index == time_list.length -1" class="time2">{{time}}</span>
                            <span v-else class="time">{{time}}</span>
                        </div>
                    </div>
                    <div class="label-top">
                        <div v-if="trend.incidents">
                            <template v-for="item in trend.incidents" :key="item.time">
                                <div v-if="item.position == 1" class="event-item" :style="`left:${parseInt(item.time) * 100 / trend.maxTime }%`">
                                    <svg-icon className="icon" :iconName="type[item.type].icon"></svg-icon>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div ref="trendChart" class="trend-map"></div>
                    <div class="label-bottom">
                        <div v-if="trend.incidents">
                            <template v-for="item in trend.incidents" :key="item.time">
                                <div v-if="item.position == 2" class="event-item" :style="`left:${parseInt(item.time) * 100 / trend.maxTime }%`">
                                    <svg-icon className="icon" :iconName="type[item.type].icon"></svg-icon>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--统计-->
        <section class="stats-box">
            <div v-if="tab_live.stats">
                <template v-for="(stat) in tab_live.stats" :key="stat.type">
                    <div v-if="stat.type == 25" class="stat-kongqiu">
                        <div class="content">
                            <div>{{stat.home}}%</div>
                            <div>{{type[stat.type].name}}</div>
                            <div>{{stat.away}}%</div>
                        </div>
                        <div class="bar">
                            <span class="home-bar" :style="`width: ${stat.home_rate}%;`"></span>
                            <span class="away-bar" :style="`width: ${stat.away_rate}%;`"></span>
                        </div>
                    </div>
                </template>
                <div class="stat-other">
                    <template v-for="(stat) in tab_live.stats" :key="stat.type">
                    <div v-if="stat.type != 25" class="stat-left">
                        <div class="content">
                            <div>{{stat.home}}</div>
                            <div>{{type[stat.type].name}}</div>
                            <div>{{stat.away}}</div>
                        </div>
                        <div class="bar">
                            <span class="home-bar" :style="`width: ${stat.home_rate}%;`"></span>
                            <span class="away-bar" :style="`width: ${stat.away_rate}%;`"></span>
                        </div>
                    </div>
                </template>
                </div>
                <div class="clear-fix"></div>
            </div>
        </section>
        <section class="live-box">
            <div class="match-tab">
                <div class="tab-name">直播方式</div>
                <div class="tab-sel">
                    <div class="around">
                        <p :class="tab_name == '文字' ? 'around-p active-p' : 'around-p'" @click="tab_name = '文字'">文字</p>
                        <p :class="tab_name == '事件' ? 'around-p active-p' : 'around-p'" @click="tab_name = '事件'">事件</p>
                        <!-- <p :class="tab_name == '直播' ? 'around-p active-p' : 'around-p'" @click="tab_name = '直播'">直播</p> -->
                    </div>
                </div>
            </div>
            <div class="live-tab">
                <div v-if="tab_name == '文字'">
                    <div v-if="tab_live.tlive">
                        <div class="live-list" v-for="(item,index) in tab_live.tlive" :key="index">
                            <div class="data">
                                <div class="icon" v-if="item.type == 0 || (item.type == 12 && item.data.indexOf('哨响') == -1)">
                                    <img src="../../assets/game/ren.png" />
                                </div>
                                <div class="icon" v-else-if="[10,11,12].includes(item.type)">
                                    <svg-icon iconName="bisaikaishi"></svg-icon>
                                </div>
                                <div class="icon" v-else-if="item.data.indexOf('点球') > -1">
                                    <svg-icon iconName="dianqiu"></svg-icon>
                                </div>
                                <div class="icon" v-else>
                                    <svg-icon :iconName="type[item.type].icon"></svg-icon>
                                </div>
                                {{item.data}}
                            </div>
                            <div class="position">
                                <img v-if="item.position == 1" class="logo" v-lazy="{src:game_info?.host_photo,error:getTeamLazyErrorLogo(game_detail.nm_home_team_logo)}">
                                <img v-if="item.position == 2" class="logo" v-lazy="{src:game_info?.away_photo,error:getTeamLazyErrorLogo(game_detail.nm_away_team_logo)}">
                            </div>
                        </div>
                    </div>
                    <div v-else class="no-live">
                        <img src="../../assets/game/pic_zanwushuju.png">
                        <div class="message">
                            暂无文字直播！
                        </div>
                    </div>
                </div>
                
                <div v-if="tab_name == '事件'">
                    <div v-if="tab_live.switch_incidents">
                        <div class="switch-qiu" @click="switchClick"><span>只看进球</span><van-switch v-model="switch_checked" size="16px" /></div>
                        <div class="live-title" v-if="game_info?.nm_status == 8">
                            <svg-icon className="icon" iconName="jieshu"></svg-icon>
                            <span>结束比赛</span>
                        </div>
                        <div class="incidents-list" v-for="(val,index) in tab_live.switch_incidents" :key="index">
                            <div class="incidents-center" v-if="val.position == 0 && val.type != 12">{{type[val.type].name}}</div>
                            <div class="incidents-left" v-if="val.position == 1">
                                <div class="icon-time">
                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                    <div class="time">{{getTime(val.time)}}</div>
                                </div>
                                <div class="line">|</div>
                                <!--换人-->
                                <template v-if="val.type == 9">
                                    <div>
                                        <div>换上：{{getName(val.in_player_name)}}</div>
                                        <div class="reason">换下：{{getName(val.out_player_name)}}
                                            <span v-if="val.reason_type"> |
                                            {{reason_type[val.reason_type]?.indexOf('/') > 0 ?
                                            reason_type[val.reason_type]?.split("/")[1].substr(0,4) :
                                            reason_type[val.reason_type]}}
                                            </span>
                                        </div>
                                    </div>
                                </template>
                                <!--球-->
                                <template v-else-if="[1,2,7,8,16,17,21,22,29,30].includes(val.type)">
                                    <div>
                                        <div v-if="val.home_score >=0 && val.away_score >= 0">{{val.home_score}} - {{val.away_score}}</div>
                                        <div v-if="val.player_name">{{getName(val.player_name)}}<span class="reason" v-if="val.assist1_name || val.assist2_name"> | 助攻：{{getName(val.assist1_name || val.assist2_name)}}</span></div>
                                        <div v-else>球队：{{game_info?.host_name}}</div>
                                    </div>
                                </template>
                                <!--犯规-->
                                <template v-else-if="val.type || val.reason_type">
                                    <div>
                                        <div>{{getName(val.player_name)}}</div>
                                        <div class="reason">{{reason_type[val?.reason_type] || '犯规'}}</div>
                                    </div>
                                </template>
                            </div>
                            <div class="incidents-right" v-if="val.position == 2">
                                <!--换人-->
                                <template v-if="val.type == 9">
                                    <div>
                                        <div>换上：{{getName(val.in_player_name)}}</div>
                                        <div class="reason">换下：{{getName(val.out_player_name)}}
                                            <span v-if="val.reason_type"> |
                                            {{reason_type[val.reason_type]?.indexOf('/') > 0 ?
                                            reason_type[val.reason_type]?.split("/")[1].substr(0,4) :
                                            reason_type[val.reason_type]}}
                                            </span>
                                        </div>
                                    </div>
                                </template>
                                <!--球-->
                                <template v-else-if="[1,2,7,8,16,17,21,22,29,30].includes(val.type)">
                                    <div >
                                        <div v-if="val.home_score >=0 && val.away_score >= 0">{{val.home_score}} - {{val.away_score}}</div>
                                        <div v-if="val.player_name">{{getName(val.player_name)}}<span class="reason" v-if="val.assist1_name || val.assist2_name"> | 助攻：{{getName(val.assist1_name || val.assist2_name)}}</span></div>
                                        <div v-else>球队：{{game_info?.away_name}}</div>
                                    </div>
                                </template>
                                <!--犯规-->
                                <template v-else-if="val.type || val.reason_type">
                                    <div>
                                        <div>{{getName(val.player_name)}}</div>
                                        <div class="reason">{{reason_type[val?.reason_type] || '犯规'}}</div>
                                    </div>
                                </template>
                                <div class="line">|</div>
                                <div class="icon-time">
                                    <svg-icon className="icon" :iconName="type[val.type].icon"></svg-icon>
                                    <div class="time">{{getTime(val.time)}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="live-title">
                            <svg-icon className="icon" iconName="bisaikaishi"></svg-icon>
                            <span>开始比赛</span>
                        </div>
                    </div>
                    <div v-else class="no-live">
                        <img src="../../assets/game/pic_zanwushuju.png">
                        <div class="message">
                            暂无事件！
                        </div>
                    </div>
                </div>
                
                <!-- <div v-if="tab_name == '直播'">
                    <div style="line-height: 100px;text-align: center;">请下载app观看！</div>
                </div> -->
            </div>
            <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>
        </section>
    </van-pull-refresh>
</template>
  
<script lang="ts">
import { ref,onMounted,onUnmounted,toRef, watch} from 'vue';
import * as nm_match_api from '@/api/nm_match_api';
import { nm_type, nm_reason_type } from '@/common/js/nm_config';
import { useRoute,onBeforeRouteUpdate } from 'vue-router';
import { default as _ } from 'lodash';
import * as echarts from 'echarts';
import { default as moment } from 'moment';
import { events } from '@/until/eventBus';
import { getTeamLazyErrorLogo } from '@/until/index';

export default{
    name:'GameSituationNm',
    props: { 
        gameInfo: {
            type: Object,
            default: () => { return {}; }
        },
        gameLive: {
            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_live:any = toRef(props,'gameLive');
        const game_detail:any = toRef(props,'gameDetail')
        const tab_live:any = ref({
            tlive:null,//文字
            incidents:null,//事件
            switch_incidents:null,
            stats:null,//统计
        })
        const odds:any = ref({
            hda:null,
            ah:null,
            ou:null
        });
        const trend:any = ref({
            incidents:null,
            data:null,
            maxTime:95,
        });
        const status_id:any = 1;//未开赛
        const time_list:any = ref(["0'","15'","30'","45","60'","75'","90'"]);
        const reason_type:any = ref(nm_reason_type);
        const type:any = ref(nm_type);
        const icon_list = ref([
            {type:1,icon:"jinqiu",text:"进球",order:1},
            {type:21,icon:"shezheng",text:"射正",order:2},
            {type:22,icon:"shepian",text:"射偏",order:3},
            {type:8,icon:"dianqiu",text:"点球",order:4},
            {type:16,icon:"dianqiuweijin",text:"点球未进",order:5},
            {type:17,icon:"wulongqiu",text:"乌龙球",order:6},
            {type:2,icon:"jiaoqiu",text:"角球",order:7},
            {type:3,icon:"huangpai",text:"黄牌",order:8},
            {type:4,icon:"hongpai",text:"红牌",order:9},
            {type:15,icon:"lianghuangbianhong",text:"两黄一红",order:10},
            {type:9,icon:"huanren",text:"换人",order:11},
            {type:28,icon:"var",text:"VAR",order:12},
            {type:18,icon:"zhugong",text:"助攻",order:13},
            {type:5,icon:"yuewei",text:"越位",order:14},
        ]);
        const stat_type_order_arr = [25,23,24,21,22,2,8,3,4];
        const loading = ref(false);
        const switch_checked = ref(false);
        const odds_more = ref(false);
        const tab_name = ref("文字");
        const trendChart:any = ref(null)  
        let instanceChart:any = null  
        const trend_timer:any = ref(null);

        const init_data = async() => {
            // if(props.activeName || route.name == "GameSituationNm"){
                await getDataNm();
                if(trend.value.data){
                    window.setTimeout(initChart, 100);
                }
            // }
        };

        onMounted(() => {init_data();});

        onBeforeRouteUpdate(async (to:any, from:any) => {
            // console.log('路由正在更新',to,from);
            let from_time = from?.query?.t;
            let to_time = to?.query?.t;
            
            // 如果不是同一场比赛，则直接使用以前逻辑
            if(from?.query?.yiqiuid != to?.query?.yiqiuid){
                return
            }
            
            if(from_time && to_time && parseInt(from_time)+1000 < parseInt(to_time)){
                // console.info(`正在更新数据`, game_detail.value.id);
                // 检查是否是进行中的比赛, 除结束、异常比赛外，都应该更新数据
                if([1, 2, 3, 4, 5, 6, 7].indexOf(game_detail.value.status_id) > -1){
                    // await getData();
                    await init_data();
                }
            }
        });

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

        onUnmounted(() => {
            if (instanceChart && !instanceChart.isDisposed()) {  
                instanceChart.dispose()  
            }  
            if(trend_timer.value){
                clearInterval(trend_timer.value);
            }
        }); 

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

        const getDataNm = async()=>{
            let yiqiu_id = game_info?.value?.id || route.query.yiqiuid || route.params.yiqiuid;
            if(game_info?.value?.odds){
                let game_odds:any = game_info?.value?.odds['3000181'];//Bet365
                if(game_odds?.asia)
                    odds.value.ah = game_odds?.asia;
                if(game_odds?.eu)
                    odds.value.hda = game_odds?.eu;
                if(game_odds?.bs)
                    odds.value.ou = game_odds?.bs;
            }
            if(!game_detail.value){
                let nm_result = await nm_match_api.nm_match_detail({yiqiu_id: yiqiu_id});
                game_detail.value = nm_result;
            }
            if(game_detail.value){
                loading.value = false;
                let nm_result = game_detail.value;

                if(nm_result?.lineup){
                    events.emit('lineup', {lineup:nm_result.lineup, status_id:nm_result.status_id});
                }

                if(nm_result.live){
                    tab_live.value.tlive = _.reverse(nm_result?.live?.tlive);
                    tab_live.value.incidents = _.reverse(nm_result?.live?.incidents);
                    tab_live.value.switch_incidents = nm_result?.live?.incidents;
                    if(nm_result?.live?.stats){
                        let stats = nm_result?.live?.stats;
                        for(let item of stats){
                            const sum = item.home + item.away;
                            if (sum > 0) { // 防止除零
                                item.home_rate = ((item.home / sum) * 100).toFixed(2);
                                item.away_rate = ((item.away / sum) * 100).toFixed(2);
                            }
                        }
                        tab_live.value.stats = stats.sort(compareItems);
                    }
                }else{
                    await getLiveDataNm();
                }

                // if(nm_result?.odds){
                //     if(nm_result?.odds[0])
                //         odds.value.ah = nm_result?.odds[0]?.split(",");
                //     if(nm_result?.odds[1])
                //         odds.value.hda = nm_result?.odds[1]?.split(",");
                //     if(nm_result?.odds[2])
                //         odds.value.ou = nm_result?.odds[2]?.split(",");
                // }

                if(nm_result?.trend){
                    trend.value.incidents = nm_result.trend?.incidents;
                    trend.value.data = nm_result.trend?.data;
                    setMaxTime(trend.value.data);
                }else if(moment() > moment(game_info.value?.match_time)){
                    await getTrendDataNm();
                }

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

        

        const getLiveDataNm = async()=>{
            let nm_result = await nm_match_api.nm_match_live_detail({yiqiu_id: game_info?.value?.id || route.query.yiqiuid});
            // console.info("nm_result",nm_result)
            if(nm_result){
                //position:事件发生方，0-中立、1-主队、2-客队
                //main:是否重要事件，1-是、0-否
                tab_live.value.tlive = _.reverse(nm_result?.tlive);
                tab_live.value.incidents = _.reverse(nm_result?.incidents);
                switchClick();
                if(nm_result?.stats){
                    let stats = nm_result?.stats;
                    for(let item of stats){
                        let sum = item.home + item.away;
                        item.home_rate = (item.home/sum * 100).toFixed(2);
                        item.away_rate = (item.away/sum * 100).toFixed(2);
                    }
                    tab_live.value.stats = stats.sort(compareItems); 
                }
            }
        };

        const getTrendDataNm = async() => {
            let nm_result = await nm_match_api.nm_match_trend({yiqiu_id: game_info?.value?.id || route.query.yiqiuid});
            if(nm_result){
                trend.value.incidents = nm_result?.incidents;
                trend.value.data = nm_result?.data;
                setMaxTime(trend.value.data);
            }
        }

        // 自定义比较函数  
        const compareItems= (a:any, b:any) => {  
            const aIndex = stat_type_order_arr.indexOf(a.type);  
            const bIndex = stat_type_order_arr.indexOf(b.type);  
            
            // 如果两个元素在orderArray中都不存在，则按照默认顺序（例如升序）排序  
            if (aIndex === -1 && bIndex === -1) {  
                return a.id - b.id; // 或者你可以根据其他字段排序  
            }  
            
            // 如果一个元素在orderArray中存在，另一个不存在，则存在的元素排在前面  
            if (aIndex === -1) return 1;  
            if (bIndex === -1) return -1;  
            
            // 如果两个元素都在orderArray中，则按照orderArray中的顺序排序  
            return aIndex - bIndex;  
        } 

        //nm轮询比赛
        const getIntervalTrend = (nm_status:any) => {
            // console.info("status" , '开始进入', nm_status)
            if(nm_status){
                if (nm_status == 1) {
                    trend_timer.value = setInterval(async function () {
                        await getTrendDataNm();
                        await getLiveDataNm();
                    },  60 * 2 * 1000);
                }else if([2, 4, 5, 7].indexOf(nm_status) > -1){
                    trend_timer.value = setInterval(async function () {
                        // console.info("status" , 'NM比赛开打啦！')
                        await getTrendDataNm();
                        if(trend.value.data){
                            window.setTimeout(initChart, 100);
                        }
                        await getLiveDataNm();
                    }, 30 * 1000);
                }else{
                    clearInterval(trend_timer);
                }
            }
        }

        //画图
        const initChart = () => {
            let trend_data = _.concat(trend.value.data[0],trend.value.data[1]);
            let trend_up:any = [];
            let trend_down:any = [];
            if(trend_data){
                for(var data of trend_data){
                    if(data >= 0){
                        trend_up.push(data)
                        trend_down.push(0)
                    }else{
                        trend_up.push(0)
                        trend_down.push(data)
                    }
                }
            }
            var xAxisData = [];
            var maxTime:any = trend_data.length < 90 || status_id.value >= 8  ? 90 : trend_data.length;
            for(var j=1;j<=maxTime;j++){
                xAxisData.push(j);
            }
            var echarts1_option:any = {
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#f1fff1' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#f8faff' // 100% 处的颜色
                    }],
                },
                
                grid: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: !1,
                        show: !1,
                        data: xAxisData,
                    },
                    yAxis: {
                        type: "value",
                        show: !1,
                        min: -120,
                        max: 120
                    },
                    series: [
                        {
                            data: trend_up,
                            type: "line",
                            show: !1,
                            color: "#05BA48",
                            areaStyle: {
                                color: "#05BA48"
                            },
                            symbol: "none",
                            barCategoryGap: '0%',  
                            barGap: '0%'
                        },
                        {
                            data: trend_down,
                            type: "line",
                            show: !1,
                            color: "#1E7BCD",
                            areaStyle: {
                                color: "#1E7BCD"
                            },
                            symbol: "none",
                            barCategoryGap: '0%',  
                            barGap: '0%'
                        }
                    ]
            };
            if(instanceChart){
                instanceChart.setOption(echarts1_option),
                instanceChart.resize();
            }else{
                instanceChart = trendChart?.value && echarts.init(trendChart.value) 
                instanceChart.setOption(echarts1_option)
            }
        };

        //只看球
        const switchClick = () =>{
            if(switch_checked.value){
                tab_live.value.switch_incidents = _.filter(tab_live.value.incidents,(item) => [1,8,17].includes(item.type))
            }else{
                tab_live.value.switch_incidents = tab_live.value.incidents
            }
        }

        const setMaxTime = (trend_data:any) => {
            if(trend_data){
                trend_data = _.concat(trend_data[0],trend_data[1]);
                if(trend_data.length > 105){
                    time_list.value = ["0'","15'","30'","45","60'","75'","90'","105'"];
                    trend.value.maxTime = 110;
                }
                if(trend_data.length >= 120){
                    time_list.value = ["0'","15'","30'","45","60'","75'","90'","105'","120'",`${trend_data.length}'`];
                    trend.value.maxTime = 130;
                }
            }
        }

        const getName = (name:any) => {
            if(name?.indexOf("·") > -1){
                let names = name?.split('·')
                name = names[names.length-1];
            }
            return name;
        }

        const getTime = (time:any) => {
            return time + '’';
        }

        const showType = function(t:any) {
                return !![1, 2, 3, 4, 8, 9, 15, 16, 17].includes(t)
        }

        return{
            loading,
            switch_checked,
            odds_more,
            tab_name,
            tab_live,
            odds,
            trend,
            game_info,
            game_live,
            game_detail,
            icon_list,
            type,
            reason_type,
            time_list,
            onRefresh,
            getName,
            getTime,
            showType,
            initChart,
            switchClick,
            trendChart,
            getTeamLazyErrorLogo
        }
    }
}
</script>
<style lang="scss" scoped>
@use '@/common/style/common' as *;

.odds-box{
    width: 100%;
    background: #fff;
    position: relative;
    .odds-title{
        text-align: center;
        font-size: 14px;
        padding-top: 10px;
    }
    .odds-content{
        background-color: #f7f7f7;
        margin:0 10px;
        padding:0 10px;
        border-radius: 5px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .odds{
            font-weight: 500;
            color:#000;
        }
    }
    
}
.map-box {
    width: 100%;
    margin-bottom: 2.667vw;
    background-color: #fff;
    padding-top: 10px;
    font-size: 14px;
    .map-title{
        text-align: center;
    }
    .map-area{
        width: 100%;
        margin-bottom: 10px;
        padding-bottom: 10px;
        background-color: #fff;
        display: block;
        display: -moz-box;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        max-width: 769px;
        .team-area{
            width: 40px;
            height: 125px;
            padding-top:40px;
            .logo1,.logo2{
                width: 28px;
                height: 28px;
                overflow: hidden;
                text-align: center;
                margin: 10px auto;
                img{
                    width: 28px;
                    height: auto;
                }
            }
        }
        .charts-area{
            width:calc(100% - 40px);
            height:60px;
            position: relative;
            margin:10px auto;
            .time-list{
                height: 20px;
                line-height: 20px;
                margin-left: -6px;
                width: 100%;
                max-width: 769px;
                min-width: 320px;
                position: absolute;
                .line{
                    position: absolute;
                    top:0;
                    z-index: 19;
                    .time{
                        color:#bbb;
                        font-size: 12px;
                    }
                    .time2{
                        color:#05BA48;
                    }
                }
            }
            .trend-map{
                width:98%;
                max-width: 769px;
                min-width: 320px;
                height: 60px;
            }
            .label-top{
                margin-top: 20px;
            }
            .label-top,.label-bottom{
                position: relative;
                height: 20px;
                line-height: 30px;
                width: 100%;
                .icon{
                    width:10px;
                    height:10px;
                }
                .event-item{
                    position: absolute;
                    top:-5px;
                    z-index: 20;
                    img{
                        width: 15px;
                    }
                }
            }
        }
    }
}
.stats-box{
    width: 100%;
    padding:10px;
    font-size: 14px;
    background-color: #fff;
    position: relative;
    .stat-other{
        width: 100%;
        margin:0 auto;
        .stat-left{
            float: left;
            width: 48%;
        }
        .stat-left:nth-child(2n){
            margin-left: 4%;
        }
    }
    .content{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
    }
    .bar{
        position: relative;
        width: 100%;
        height: 5px;
        background-color: #FF6E6E;
        border-radius: 5px;
        line-height: 20px;
        .home-bar{
            position: absolute;
            z-index: 2;
            background-color: #2DCED7;
            height: 5px;
            left:0;
        }
        .away-bar{
            position: absolute;
            z-index: 2;
            background-color: #FF6E6E;
            height: 5px;
            right:0;
        }
    }
    
}
.live-box{
    position: relative;
    background-color: #fff;
    width: 100%;
    font-size: 14px;
    .match-tab {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tab-name {
            font-size: 16px;
            font-weight: 500;
        }

        .tab-sel {
            color: var(--color-999999);
            text-align: center;
            justify-content: center;

            .around {
                display: flex;
                padding: 1px;
                box-sizing: border-box;
                background: #E7EEF7;
                @include border-radius(15px);
                overflow: hidden;
            }

            .around-p {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #777777;
                line-height: 30px;
                width: 60px;
                margin: 2px 3px;
            }

            .active-p {
                background: #fff;
                color: #227AFF;
                box-shadow: 0px 1 4px 0px rgba(34, 122, 255, 0.3);
                @include border-radius(15px);
                overflow: hidden;
            }
        }
    }
    .live-tab{
        // text-align: left;
        margin-bottom: 20px;
        width: 100%;
        .icon{
            width:16px;
            height:16px;
        }
        .live-list{
            margin:10px 10px 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            .data{
                background-color: #f7f7f7;
                width: 90%;
                padding:10px 10px 10px 20px;
                border-radius: 5px;
                text-align: justify;
                white-space: normal;
                overflow-wrap: break-word;
                .icon{
                    width: 24px;
                    position: absolute;
                    left: -10px;
                }
            }
            .position img{
                width: 24px;
            }
        }
        .no-live{
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: 30px;
            box-sizing: border-box;
            img{
                width: 40%;
            }
            .message{
                padding-top: 10px;
                font-size: 14px;
            }
        }
    }
    .live-title{
        width: 30%;
        height: 24px;
        line-height: 24px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50px;
        font-size: 12px;
        color: #666;
        @include flex-center;
        span{
            padding-left: 5px;
        }
    }
    .switch-qiu{
        width: 100%;
        line-height: 30px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        span{
            padding-right: 8px;
        }
    }
    .incidents-list{
        padding: 0 10px;
        width:100%;
        .incidents-center{
            width: 25%;
            height: 24px;
            line-height: 24px;
            margin: 10px auto;
            border: 1px solid #ccc;
            border-radius: 50px;
            text-align: center;
            font-size: 12px;
            color: #666;
            background-color: #fff;
        }
        .incidents-left{
            background-color: #fff;
            display: flex;
            justify-content: flex-start;
            align-items:center;
            padding:5px 10px;
            width: 100%;
            div{
                text-align: left;
            }
        }
        .incidents-right{
            background-color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items:center;
            padding:5px 10px;
            width: 100%;
            div{
                text-align: right;
            }
        }
        .time,.reason{
            color: #666;
            font-size: 12px;
        }
        .icon-time{
            width: 16px;
        }
        .line{
            color:#fff;
            width: 1px;
            height:30px;
            line-height: 30px;
            border-right: solid 1px #e6e6e6;
            margin:0 10px;
        }
    }
}
.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;
        justify-content: flex-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>