<!-- 分析 -->
<template>
  <van-pull-refresh  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> 
    <div v-if="gameInfo">
      <div class="rate-content" v-if="odds_eu">
        <div class="top">
          <div>球友支持率<span class="look">（点击下面投票查看全部）</span></div>
        </div>
        <div class="rate" v-if="!toupiao.is_show">
          <div class="win" @click="toupiaoClick('win')">主胜({{toupiao?.win_num}}%)</div>
          <div class="draw" @click="toupiaoClick('draw')">平(?%)</div>
          <div class="lose" @click="toupiaoClick('lose')">负(?%)</div>
        </div>
        <div class="rate" v-else>
          <div class="win">主胜({{ toupiao.win_num }}%)</div>
          <div class="draw">平({{ toupiao.draw_num }}%)</div>
          <div class="lose">负({{ toupiao.lose_num }}%)</div>
        </div>
      </div>
      <div class="match_content" style="padding-top:0px;">
        <!--战绩 开始-->
        <div class="tab1">
          <!-- 积分对比 -->
          <section class="section_1 border_8"
            v-if="data.Standings && (data.Standings.Home['Total'][7] > 0 || data.Standings.Away['Total'][7] > 0)">
            <div class="title_1">
              <div>积分对比</div>
              <div class="btn_arr">
                <span :class="state.jfdb_key == 'Total' ? 'spanActive' : ''" @click="state.jfdb_key = 'Total'">主客</span>
                <span :class="state.jfdb_key == 'Home' ? 'spanActive' : ''" @click="state.jfdb_key = 'Home'">主场</span>
                <span :class="state.jfdb_key == 'Away' ? 'spanActive' : ''" @click="state.jfdb_key = 'Away'">客场</span>
              </div>
            </div>
            <van-skeleton title :row="3" :loading="state.loading">
              <div class="box_1">
                <div class="row_1">
                  <div>
                    <div>主队</div>
                    <div class="fen-text">
                      <span>{{ data.Standings.Home[state.jfdb_key][7] &&
                        data.Standings.Home[state.jfdb_key][7].match(/\(.*?\)/g, '') != null ?
                        data.Standings.Home[state.jfdb_key][7].replace(/\(.*?\)/g, '') :
                        data.Standings.Home[state.jfdb_key][7] }}</span>
                    </div>
                  </div>
                  <div class="col_1">
                    <div class="">
                      <span>{{ data.Standings.Home[state.jfdb_key][1] }}胜</span>
                      <span class="color-red"></span>
                    </div>
                    <div>
                      <span>{{ data.Standings.Home[state.jfdb_key][2] }}平</span>
                      <span class="color-green"></span>
                    </div>
                    <div class="">
                      <span>{{ data.Standings.Home[state.jfdb_key][3] }}负</span>
                      <span class="color-blue"></span>
                    </div>
                  </div>
                </div>
                <div class="row_1">
                  <div>
                    <div>客队</div>
                    <div class="fen-text">
                      <span>{{ data.Standings.Away[state.jfdb_key][7] &&
                        data.Standings.Away[state.jfdb_key][7].match(/\(.*?\)/g, '') != null ?
                        data.Standings.Away[state.jfdb_key][7].replace(/\(.*?\)/g, '') :
                        data.Standings.Away[state.jfdb_key][7] }}</span>
                    </div>
                  </div>
                  <div class="col_1">
                    <div class="">
                      <span>{{ data.Standings.Away[state.jfdb_key][1] }}胜</span>
                      <span class="color-red"></span>
                    </div>
                    <div>
                      <span>{{ data.Standings.Away[state.jfdb_key][2] }}平</span>
                      <span class="color-green"></span>
                    </div>
                    <div class="">
                      <span>{{ data.Standings.Away[state.jfdb_key][3] }}负</span>
                      <span class="color-blue"></span>
                    </div>
                  </div>
                </div>
              </div>
            </van-skeleton>
          </section>

          <!-- 历史交锋 -->
          <section class="section_2 border_8" v-if="data.Meeting.list">
            <div class="title_1">
              <div class=""><img :src="game_info.host_photo || game_info.host_team?.logo"
                  onerror="src='https://img2.ydniu.com/app/images/team_logo.png'">
              </div>
              <div style="display:flex;flex-flow: column;">
                <div>历史交锋</div>
                <div>
                  <span>近10场&nbsp;{{ game_info.host_name || game_info.host_team?.short_name }}&nbsp;</span>
                  <span class="red">{{ data.Meeting.WDL.w_num }}胜</span>
                  <span class="green">{{ data.Meeting.WDL.d_num }}平</span>
                  <span class="blue">{{ data.Meeting.WDL.l_num }}负</span>
                </div>
              </div>
              <div class="">
                <img :src="game_info.away_photo || game_info.away_team?.logo" onerror="src='https://img2.ydniu.com/app/images/team_logo.png'">
              </div>
            </div>
            <div class="box_2 title_3">
              <div>赛事</div>
              <div class="col_center">
                <div>主</div>
                <div>比分(半场)</div>
                <div>客</div>
              </div>
              <div>
                <span class="switch_title" @click="switchTitleClick">{{state.switch_title_list[state.switch_index]}}</span>
              </div>
            </div>
            <van-skeleton title :row="10" :loading="state.loading">
              <div class="history_1" v-for="(item, index) in data.Meeting.list" :key="index">
                <div class="box_2" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                  <div class="col_time">
                    <div>{{ data.Competition[item.Id[1]].ShortName }}</div>
                    <div>{{ formatDate(item.Date) }}</div>
                  </div>
                  <div class="col_center">
                    <div class="name_home"><span :style="item.txtColor_home">{{ item.HomeName }}</span></div>
                    <div class="score_box">
                      <span class="all_score">{{ item.Score[0] }}:{{ item.Score[1] }}</span>
                      <span class="half_score" v-if="item.Half">({{ item.Half }})</span>
                    </div>
                    <div class="name_away"><span :style="item.txtColor_away">{{ item.AwayName }}</span></div>
                  </div>
                  <div>
                    <span class="win_draw_lose" :style="item.switch_bgColor[state.switch_index]" @click="switchTitleClick">{{ item.switch_result[state.switch_index] }}</span>
                  </div>
                </div>
              </div>
            </van-skeleton>
          </section>

          <!-- 主队交锋 -->
          <section class="section_3 border_8" v-if="data.HomeHistory.list">
            <div class="title_2">
              <div class=""><img :src="game_info.host_photo || game_info.host_team?.logo"
                  onerror="src='https://img2.ydniu.com/app/images/team_logo.png'">
              </div>
              <div style="display:flex;flex-flow: column;padding-left:20px;">
                <div>
                  <span class="name">{{ game_info.host_name || game_info.host_team?.short_name }}</span>
                  <span>&nbsp;近{{ data.HomeHistory.WDL.total_num }}场&nbsp;</span>
                  <span class="red">{{ data.HomeHistory.WDL.w_num }}胜</span>
                  <span class="green">{{ data.HomeHistory.WDL.d_num }}平</span>
                  <span class="blue">{{ data.HomeHistory.WDL.l_num }}负</span>
                </div>
                <div style="font-size:12px;color:#888;">{{ game_info.host_name || game_info.host_team?.short_name }}在各项赛事中已经
                  <span style="color:#6f83fc;">
                    <span class="red"
                      v-if="data.HomeHistory.WDL.w_double">{{ data.HomeHistory.WDL.w_double }}{{ data.HomeHistory.WDL.w_double
                        == 2 ? '连' : '' }}胜</span>
                    <span class="green"
                      v-if="data.HomeHistory.WDL.d_double">{{ data.HomeHistory.WDL.d_double }}{{ data.HomeHistory.WDL.d_double
                        == 2 ? '连' : '' }}平</span>
                    <span class="blue"
                      v-if="data.HomeHistory.WDL.l_double">{{ data.HomeHistory.WDL.l_double }}{{ data.HomeHistory.WDL.l_double
                        == 2 ? '连' : '' }}负</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="box_btn">
              <div class="item_btn">
                <div class="s_10_20">
                  <span :class="state.host_num == 10 ? 'btnActive' : ''"
                    @click="HomeAwayClick('HomeHistory', 10, state.same_type.host)">10场</span>
                  <span :class="state.host_num == 20 ? 'btnActive' : ''"
                    @click="HomeAwayClick('HomeHistory', 20, state.same_type.host)">20场</span>
                </div>
              </div>
              <div class="item_btn">
                <div class="s_match_team">
                  <span :class="state.same_type.host == 'SameCompetition' ? 'btnActive' : ''"
                    @click="HomeAwayClick('HomeHistory', state.host_num, 'SameCompetition')">同赛事</span>
                  <span :class="state.same_type.host == 'SameHomeAway' ? 'btnActive' : ''"
                    @click="HomeAwayClick('HomeHistory', state.host_num, 'SameHomeAway')">同主客</span>
                </div>
              </div>
            </div>
            <div class="box_2 title_3">
              <div>赛事</div>
              <div class="col_center">
                <div>主</div>
                <div>比分(半场)</div>
                <div>客</div>
              </div>
              <div>
                <span class="switch_title" @click="switchTitleClick">{{state.switch_title_list[state.switch_index]}}</span>
              </div>
            </div>
            <div class="history_2" v-for="(item, index) in data.HomeHistory.list" :key="index">
              <div class="box_2" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                <div class="col_time">
                  <div>{{ data.Competition[item.Id[1]].ShortName }}</div>
                  <div>{{ formatDate(item.Date) }}</div>
                </div>
                <div class="col_center">
                  <div class="name_home"><span :style="item.txtColor_home">{{ item.HomeName }}</span></div>
                  <div class="score_box">
                    <span class="all_score">{{ item.Score[0] }}:{{ item.Score[1] }}</span>
                    <span class="half_score" v-if="item.Half">({{ item.Half }})</span>
                  </div>
                  <div class="name_away"><span :style="item.txtColor_away">{{ item.AwayName }}</span></div>
                </div>
                <div>
                    <span class="win_draw_lose" :style="item.switch_bgColor[state.switch_index]" @click="switchTitleClick">{{ item.switch_result[state.switch_index] }}</span>
                  </div>
              </div>
            </div>
          </section>

          <!-- 客队交锋 -->
          <section class="section_4 border_8" v-if="data.AwayHistory.list">
            <div class="title_2">
              <div class=""><img :src="game_info.away_photo || game_info.away_team?.logo"
                  onerror="src='https://img2.ydniu.com/app/images/team_logo.png'">
              </div>
              <div style="display:flex;flex-flow: column;padding-left:20px;">
                <div>
                  <span class="name">{{ game_info.away_name || game_info.away_team?.short_name }}</span>
                  <span>&nbsp;近{{ data.AwayHistory.WDL.total_num }}场&nbsp;</span>
                  <span class="red">{{ data.AwayHistory.WDL.w_num }}胜</span>
                  <span class="green">{{ data.AwayHistory.WDL.d_num }}平</span>
                  <span class="blue">{{ data.AwayHistory.WDL.l_num }}负</span>
                </div>
                <div style="font-size:12px;color:#888;">
                  {{ game_info.away_name || game_info.away_team?.short_name }}在各项赛事中已经
                  <span style="color:#6f83fc;">
                    <span class="red"
                      v-if="data.AwayHistory.WDL.w_double">{{ data.AwayHistory.WDL.w_double }}{{ data.AwayHistory.WDL.w_double
                        == 2 ? '连' : '' }}胜</span>
                    <span class="green"
                      v-if="data.AwayHistory.WDL.d_double">{{ data.AwayHistory.WDL.d_double }}{{ data.AwayHistory.WDL.d_double
                        == 2 ? '连' : '' }}平</span>
                    <span class="blue"
                      v-if="data.AwayHistory.WDL.l_double">{{ data.AwayHistory.WDL.l_double }}{{ data.AwayHistory.WDL.l_double
                        == 2 ? '连' : '' }}负</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="box_btn">
              <div class="item_btn">
                <div class="s_10_20">
                  <span :class="state.away_num == 10 ? 'btnActive' : ''"
                    @click="HomeAwayClick('AwayHistory', 10, state.same_type.away)">10场</span>
                  <span :class="state.away_num == 20 ? 'btnActive' : ''"
                    @click="HomeAwayClick('AwayHistory', 20, state.same_type.away)">20场</span>
                </div>
              </div>
              <div class="item_btn">
                <div class="s_match_team">
                  <span :class="state.same_type.away == 'SameCompetition' ? 'btnActive' : ''"
                    @click="HomeAwayClick('AwayHistory', state.away_num, 'SameCompetition')">同赛事</span>
                  <span :class="state.same_type.away == 'SameHomeAway' ? 'btnActive' : ''"
                    @click="HomeAwayClick('AwayHistory', state.away_num, 'SameHomeAway')">同主客</span>
                </div>
              </div>
            </div>
            <div class="box_2 title_3">
              <div>赛事</div>
              <div class="col_center">
                <div>主</div>
                <div>比分(半场)</div>
                <div>客</div>
              </div>
              <div>
                <span class="switch_title" @click="switchTitleClick">{{state.switch_title_list[state.switch_index]}}</span>
              </div>
            </div>
            <div class="history_3" v-for="(item, index) in data.AwayHistory.list" :key="index">
              <div class="box_2" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                <div class="col_time">
                  <div>{{ data.Competition[item.Id[1]].ShortName }}</div>
                  <div>{{ formatDate(item.Date) }}</div>
                </div>
                <div class="col_center">
                  <div class="name_home"><span :style="item.txtColor_home">{{ item.HomeName }}</span></div>
                  <div class="score_box">
                    <span class="all_score">{{ item.Score[0] }}:{{ item.Score[1] }}</span>
                    <span class="half_score" v-if="item.Half">({{ item.Half }})</span>
                  </div>
                  <div class="name_away"><span :style="item.txtColor_away">{{ item.AwayName }}</span></div>
                </div>
                <div>
                    <span class="win_draw_lose" :style="item.switch_bgColor[state.switch_index]" @click="switchTitleClick">{{ item.switch_result[state.switch_index] }}</span>
                  </div>
              </div>
            </div>
          </section>

          <!-- 未来赛事 主队 -->
          <section class="section_5 border_8" v-if="data.HomeFixture">
            <div class="title_1"></div>
            <div class="box_2 title_3">
              <div>赛事</div>
              <div class="col_center">
                <div>主</div>
                <div>VS</div>
                <div>客</div>
              </div>
              <div>
                <span>相隔</span>
              </div>
            </div>
            <div class="history_4" v-for="(item, index) in data.HomeFixture" :key="index">
              <div class="box_2" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                <div class="col_time">
                  <div>{{ data.Competition[item.Id[1]].ShortName }}</div>
                  <div>{{ formatDate(item.Date) }}</div>
                </div>
                <div class="col_center">
                  <div class="name_home"><span>{{item.HomeName}}</span></div>
                  <div class="score_box">
                    <span class="all_score">VS</span>
                  </div>
                  <div class="name_away"><span>{{item.AwayName}}</span></div>
                </div>
                <div>
                  <span>{{formatDay(item.Date)}}天</span>
                </div>
              </div>
            </div>
          </section>

          <!-- 未来赛事 客队 -->
          <section class="section_6" v-if="data.AwayFixture">
            <div class="title_1"></div>
            <div class="box_2 title_3">
              <div>赛事</div>
              <div class="col_center">
                <div>主</div>
                <div>VS</div>
                <div>客</div>
              </div>
              <div>
                <span>相隔</span>
              </div>
            </div>
            <div class="history_4" v-for="(item, index) in data.AwayFixture" :key="index">
              <div class="box_2" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                <div class="col_time">
                  <div>{{ data.Competition[item.Id[1]].ShortName }}</div>
                  <div>{{ formatDate(item.Date) }}</div>
                </div>
                <div class="col_center">
                  <div class="name_home"><span>{{item.HomeName}}</span></div>
                  <div class="score_box">
                    <span class="all_score">VS</span>
                  </div>
                  <div class="name_away"><span>{{item.AwayName}}</span></div>
                </div>
                <div>
                  <span>{{formatDay(item.Date)}}天</span>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!--战绩 结束-->
        <!--积分 开始-->
        <div class="tab2">
          <!-- 赛前积分 -->
          <section class="section_7 border_8"
            v-if="data.Standings && (data.Standings.Home['Total'][7] > 0 || data.Standings.Away['Total'][7] > 0)">
            <div class="title_1">
              <div>赛前积分</div>
              <div class="btn_arr">
                <span :class="state.sqjf_key == 'Total' ? 'spanActive' : ''" @click="state.sqjf_key = 'Total'">主客</span>
                <span :class="state.sqjf_key == 'Home' ? 'spanActive' : ''" @click="state.sqjf_key = 'Home'">主场</span>
                <span :class="state.sqjf_key == 'Away' ? 'spanActive' : ''" @click="state.sqjf_key = 'Away'">客场</span>
              </div>
            </div>
            <div class="box_rank" style="color: #b2b2b2;">
              <div>排名</div>
              <div>球队</div>
              <div>赛事</div>
              <div>胜/平/负</div>
              <div>进/失/净</div>
              <div>积分</div>
            </div>
            <div class="before_rank">
              <div class="box_rank">
                <div>{{ data.Standings.Home[state.sqjf_key][8] }}</div>
                <div>{{ game_info.host_name || game_info.host_team?.short_name }}</div>
                <div>{{ data.Standings.Home.Competiton.replace(/\"/g, "") }}</div>
                <div>
                  {{ data.Standings.Home[state.sqjf_key][1] }}/{{ data.Standings.Home[state.sqjf_key][2] }}/{{ data.Standings.Home[state.sqjf_key][3] }}
                </div>
                <div>
                  {{ data.Standings.Home[state.sqjf_key][4] }}/{{ data.Standings.Home[state.sqjf_key][5] }}/{{ data.Standings.Home[state.sqjf_key][6] }}
                </div>
                <div>{{ data.Standings.Home[state.sqjf_key][7] && data.Standings.Home[state.sqjf_key][7].match(/\(.*?\)/g,
                  '') != null ? data.Standings.Home[state.sqjf_key][7].replace(/\(.*?\)/g, '') :
                  data.Standings.Home[state.sqjf_key][7] }}</div>
              </div>
              <div class="box_rank">
                <div>{{ data.Standings.Away[state.sqjf_key][8] }}</div>
                <div>{{ game_info.away_name || game_info.away_team?.short_name }}</div>
                <div>{{ data.Standings.Away.Competiton.replace(/\"/g, "") }}</div>
                <div>
                  {{ data.Standings.Away[state.sqjf_key][1] }}/{{ data.Standings.Away[state.sqjf_key][2] }}/{{ data.Standings.Away[state.sqjf_key][3] }}
                </div>
                <div>
                  {{ data.Standings.Away[state.sqjf_key][4] }}/{{ data.Standings.Away[state.sqjf_key][5] }}/{{ data.Standings.Away[state.sqjf_key][6] }}
                </div>
                <div>{{ data.Standings.Away[state.sqjf_key][7] && data.Standings.Away[state.sqjf_key][7].match(/\(.*?\)/g,
                  '') != null ? data.Standings.Away[state.sqjf_key][7].replace(/\(.*?\)/g, '') :
                  data.Standings.Away[state.sqjf_key][7] }}</div>
              </div>
            </div>
          </section>

          <!-- 联赛，分组赛 积分榜 -->
          <section class="section_8" v-if="data.CompetitionStanding && data.CompetitionStanding.length > 0">
            <div v-if="data.CompetitionSchedule.Mode == 'Round'">
              <div class="match_type_1">
                <div class="title_1">
                  <div>{{ data.Name }}</div>
                  <div class="btn_arr">
                    <span :class="state.round_key == 'Total' ? 'spanActive' : ''" @click="state.round_key = 'Total'">主客</span>
                    <span :class="state.round_key == 'Home' ? 'spanActive' : ''" @click="state.round_key = 'Home'">主场</span>
                    <span :class="state.round_key == 'Away' ? 'spanActive' : ''" @click="state.round_key = 'Away'">客场</span>
                  </div>
                </div>
                <div class="box_rank" style="font-size: 12px;color: #999;">
                  <div>排名</div>
                  <div>球队</div>
                  <div>赛</div>
                  <div>胜/平/负</div>
                  <div>进/失/净</div>
                  <div>积分</div>
                </div>
              </div>
              <div class="league_group_rank">
                <div class="box_rank" v-for="(item, index) in data.CompetitionStanding[data.Name][state.round_key]"
                  :key="index" :style="index % 2 == 0 ? state.bg_color_box[0] : state.bg_color_box[1]">
                  <div>{{ index + 1 }}</div>
                  <div>{{ data.Team[item.Team].ShortName }}</div>
                  <div>{{ item.Data[0] }}</div>
                  <div>{{ item.Data[1] }}/{{ item.Data[2] }}/{{ item.Data[3] }}</div>
                  <div>{{ item.Data[4] }}/{{ item.Data[5] }}/{{ item.Data[4] - item.Data[5] }}</div>
                  <div>{{ item.Data[6] }}</div>
                </div>
              </div>
            </div>
            <div v-else-if="data.CompetitionSchedule.Mode == 'Group' && data.Name == '分组赛'">
              <div v-if="data.CompetitionStanding == null" class="injury-stop-info">
                <p class='kong' style="height:100px;line-height:100px;">暂无信息</p>
              </div>
              <div v-else class="match_type_2">
                <div class="title_1" style="padding: 0 10px;">{{ data.Name }}组</div>
                <div class="box_rank" style="font-size: 12px;color: #999;">
                  <div>排名</div>
                  <div>球队</div>
                  <div>赛</div>
                  <div>胜/平/负</div>
                  <div>进/失/净</div>
                  <div>积分</div>
                </div>
                <div class="league_group_rank">
                  <!-- <div v-for="(value,key,index) in Group">
                    <div v-for="item in Group[key]">
                      <div class="box_rank" style="background-color:${index % 2 != 0 ? '#fafafa' : '#fff'}">
                        <div>{{index + 1}}</div>
                        <div>{{data.Team[item.Team].ShortName}}</div>
                        <div>{{item.Data[0]}}</div>
                        <div>{{item.Data[1]}}/{{item.Data[2]}}/{{item.Data[3]}}</div>
                        <div>{{item.Data[4]}}/{{item.Data[5]}}/{{item.Data[4] - item.Data[5]}}</div>
                        <div>{{item.Data[6]}}</div>
                    </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
            <div v-else-if="data.CompetitionStanding[data.Name] && data.CompetitionStanding[data.Name].Total">
              <div class="match_type_2">
                <div class="title_1" style="padding: 0 10px">{{ data.Name }}</div>
                <div class="box_rank" style="font-size: 12px;color: #999;">
                  <div>排名</div>
                  <div>球队</div>
                  <div>赛</div>
                  <div>胜/平/负</div>
                  <div>进/失/净</div>
                  <div>积分</div>
                </div>
              </div>
              <div class="league_group_rank">
                <div class="box_rank" v-for="(item, index) in data.CompetitionStanding[data.Name].Total" v-bind:key="index">
                  <div>{{ index + 1 }}</div>
                  <div>{{ data.Team[item.Team].ShortName }}</div>
                  <div>{{ item.Data[0] }}</div>
                  <div>{{ item.Data[1] }}/{{ item.Data[2] }}/{{ item.Data[3] }}</div>
                  <div>{{ item.Data[4] }}/{{ item.Data[5] }}/{{ item.Data[4] - item.Data[5] }}</div>
                  <div>{{ item.Data[6] }}</div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
      <noData v-if="no_data" nodata_message="暂无分析数据！"></noData>
    </div>
  </van-pull-refresh>
</template>

<script lang="ts">
import { ref, defineComponent,computed, reactive, onMounted, toRef,watch } from 'vue';
import * as game_api from '@/api/game_api';
import * as user_api from '@/api/user_api';
import { useStore } from 'vuex';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { default as moment } from 'moment';
import { default as _ } from 'lodash';
import { get_localstorage,set_localstorage } from '@/common/js/utils'
import noData from '@/components/NoData.vue';

export default defineComponent({
  name: 'GameAnalysis',
  components: {noData},
  props: { 
    gameInfo: {
      type: Object,
      default: () => { return {}; }
    },
    activeName: { type: String, default: '' },
  },
  setup(props:any) {
    const store: any = useStore();
    const route = useRoute();
    const game_info:any = toRef(props,'gameInfo');
    const userInfo:any = computed(() => store.state.userInfo);
    const gameAnalyse: any = ref({})
    const common_data = store.state.common_data
    const no_data = ref(false);
    const data: any = reactive({
      Standings: null,
      Competition: null,
      Meeting: {},
      Team: null,
      HomeHistory: {},
      AwayHistory: {},
      HomeFixture: null,
      AwayFixture: null,
      CompetitionStanding: null,
      CompetitionTeam: null,
      CompetitionSchedule: null,
      Name: "",
      Group: [],
    });
    const state: any = ref({
      switch_title_list : ['胜平负','进球', '半全场'],
      switch_index: 0,
      bg_color_box: ['background-color:#fafafa', 'background-color:#fff'],
      jfdb_key: "Total",
      sqjf_key: "Total",
      round_key: "Total",
      all_num: 10,
      host_num: 10,
      away_num: 10,
      same_type: {
        host: "",
        away: ""
      },
      loading: true,
    });
    const odds_eu:any = ref(null);
    const num:any = computed(() => game_info.value?.id % 10 );
    const toupiao:any = ref({
      is_show:false,
      win_num: 30 + num.value,
      draw_num: 100 - (30 + num.value) * 2,
      lose_num: 30 + num.value,
    });
    const loading = ref(false);

    const init_data = async () => {
      // if((props.activeName || route.name) == "GameAnalysis"){
        if(game_info?.value?.odds){
          let eu = game_info?.value?.odds['3000181']?.eu;//Bet365
          odds_eu.value = eu;
          if(eu && eu.length == 3){
            let win = parseFloat((1/eu[0]*100).toFixed(2))
            let draw = parseFloat((1/eu[1]*100).toFixed(2))
            let lose = parseFloat((1/eu[2]*100).toFixed(2))
            let sum = win + draw + lose;
            toupiao.value.win_num = parseFloat((win / sum * 100).toFixed(2))
            toupiao.value.draw_num = parseFloat((draw / sum * 100).toFixed(2))
            toupiao.value.lose_num = parseFloat((lose / sum * 100).toFixed(2))
            let lose_rate = 100 - toupiao.value.win_num - toupiao.value.draw_num
            if(lose_rate != toupiao.value.lose_num){
              toupiao.value.lose_num  = parseFloat(lose_rate.toFixed(2));
            }
          }

          let is_toupiao = get_localstorage()[`toupiao_${game_info.value?.id}`];
          if(is_toupiao && userInfo.value?.user_id){
            toupiao.value.is_show = true;
            await get_toupiao_list('all');
          }
        }
        if(common_data.switchState){
          state.value.switch_title_list = ['胜平负', '盘'.replace('','')+'口','进球', '半全场']
        }
        
        if(!game_info.value?.sportsdt_game_id){
          const yiqiuid = game_info?.value?.id || route.query.yiqiuid || route.params.yiqiuid
          const gameid = route.query.gameid;
          const infoid = route.query.infoid;
          let temp = await game_api.get_soccer_game_info({ yiqiu_id: yiqiuid, game_id: gameid, info_id: infoid });
          game_info.value = temp;
          onLoadData(temp)
        }else{
          onLoadData(game_info.value)
        }

        if (!userInfo.value?.user_id) {
          userInfo.value = await getUserInfo();
        }
        loading.value = false;
      // }
    };

    onMounted(()=>{
      // console.info('game analysis onMounted');
      init_data();
    });

    onBeforeRouteUpdate((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
      }
      // 检查是否已经有数据
      let analysis_data = gameAnalyse?.value
      if(analysis_data?.Standings){
        // console.info(analysis_data?.Standings);
        // 已经有数据，分析数据就不用重新加载
        return
      }

      // console.info(parseInt(from_time)+10000,parseInt(to_time),from?.query?.yiqiuid, to?.query?.yiqiuid);
      //同一场比赛，超过1秒，就重新加载数据
      if(from_time && to_time && parseInt(from_time)+1000 < parseInt(to_time)){
        init_data();
      }
    });

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

    const onLoadData = async(game:any)=>{
      let game_id = game?.sportsdt_game_id;
      let competition_id = game?.competition?.sportsdt_id;
      if (game_id) {
        if([4, 10, 12].includes(game?.status)){
          toupiao.value.is_show = true;
        }
        let result = await game_api.get_game_analyse({ game_id: game_id });
        if(!result){
          // 再请求一次
          result = await game_api.get_game_analyse({ game_id: game_id });
        }
        // console.info("GameAnalysis", result);
        gameAnalyse.value = result;
        getAnalysisData(gameAnalyse.value,game);
      }
      if (competition_id) {
        try {
          let standing = await game_api.get_competition_standing({ competition_id: competition_id });
          let schedule = await game_api.get_competition_schedule({ competition_id: competition_id });
          // console.info("GameAnalysis", standing, schedule);
          data.CompetitionStanding = standing?.Standing;
          if(data?.CompetitionStanding){
            data.Name = Object.keys(data?.CompetitionStanding)[0];
          }
          data.CompetitionTeam = standing?.Team;
          data.CompetitionSchedule = schedule;
          if (data.CompetitionSchedule?.Mode == 'Group' && data?.Name == '分组赛') {
            for (let item of data.CompetitionStanding[data.Name].Total) {
              if (!data.Group[item.Group]) {
                data.Group[item.Group] = [];
              }
              data.Group[item.Group].push(item);
            }
          }
        } catch (e: any) { console.info("GameAnalysis",e) }
      }
      state.value.loading = false;
    }

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

    const getUserInfo = async () => {
        let result = await user_api.get_logined_virtual_account();
        if (result?.Error !== "未登录" && result?.Result != null) {
          return result.Result;
        } else {
          return null;
        }
      };

    const getAnalysisData = function (gameAnalyse: any,gameInfo: any) {
      let host_id = gameInfo?.host_team?.sportsdt_id;
      let away_id = gameInfo?.away_team?.sportsdt_id;
      if (gameAnalyse) {
        data.Standings = gameAnalyse?.Standings;
        if (data.Standings?.Home['Total'][7] == 0 && data.Standings?.Away['Total'][7] == 0) {
          data.Standings = null;
        }
        data.Competition = gameAnalyse.Competition;
        data.Team = gameAnalyse.Team;
        data.Meeting = getWinDrawLose(gameAnalyse.Meeting, state.value.all_num, host_id);
        data.HomeHistory = getWinDrawLose(gameAnalyse.TeamHistory?.Home, state.value.host_num, host_id);
        data.AwayHistory = getWinDrawLose(gameAnalyse.TeamHistory?.Away, state.value.away_num, away_id);
        data.HomeFixture = getFixtureList(gameAnalyse.TeamFixture?.Home);
        data.AwayFixture = getFixtureList(gameAnalyse.TeamFixture?.Away);
      }else{
        no_data.value = true;
      }
    }

    const getWinDrawLose = function (list: any, page: any, team_id: any) {
      let total_num = 0;
      let w_num = 0, d_num = 0, l_num = 0;
      let w_double = 0, d_double = 0, l_double = 0;
      let Team = data.Team;

      list.forEach((item: any, index: any) => {
        let home_id = item.Id[2];
        let away_id = item.Id[3];
        item.HomeName = Team[home_id].ShortName == null ? (Team[home_id].Name == null ? "" : Team[home_id].Name.substr(0, 4)) : Team[home_id].ShortName.substr(0, 4);
        item.AwayName = Team[away_id].ShortName == null ? (Team[away_id].Name == null ? "" : Team[away_id].Name.substr(0, 4)) : Team[away_id].ShortName.substr(0, 4);

        if (index < 2) {
          if (home_id == team_id) {
            if (item.Score[0] - item.Score[1] > 0) {
              w_double += 1;
            } else if (item.Score[0] - item.Score[1] == 0) {
              d_double += 1;
            } else {
              l_double += 1;
            }
          } else {
            if (item.Score[1] - item.Score[0] > 0) {
              w_double += 1;
            } else if (item.Score[0] - item.Score[1] == 0) {
              d_double += 1;
            } else {
              l_double += 1;
            }
          }
        }
        if (index < page) {
          item.BallNumber = parseInt(item.Score[0]) + parseInt(item.Score[1]);
          item.HandicapTxt = getOddsBet(-item.Handicap);
          // 半场胜平负
          if (item.Half.split("-")[0] - item.Half.split("-")[1] > 0) {
            item.HalfScoreTxt = '胜';
          } else if (item.Half.split("-")[0] - item.Half.split("-")[1] == 0) {
            item.HalfScoreTxt = '平';
          } else {
            item.HalfScoreTxt = '负';
          }
          // 全场胜平负
          if (item.Score[0] - item.Score[1] > 0) {
            item.ScoreTxt = '胜';
            item.ScoreTxt_BgColor = 'background-color:#ff6858';
          } else if (item.Score[0] - item.Score[1] == 0) {
            item.ScoreTxt = '平';
            item.ScoreTxt_BgColor = 'background-color:#91bb80';
          } else {
            item.ScoreTxt = '负';
            item.ScoreTxt_BgColor = 'background-color:#6f83fc';
          }
          if (home_id == team_id) {

            if (item.Score[0] - item.Score[1] > 0) {
              item.WinDrawLose = '胜';
              item.bgColor = 'background-color:#ff6858';
              item.txtColor_home = home_id == team_id ? 'color:#ff6858' : '';
              item.txtColor_away = away_id == team_id ? 'color:#ff6858' : '';
              w_num += 1;
            } else if (item.Score[0] - item.Score[1] == 0) {
              item.WinDrawLose = '平';
              item.bgColor = 'background-color:#91bb80';
              item.txtColor_home = home_id == team_id ? 'color:#91bb80' : '';
              item.txtColor_away = away_id == team_id ? 'color:#91bb80' : '';
              d_num += 1;
            } else {
              item.WinDrawLose = '负';
              item.bgColor = 'background-color:#6f83fc';
              item.txtColor_home = home_id == team_id ? 'color:#6f83fc' : '';
              item.txtColor_away = away_id == team_id ? 'color:#6f83fc' : '';
              l_num += 1;
            }

            // 赢走输
            if (item.Score[0] - item.Score[1] + parseFloat(item.Handicap) > 0) {
                  item.Handicap_WinDrawLose = '赢';
                  item.Handicap_BgColor = 'background-color:#ff6858';
              } else if (item.Score[0] - item.Score[1] + parseFloat(item.Handicap) == 0) {
                  item.Handicap_WinDrawLose = '走';
                  item.Handicap_BgColor = 'background-color:#91bb80';
              } else {
                  item.Handicap_WinDrawLose = '输';
                  item.Handicap_BgColor = 'background-color:#6f83fc';
              }
          } else {

            if (item.Score[1] - item.Score[0] > 0) {
              item.WinDrawLose = '胜';
              item.bgColor = 'background-color:#ff6858';
              item.txtColor_home = home_id == team_id ? 'color:#ff6858' : '';
              item.txtColor_away = away_id == team_id ? 'color:#ff6858' : '';
              w_num += 1;
            } else if (item.Score[0] - item.Score[1] == 0) {
              item.WinDrawLose = '平';
              item.bgColor = 'background-color:#91bb80';
              item.txtColor_home = home_id == team_id ? 'color:#91bb80' : '';
              item.txtColor_away = away_id == team_id ? 'color:#91bb80' : '';
              d_num += 1;
            } else {
              item.WinDrawLose = '负';
              item.bgColor = 'background-color:#6f83fc';
              item.txtColor_home = home_id == team_id ? 'color:#6f83fc' : '';
              item.txtColor_away = away_id == team_id ? 'color:#6f83fc' : '';
              l_num += 1;
            }

            // 赢走输
            if (item.Score[1] - item.Score[0] - parseFloat(item.Handicap) > 0) {
                  item.Handicap_WinDrawLose = '赢';
                  item.Handicap_BgColor = 'background-color:#ff6858';
              } else if (item.Score[1] - item.Score[0] - parseFloat(item.Handicap) == 0) {
                  item.Handicap_WinDrawLose = '走';
                  item.Handicap_BgColor = 'background-color:#91bb80';
              } else {
                  item.Handicap_WinDrawLose = '输';
                  item.Handicap_BgColor = 'background-color:#6f83fc';
              }
          }
        }

        if(common_data.switchState){
          item.switch_result = [item.WinDrawLose, `(${item.HandicapTxt})${item.Handicap_WinDrawLose}`, `${item.BallNumber}球`,`${item.HalfScoreTxt}${item.ScoreTxt}`]
          item.switch_bgColor = [item.bgColor, item.Handicap_BgColor, item.bgColor, item.ScoreTxt_BgColor]
        }else{
          item.switch_result = [item.WinDrawLose, `${item.BallNumber}球`,`${item.HalfScoreTxt}${item.ScoreTxt}`]
          item.switch_bgColor = [item.bgColor, item.bgColor, item.ScoreTxt_BgColor]
        }
        
      });
      list = _.take(list, page);
      total_num = list.length;
      let WDL = {
        total_num, w_num, d_num, l_num, w_double, d_double, l_double
      }
      return { list, WDL };
    }

    const switchTitleClick = () =>{
      state.value.switch_index >= state.value.switch_title_list.length - 1 ? state.value.switch_index = 0 : state.value.switch_index++;
    }

    const getFixtureList = function (list: any) {
      if (list && list.length > 0) {
        let Team = data.Team;
        for (var item of list) {
          let home_id = item.Id[2];
          let away_id = item.Id[3];
          item.HomeName = Team[home_id].ShortName == null ? (Team[home_id].Name == null ? "" : Team[home_id].Name.substr(0, 4)) : Team[home_id].ShortName.substr(0, 4);
          item.AwayName = Team[away_id].ShortName == null ? (Team[away_id].Name == null ? "" : Team[away_id].Name.substr(0, 4)) : Team[away_id].ShortName.substr(0, 4);
        }
        return list;
      } else {
        return null;
      }
    }

    const formatDay = function (e: any) {
      let date: any = new Date();
      var timestamp = Date.parse(date);
      var num = e - timestamp;
      return Math.floor(num / 1000 / 60 / 60 / 24) == 0 ? "今" : Math.floor(num / 1000 / 60 / 60 / 24)
    }

    const formatDate =  computed(() => {
      return (date: any) => {
        return moment(date).format("YY/MM/DD");
        };
    });

    const HomeAwayClick = function (type: any, num: any, same_type: any) {
      let host_id = game_info.value.host_team.sportsdt_id;
      let away_id = game_info.value.away_team.sportsdt_id;
      if (type == "HomeHistory") {
        state.value.host_num = num;
        if(state.value.same_type.host == same_type){
          state.value.same_type.host = ''
        }else{
          state.value.same_type.host = same_type;
        }
        if (state.value.same_type.host) {
          let match_list = getSameMatchs(gameAnalyse.value.TeamHistory?.Home, "same_home", host_id);
          if (same_type == "SameCompetition") {
            data.HomeHistory = getWinDrawLose(match_list.SameCompetition, state.value.host_num, host_id);
          } else if (same_type == "SameHomeAway") {
            data.HomeHistory = getWinDrawLose(match_list.SameHomeAway, state.value.host_num, host_id);
          }
        } else {
          data.HomeHistory = getWinDrawLose(gameAnalyse.value.TeamHistory?.Home, state.value.host_num, host_id);
        }
      } else if (type == "AwayHistory") {
        state.value.away_num = num;
        if(state.value.same_type.away == same_type){
          state.value.same_type.away = ''
        }else{
          state.value.same_type.away = same_type;
        }
        if (state.value.same_type.away) {
          let match_list = getSameMatchs(gameAnalyse.value.TeamHistory?.Away, "same_away", away_id);
          if (same_type == "SameCompetition") {
            data.AwayHistory = getWinDrawLose(match_list.SameCompetition, state.value.away_num, away_id);
          } else if (same_type == "SameHomeAway") {
            data.AwayHistory = getWinDrawLose(match_list.SameHomeAway, state.value.away_num, away_id);
          }
        } else {
          data.AwayHistory = getWinDrawLose(gameAnalyse.value.TeamHistory?.Away, state.value.away_num, away_id);
        }
      }
    }

    const getSameMatchs = function (list: any, type: any, team_id: any) {
      let SameCompetition: any = [], SameHomeAway: any = [];
      for (let item of list) {
        let competition_id = item.Id[1];
        let home_id = item.Id[2];
        let away_id = item.Id[3];
        if (game_info.value.competition.sportsdt_id == competition_id) {
          SameCompetition.push(item);
        } 
        if (type == "same_home" && home_id == team_id) {
          SameHomeAway.push(item);
        } else if (type == "same_away" && away_id == team_id) {
          SameHomeAway.push(item);
        }
      }
      return {
        SameCompetition, SameHomeAway
      }
    }

    const toupiaoClick = async(type:any) =>{
      if (!userInfo.value?.user_id) {
        location.href=`/login?return_url=${location.href}`;
        return;
      }
      let is_toupiao = get_localstorage()[`toupiao_${game_info.value?.id}`];
      if(!is_toupiao){
        let result = await user_api.toupiao_vote({
            lottery_id:72,
            play_type:"胜平负",
            issue_name:game_info.value?.id,
            number:type,
            vote_type:1
        })
        set_localstorage(`toupiao_${game_info.value?.id}`,true);
        if(result){
          toupiao.value.is_show = true;
          await get_toupiao_list(type);
        }
      }
    }

    const get_toupiao_list = async(type:any) => {
      let toupiao_list:any = await user_api.toupiao_list({
          lottery_id:72,
          play_type:"胜平负",
          issue_name:game_info.value?.id,
        })
        if(toupiao_list && toupiao_list[`${type}`]){
          set_localstorage(`toupiao_${game_info.value?.id}`,true);
        }
        
        let win = toupiao_list?.win || 0;
        let draw = toupiao_list?.draw || 0;
        let lose = toupiao_list?.lose || 0;
        let all = (win + toupiao.value.win_num) + (draw + toupiao.value.draw_num) + (lose + toupiao.value.lose_num) 
        toupiao.value.win_num = ((win + toupiao.value.win_num) / all * 100).toFixed(2);
        toupiao.value.draw_num = ((draw + toupiao.value.draw_num) / all * 100).toFixed(2);
        toupiao.value.lose_num = ((lose + toupiao.value.lose_num) / all * 100).toFixed(2);
        
        let lose_rate = 100 - toupiao.value.win_num - toupiao.value.draw_num
        if(toupiao.value.lose_num != lose_rate){
          toupiao.value.lose_num = lose_rate.toFixed(2);
        }
    }

    const getOddsBet = (handicap: any) => {
    var handicapName = ""
    if (parseFloat(handicap) === 0) {
        handicapName = '平手';
    } else if (parseFloat(handicap) > 0 && parseFloat(handicap) < 0.5) {
        handicapName = '平/半';
    } else if (parseFloat(handicap) === 0.5) {
        handicapName = '半球';
    } else if (parseFloat(handicap) > 0.5 && parseFloat(handicap) < 1) {
        handicapName = '半/一';
    } else if (parseFloat(handicap) === 1) {
        handicapName = '一球';
    } else if (parseFloat(handicap) > 1 && parseFloat(handicap) < 1.5) {
        handicapName = '一/半';
    } else if (parseFloat(handicap) === 1.5) {
        handicapName = '球半';
    } else if (parseFloat(handicap) > 1.5 && parseFloat(handicap) < 2) {
        handicapName = '球半/两球';
    } else if (parseFloat(handicap) === 2) {
        handicapName = '两球';
    } else if (parseFloat(handicap) < 0 && parseFloat(handicap) > -0.5) {
        handicapName = '受平/半';
    } else if (parseFloat(handicap) === -0.5) {
        handicapName = '受半球';
    } else if (parseFloat(handicap) < -0.5 && parseFloat(handicap) > -1) {
        handicapName = '受半/一';
    } else if (parseFloat(handicap) === -1) {
        handicapName = '受一球';
    } else if (parseFloat(handicap) < -1 && parseFloat(handicap) > -1.5) {
        handicapName = '受一/半';
    } else if (parseFloat(handicap) === -1.5) {
        handicapName = '受球半';
    } else if (parseFloat(handicap) < -1.5 && parseFloat(handicap) > -2) {
        handicapName = '受球半/两球';
    } else if (parseFloat(handicap) === -2) {
        handicapName = '受两球';
    } else if (parseFloat(handicap) < -2) {
        handicapName = '受二球半';
    } else if (parseFloat(handicap) > 2) {
        handicapName = '二球半';
    } else {
        handicapName = '';
    }
    return handicapName;
}

    return {
      data,
      state,
      game_info,
      loading,
      toupiao,
      onRefresh,
      getAnalysisData,
      getSameMatchs,
      formatDay,
      formatDate,
      HomeAwayClick,
      toupiaoClick,
      switchTitleClick,
      no_data,
      odds_eu
    };
  },
});
</script>
<style lang="scss">
@use '@/common/style/common' as *;

body {
  background-color: #F7FAFE;
}

.rate-content {
  background-color: #FFFECB;
  margin: 10px;
  padding: 10px;
  @include border-radius(5px);

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    .look {
      @include sc(12px, #b2b2b2);
    }
  }

  .rate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;

    div {
      width: 33%;
      margin: auto;
      line-height: 30px;
      font-weight: bold;
      text-align: center;
    }

    .win {
      background-color: #FFDDDD;
      border: solid 1px #FF3333;
      @include sc(14px, #FF3333);
      @include border-radius(5px);
    }

    .draw {
      background-color: #E0FFD7;
      border: solid 1px #00C423;
      @include sc(14px, #00C423);
      @include border-radius(5px);
      margin: 0 20px;
    }

    .lose {
      background-color: #DDEDFF;
      border: solid 1px #1F78FF;
      @include sc(14px, #1F78FF);
      @include border-radius(5px);
    }
  }
}

.win_draw_lose {
  display: block;
  margin:0 auto;
  width: 50%;
  border-radius: 2px;
  padding: 1px;
  font-size: 12px;
  color: #fff;
}

.match_content {
  color: #666;
  font-size: 14px;
  min-height: 520px;

  .border_8 {
    border-bottom: 1px solid #F7FAFE;
  }

  .section_1 {
    background-color: #F7FAFE;
  }

  section {
    background-color: #fff;
  }

  .section_8,
  .league_group_rank {
    border-bottom: 8px solid #f2f2f2;
  }

  .section_8,
  .league_group_rank:last-child {
    border-bottom: 0;
  }

  .section_6,
  .section_8 {
    padding-bottom: 40px;
  }

  .tab1 .title_1 img,
  .tab1 .title_2 img {
    width: 30px;
    height: 30px;
  }

  .tab1 .title_2 {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 10px 0 0 14px;
    box-sizing: border-box;
    margin: 10px 0;
  }

  .tab1 .title_2 .name {
    font-size: 16px;
    color: #333;
  }

  .red {
    color: #ff6858;
  }

  .green {
    color: #82c866;
  }

  .blue {
    color: #6f83fc;
  }

  /* 积分页面 */
  .box_rank {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
  }

  .box_rank div {
    flex: 1;
  }

  .box_rank div:nth-child(2) {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .box_rank div:nth-child(4),
  .box_rank div:nth-child(5) {
    flex: 2.2;
  }

  .box_rank div:nth-child(3) {
    flex: 1.5;
  }

  /* 积分对比 */
  .tab1 .title_1,
  .tab2 .title_1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 10px 14px 0 14px;
    box-sizing: border-box;
    margin: 10px 0;
  }

  .tab1 .title_1 div,
  .tab2 .title_1 div {
    height: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .tab1 .title_1 .btn_arr,
  .tab2 .title_1 .btn_arr {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #888;
  }

  .tab1 .btn_arr span,
  .tab2 .btn_arr span {
    padding: 3px 10px;
    display: flex;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
  }

  .tab1 .btn_arr span:nth-child(2),
  .tab2 .btn_arr span:nth-child(2) {
    margin: 0 5px;
  }

  .tab1 .btn_arr .spanActive,
  .tab2 .btn_arr .spanActive {
    border: 0;
    background-color: #545578;
    color: #ffffff;
  }

  .tab1 .box_1 {
    margin-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
  }

  .box_1 .row_1 {
    width: 46.4%;
    height: 90px;
    border: #ededed 1px solid;
    border-radius: 5px;
    background: linear-gradient(214deg, #FFFFFF 0%, #ECE9FF 100%);
    text-align: center;
  }

  .box_1 .row_1 {
    display: flex;
  }

  .box_1 .row_1>div {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .box_1 .row_1 .col_1 {
    font-size: 12px;
  }

  .box_1 .fen-text span {
    font-family: yiqu;
    font-size: 28px;
  }

  .box_1 .row_1 .col_1>span {
    font-size: 1.6rem;
  }

  .box_1 .col_1>div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;
  }

  .box_1 .col_1 div span:last-child {
    flex: 1;
    height: 15px;
  }

  .box_1 .col_1 div span {
    flex: 1;
  }

  .box_1 .col_1 .color-red {
    background: #FF3333;
    @include border-radius(5px);
    animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    /* Safari and Chrome */
    -webkit-animation-name: fadeinR;
    -moz-animation-name: fadeinR;
    -ms-animation-name: fadeinR;
    animation-name: fadeinR;
  }

  .box_1 .col_1 .color-green {
    background: #00C423;
    @include border-radius(5px);
    animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    /* Safari and Chrome */
    -webkit-animation-name: fadeinR;
    -moz-animation-name: fadeinR;
    -ms-animation-name: fadeinR;
    animation-name: fadeinR;
  }

  .box_1 .col_1 .color-blue {
    background: #1F78FF;
    @include border-radius(5px);
    animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    /* Safari and Chrome */
    -webkit-animation-name: fadeinR;
    -moz-animation-name: fadeinR;
    -ms-animation-name: fadeinR;
    animation-name: fadeinR;
  }

  /* 历史交锋 */

  .box_2 {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }

  .box_2 div {
    flex: 1.1;
  }

  .box_2 div:nth-child(3) {
    flex: 1;
    display: table;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .switch_title {
    color: #6f83fc;
  }

  .box_2.title_3 {
    font-size: 12px;
    color: #b2b2b2;
  }

  .box_2 .col_time {
    flex: 0.8;
    font-size: 12px;
    color: #999;
  }

  .box_2.title_3 div:first-child {
    flex: 0.8;
  }

  .box_2.title_3 .col_center div:first-child {
    flex: 1.2;
    text-align: right;
  }

  .box_2.title_3 .col_center div:last-child {
    flex: 1.2;
    text-align: left !important;
  }

  .box_2 .col_center {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_2 .col_center .name_home {
    flex: 1.2;
    text-align: right;
    display: inline-block;
    padding-right: 5px;
    font-size: 14px;
    color: #888;
  }

  .box_2 .col_center .score_box {
    flex: 1;
    font-family: yiqu;
    padding-top: 2px;
  }

  .box_2 .col_center .all_score {
    padding-right: 2px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .box_2 .col_center .half_score {
    font-size: 12px;
    color: #999;
  }

  .box_2 .col_center .name_away {
    flex: 1.2;
    text-align: left;
    display: inline-block;
    padding-left: 5px;
    font-size: 14px;
    color: #888;
  }

  /* 主队交锋 */
  .box_btn {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #888;
  }

  .box_btn .item_btn {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .box_btn .s_10_20 {
    width: 60%;
    margin-left: 16px;
    display: flex;
    border: 1px solid #545578;
    border-radius: 16px;
  }

  .box_btn .s_10_20 span {
    flex: 1;
    padding: 3px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_btn .s_10_20 span.btnActive {
    border: 0;
    background: #545578;
    color: #ffffff;
  }

  .box_btn .s_match_team {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_btn .s_match_team span {
    padding: 3px 10px;
    margin: 0 5px;
    display: flex;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
  }

  .box_btn .s_match_team span.btnActive {
    background-color: #545578;
    color: #ffffff;
  }

  .box_btn div {
    overflow: hidden;
  }
}</style>