sport_pc/.svn/pristine/a3/a340cdcf50cc2272148f0cba0de9d327b97daa32.svn-base

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 10:58:23
 * @LastEditTime: 2019-08-31 11:22:31
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div :class="getBettingIsShow?'noscoll':''">
    <div class="lod">
      <Loading></Loading>
    </div>
    <div>
      <SportsHead></SportsHead>
      <div class="Serch">
        <div class="Soccer-game row center">
          <div class="Soccer-game-title row center" @click="isreturn()">
            <img class="returnimg" :src="searchreturn">
            {{name}}
          </div>
        </div>
      </div>
      <!-- 足球头部 -->
      <div class="bqHead zqHead" v-if="headStatus == 1">
        <div class="pd-10">
          <div class="match">
            <div class="tit">
              <span>{{list.leagueName}}</span>
              <div>
                <!-- <span v-if="list.match_time" class="scene">{{list.match_time.split(' ')[0]}} </span>
                &nbsp; -->
                <span  v-if="list.match_time" class="time">{{list.match_ptime ?  list.match_ptime : list.match_time.split(' ')[0]}}</span>
              </div>
            </div>
            <div class="info">
              <span>{{list.home_team}}</span>
              <span class="live-score">{{list.match_score ? list.match_score :'0-0'}}</span>
              <span>{{list.guest_team}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 篮球头部 -->
            <!-- 篮球头部 -->
        <div class="header" v-if="headStatus == 2">
          <div class=" match">
            <div class="live">
              <div class="tit">{{list.leagueName}}</div>
                <div class="info">
                <div class="infoBody flex">
                  <div class="matchTime" style="width:25%;">
                    <span v-if="matchScoreDetails.schedule == 1" class="scene">第一节</span>
                    <span v-if="matchScoreDetails.schedule == 2" class="scene">第二节</span>
                    <span v-if="matchScoreDetails.schedule == 3" class="scene">第三节</span>
                    <span v-if="matchScoreDetails.schedule == 4" class="scene">第四节</span>
                    <span class="time">{{matchScoreDetails.r_time}}</span>
                  </div> 
                  <div class="flex" style="width:75%;">
                    <div class="right_info_row_qt">第一节</div>
                    <div class="right_info_row_qt">第二节</div>
                    <div class="right_info_row_qt">第三节</div>
                    <div class="right_info_row_qt">第四节</div>
                    <div class="right_info_row_qt">加时</div>
                    <!-- <div class="right_info_row_qt scence">上半场</div>
                    <div class="right_info_row_qt scence">下半场</div> -->
                    <div class="right_info_row_qt scence">总计</div>
                  </div>
                </div>
                <div class="infoRow">
                  <div class="infoItem flex">
                    <div style="width:25%;">
                      <span class="team">{{list.home_team}}</span>
                    </div>
                    <div class="infoBox" style="width:75%">
                      <div class="infoNum">{{matchScoreDetails.sc_1th_H}}</div>
                      <div class="infoNum">{{matchScoreDetails.sc_2th_H}} </div>
                      <div class="infoNum">{{matchScoreDetails.sc_3th_H}}</div>
                      <div class="infoNum col">{{matchScoreDetails.sc_4th_H}}</div>
                      <div class="infoNum"></div>
                      <!-- <div class="infoNum scenceNum">30</div>
                      <div class="infoNum col scenceNum">26</div> -->
                      <div class="infoNum ycol scenceNum">{{matchScoreDetails.whole_H}}</div>
                    </div>
                  </div>
                  <div class="infoItem flex">
                    <div style="width:25%;">
                      <span class="team">{{list.guest_team}}</span>
                    </div>
                    <div class="infoBox" style="width:75%">
                      <div class="infoNum">{{matchScoreDetails.sc_1th_C}}</div>
                      <div class="infoNum">{{matchScoreDetails.sc_2th_C}}</div>
                      <div class="infoNum">{{matchScoreDetails.sc_3th_C}}</div>
                      <div class="infoNum col">{{matchScoreDetails.sc_4th_C}}</div>
                      <div class="infoNum"></div>
                      <!-- <div class="infoNum scenceNum">30</div>
                      <div class="infoNum col scenceNum">26</div> -->
                      <div class="infoNum ycol scenceNum">{{matchScoreDetails.whole_C}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!-- 棒球头部 -->
      <div class="tennisHead" v-if="headStatus == 3">
        <div style="padding:0.1rem;">
          <div class="match">
            <div class="tit">
              <span>{{list.leagueName}}</span>
            </div>
            <div class="ballTable">
              <div class="listHead row allAlignment">
                <div class="txt-c-0">
                  <div class="section">{{matchScoreDetails.schedule}}
                    <span v-if="matchScoreDetails.type == 'h'">▲</span> 
                    <span v-else>▼</span>
                    <!-- <span>▲</span> -->
                  </div>
                </div>
                <div class="row ">
                  <span class="session row center" v-for="(tiem,i) in 9" :key="tiem.id">
                    {{i+1}}
                  </span>
                  <!-- <span class="mg-5">盘</span> -->
                  <span class="mg-session row center">加时</span>
                  <!-- <span class="mg-session row center">当前</span> -->
                  <span class="mg-session row center" style="width:0.85rem;">总局数</span>
                </div>
              </div>

              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold " :class="{attack:matchScoreDetails.type == 'h'}">•</div>
                  <div class="team" style="text-align:left;">{{ list.home_team}}</div>
                </div>
                <div class="row">
                  <span :class="{current:matchScoreDetails.schedule ==1}"
                   class="session row center">{{matchScoreDetails.sc_1th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==2}" 
                  class="session row center">{{matchScoreDetails.sc_2th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==3}" 
                  class="session row center ">{{matchScoreDetails.sc_3th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==4}" 
                  class="session row center">{{matchScoreDetails.sc_4th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==5}" 
                  class="session row center">{{matchScoreDetails.sc_5th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==6}" 
                  class="session row center">{{matchScoreDetails.sc_6th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==7}" 
                  class="session row center">{{matchScoreDetails.sc_7th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==8}" 
                  class="session row center">{{matchScoreDetails.sc_8th_H}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==9}" 
                  class="session row center">{{matchScoreDetails.sc_9th_H}}</span>
                  <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.OT_H}}</span>
                  <!-- <span class=" mg-session row center mark">{{matchScoreDetails.sc_ov_H}}</span> -->
                  <span class="mg-session row center mark " style="width:0.85rem">{{matchScoreDetails.game_num_H}}</span>
                </div>
              </div>
              
              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold" :class="{attack:matchScoreDetails.type == 'g'}">•</div>
                  <div class="team" style="text-align:left;">{{list.guest_team}}</div>
                </div>
                <div class="row">
                  <span :class="{current:matchScoreDetails.schedule ==1}"  class="session row center">{{matchScoreDetails.sc_1th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==2}"  class="session row center">{{matchScoreDetails.sc_2th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==3}"  class="session row center">{{matchScoreDetails.sc_3th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==4}"  class="session row center">{{matchScoreDetails.sc_4th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==5}"  class="session row center">{{matchScoreDetails.sc_5th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==6}"  class="session row center">{{matchScoreDetails.sc_6th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==7}"  class="session row center">{{matchScoreDetails.sc_7th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==8}"  class="session row center">{{matchScoreDetails.sc_8th_C}}</span>
                  <span :class="{current:matchScoreDetails.schedule ==9}"  class="session row center">{{matchScoreDetails.sc_9th_C}}</span>
                  <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.OT_C}}</span>
                  <!-- <span class=" mg-session row center mark">{{matchScoreDetails.sc_ov_A}}</span> -->
                  <span class="mg-session row center mark " style="width:0.85rem">{{matchScoreDetails.game_num_C}}</span>
                </div>
              </div>
               <div class="listHead row allAlignment"> 
                  <div class="row center">
                    <div  class="eliminate ">
                      <span :class="{spanBox:matchScoreDetails.baseman_2 !='N'}" style="margin-left:.11rem;"></span>
                      <div style="width:.31rem;" class="row allAlignment">
                        <span :class="{spanBox:matchScoreDetails.baseman_3 !='N'}"></span>
                        <span :class="{spanBox:matchScoreDetails.baseman_1  !='N'}"></span>
                      </div>
                    </div>
                  </div>
                 <div>
                   <span>出局:</span>
                   <span>{{matchScoreDetails.out_game_num}}</span>
                 </div>
               </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 网球头部 -->
      <div class="tennisHead" style="padding:0.1rem;" v-if="headStatus == 4">
        <div class="ballTable">
          <div class="txt" style=" color:#fff">
            <span>{{list.leagueName}}</span>
          </div>
          <div class="listHead row allAlignment">
            <div class="txt">
              <!-- <div class="spanCol">第{{scoreDetails.cp == 1?'一' : scoreDetails.cp ==2 ? "二": scoreDetails.cp ==3 ? "三":scoreDetails.cp== 4 ? "四":"五" }}节</div> -->
              <div v-if="matchScoreDetails.schedule == 1" class="spanCol"> 第一节</div>
              <div v-if="matchScoreDetails.schedule == 2" class="spanCol"> 第二节</div>
              <div v-if="matchScoreDetails.schedule == 3" class="spanCol"> 第三节</div>
              <div v-if="matchScoreDetails.schedule == 4" class="spanCol"> 第四节</div>
              <div v-if="matchScoreDetails.schedule == 5" class="spanCol"> 第五节</div>
              <!-- <div class="delay">天气原因延期</div> -->
            </div>
            <div class="headerTop row rightAlignment">
              <span  v-for="(item,i) in matchScoreDetails.best" :key="item.id">{{i+1}}</span>
              <span class="mg-5">分数</span>
              <span class="mg-5">盘</span>
              <span class="mg-5" style="width:0.8rem;">总局</span>
            </div>
          </div>
          <!-- 主队 -->
          <div class="row allAlignment list">
            <div class="row">
              <!-- <div class="ballhold" style="color: rgb(197, 210, 60);">•</div> -->
              <div class="team" style="text-align:left;">{{list.home_team}}</div>
            </div>
            <div class="score row rightAlignment">
              <span class="spanCol">{{matchScoreDetails.sc_1th_H}}</span>
              <span class="spanCol">{{matchScoreDetails.sc_2th_H}}</span>
              <span class="spanCol">{{matchScoreDetails.sc_3th_H}}</span>
              <span v-if=" matchScoreDetails.best > 3" class="spanCol">{{matchScoreDetails.sc_4th_H}}</span>
              <span v-if="  matchScoreDetails.best > 3" class="spanCol">{{matchScoreDetails.sc_5th_H}}</span>
              <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.spot_H}}</span>
              <span class="mg-5 mark">{{matchScoreDetails.disc_H}}</span>
              <span class="mg-5 mark sumCl" style="width:0.8rem">{{matchScoreDetails.game_num_H}}</span>
            </div>
          </div>
          <!-- 客队 -->
          <div class="row allAlignment list">
            <div class="row">
              <!-- <span class="ballhold" style="color:#fff;">•</span> -->
              <span class="team" style="text-align:left;">{{list.guest_team}}</span>
            </div>
            <div class="score row rightAlignment">
              <span class="spanCol">{{matchScoreDetails.sc_1th_C}}</span>
              <span class="spanCol">{{matchScoreDetails.sc_2th_C}}</span>
              <span class="spanCol">{{matchScoreDetails.sc_3th_C}}</span>
              <span v-if=" matchScoreDetails.best > 3" class="spanCol">{{matchScoreDetails.sc_4th_C}}</span>
              <span v-if=" matchScoreDetails.best > 3" class="spanCol">{{matchScoreDetails.sc_5th_C}}</span>
              <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.spot_C}}</span>
              <span class="mg-5 mark">{{matchScoreDetails.disc_C}}</span>
              <span class="mg-5 mark sumCl" style="width:0.8rem;">{{matchScoreDetails.game_num_C}}</span>
            </div>
          </div>
          <div></div>
        </div>
        <!-- </div>
        </div>-->
      </div>

    <!-- 原始头部 -->
      <div class="gambling" v-show="this.list" v-if="headStatus == 0">
        <div class="leagueMatch row average">
          <yd-button size="large" @click.native="show = true"></yd-button>
          <div class="leagueName">
            <span>{{list.leagueName}}</span>
          </div>
          <div class="teamName">
            <span>{{list.home_team}}</span>
            <div class="vs">vs</div>
            <span>{{list.guest_team}}</span>
          </div>
          <div class="time" :style="status == true?'':'width:2rem;'">
            <span>{{list.match_ptime? list.match_ptime :list.match_time }}</span>
          </div>
          <div v-if="satatus" class="icon" :class="status == true ? 'rotate':'backRotate'">
            <i></i>
          </div>
        </div>
        <!-- 模态框 -->
        <yd-popup v-if="satatus" v-model="show" position="center" width="90%">
          <div class="modality">
            <div
              class="list"
              v-for="(item,index) in list.league"
              :key="index"
              @click="check(index,item.match_id)"
            >
              <span :class="match_id == item.match_id?'col':''">{{item.home_team}}</span>
              <span :class="match_id == item.match_id?'col':''">v</span>
              <span :class="match_id == item.match_id?'col':''">{{item.guest_team}}</span>
            </div>
          </div>
        </yd-popup>
      </div>
      <div class="box">
          <div id="NavSlide">
            <nav>
              <p v-for="(item,$index) in key" @click="toggleNav($index)" :key="$index">
                <span :class="{active:$index==active}">{{item}}</span>
              </p>
            </nav>
          </div>
        </div>
      <div v-show="isShow">
        <!--让球大小-->
        <div v-show="Single =='进球:大/小' || isAll  ">
          <goal></goal>
        </div>
        <!--让球1-->
        <div v-show="Single =='让球' || isAll  ">
          <LetBall></LetBall>
        </div>
        <!--最先/最后进球-->
        <div v-show="Single =='首粒入球/最后一粒入球' || isAll  ">
          <StartEnd></StartEnd>
        </div>
        <!-- 总进球数 -->
        <div v-show="Single =='总进球数' || isAll  ">
          <GoalSize></GoalSize>
        </div>
        <!-- 根据球类加载独赢/冠军 -->
        <div v-if="name =='篮球' || name =='棒球' || name =='足球'">
          <!--独赢-->
          <div v-show="Single =='独赢'|| Single =='独赢盘'|| isAll  ">
            <OnlyWin></OnlyWin>
          </div>
        </div>
        <div v-else>
          <!-- 冠军 -->
          <div v-show="Single =='冠军' || isAll ">
            <MatchChampion></MatchChampion>
          </div>
        </div>
        <!--独赢-->
        <!-- <div v-show="Single =='独赢'|| Single =='独赢盘'|| isAll  ">
          <OnlyWin></OnlyWin>
        </div> -->
        <!-- 波胆 -->
        <div v-show="Single =='波胆' || isAll ">
          <div v-if="name == '网球'">
            <TennisWaveBravery/>
          </div>
          <div v-else>
             <WaveBladder></WaveBladder>
          </div>
        </div>
        <!--入球数单双-->
        <div v-show="Single =='进球:单/双'||  Single =='总得分:单/双' ||  Single =='总局数:单双' || isAll  ">
          <div v-if="name =='网球' ">
            <InningsSingleDouble></InningsSingleDouble>
          </div> 
          <div v-else>
            <GoalSingleAndDouble></GoalSingleAndDouble>
          </div>
        </div>
        <!-- 总分:单/双 -->
         <div v-show="(Single =='总分:单/双' || isAll) && (name =='篮球' || name =='棒球') ">
           <TotalScoreSingleDouble/>
          </div>
        <!--半场/全场-->
        <div v-show="Single =='半场/全场'|| isAll ">
          <FullHalf></FullHalf>
        </div>
        <!-- 角球
        <div v-show="Single =='角球' || isAll ">
          <Corner></Corner>
        </div> -->
        <!-- 球队进球大小 -->
        <div v-show="Single =='球队进球数:大/小' || isAll ">
          <TeamSize></TeamSize>
        </div>
        <!-- 球队得分:大/小 -->
        <div v-show="Single =='球队得分:大/小' || isAll ">
          <TeamGoalSize></TeamGoalSize>
        </div>
        <!-- 总得分:大/小 -->
        <div v-show="Single =='总分:大/小' || isAll && name =='篮球'  ">
            <TotalScoreSize></TotalScoreSize>
        </div>
        <!-- 总得分:大/小 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <div v-if="name !='网球' && name !='棒球'">
            <TotalScoreSize></TotalScoreSize>
          </div>
        </div>
        <!-- 总得分:大/小 前五 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <div v-if="name =='棒球'">
            <TotalScoreSizeFive></TotalScoreSizeFive>
          </div>
        </div>
        <!-- 总得分:大/小 上半场 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <div v-if="name !='网球' && name !='棒球'">
            <TotalScoreHalfSize></TotalScoreHalfSize>
          </div>
        </div>
        <!-- 总得分:大/小  节数-->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <div v-if="name !='网球'">
            <TotalScoreSectionSize></TotalScoreSectionSize>
          </div>  
        </div>
        <!-- 球队得分最后一位数 -->
        <div v-show="Single =='球队得分:最后一位数' || isAll ">
          <TeamScoreLast></TeamScoreLast>
        </div>
        <!-- 总局数:大/小 -->
        <div v-show="Single =='总局数:大/小' || isAll  ">  
          <div v-if="name =='网球'" >
            <InningsSize></InningsSize>
          </div> 
        </div>
        <!-- 总局数:单/双
        <div v-show="Single =='总局数单双' || isAll ">
          <InningsSingleDouble></InningsSingleDouble>
        </div> -->
        <!-- 冠军 -->
        <!-- <div v-show="Single =='冠军' || isAll ">
          <MatchChampion></MatchChampion>
        </div> -->
         <!-- 让盘 -->
        <div v-show="Single =='让盘' || isAll ">
          <LetPlate></LetPlate>
        </div>

        <!-- 让局 -->
        <div v-show="Single =='让局' || isAll ">
          <LetBureau></LetBureau>
        </div>
      </div>
      <div v-if="!isShow">
        <NotOpend :title="tipsTitle"></NotOpend>
      </div>
      <!-- <StLinkFooter></StLinkFooter> -->
      <BettingWindow v-if="isBettingWindow== '100'"/>
    </div>
  </div>
</template>

<script>
import Goal from "@/components/StGoal";
import LetBall from "@/components/StLetBall";
import NotOpend from "@/components/StNotOpend";
import Loading from "@/components/StLoading";
import WaveBladder from "@/components/StWaveBladder";
import StLinkFooter from "@/components/StLinkFooter";
import SportsHead from "@/components/StSportsHead";
import OnlyWin from "@/components/StOnlyWin";
import GoalSize from "@/components/StGoalSize";
import StartEnd from "@/components/StStartEnd";
import FullHalf from "@/components/StFullHalf";
import TeamGoalSize from "@/components/StTeamGoalSize";
import TeamSize from "@/components/StTeamSize";
import TotalScoreSize from "@/components/StTotalScoreSize";
import TotalScoreSizeFive from "@/components/StTotalScoreSizeFive";
import TotalScoreHalfSize from "@/components/StTotalScoreHalfSize";
import TotalScoreSectionSize from "@/components/StTotalScoreSectionSize";
import TeamScoreLast from "@/components/StTeamScoreLast";
import GoalSingleAndDouble from "@/components/StGoalSingleAndDouble";
import Corner from "@/components/StCorner";
import TotalScoreSingleDouble from "@/components/StTotalScoreSingleDouble";
import BettingWindow from "@/components/StBettingWindow";
import MatchChampion from "@/components/StMatchChampion";
import InningsSingleDouble from "@/components/StInningsSingleDouble";
import InningsSize from "@/components/StInningsSize";
import LetPlate from "@/components/StLetPlate";
import LetBureau from "@/components/StLetBureau";
import TennisWaveBravery from "@/components/StTennisWaveBravery";
export default {
  data() {
    return {
      name:this.$route.query.name, // 球名
      searchreturn: require("@/assets/st-imges/returnbox.png"),
      gameCode: this.$route.query.gameCode, //别名
      match_id: "",
      list:'', //数据
      previousStorage:{},//前一次list储存数据
      key: [], //存储key值进行判定
      isShow: "", //更具数据是否显示
      getBettingIsShow:false,// 判断投注框背景可否滚动
      status: false,
      tipsTitle: "暂无相关数据信息",
      active: 0,// 投注页是否打开
      isBettingWindow: '-1',
      // isIphone: false,//是否ios
      // isAndroid: false,//是否Android
      show: false, //是否显示模态框
      satatus: true,
      isAll: true,
      Single: "",
      timers : true,//是否开启轮询
      headStatus : 0 ,// 头部显示滚球（1为足球，2为篮球，3为棒球，4为网球），0为普通
      matchScoreDetails:'',//比赛得分详情
    };
  },
  methods: {
    // 返回上一页
    isreturn() {
      history.go(-1);
    },
    //滚球比赛比分详情
    scoreDetails(data){
      //比赛得分详细
      let matchScoreDetails  = JSON.parse(data);
      // console.log(matchScoreDetails);
      if(matchScoreDetails.schedule){
        if(matchScoreDetails.schedule.startsWith('Topof')){
          matchScoreDetails.type = 'h'
        }else if(matchScoreDetails.schedule.startsWith('Bottomof')){
          matchScoreDetails.type = 'g'
        }
        matchScoreDetails.schedule =  matchScoreDetails.schedule.match(/\d+/g)[0]
        this.matchScoreDetails = matchScoreDetails;
      }
    },

    //页面初始化接口请求
    getAjax: function(game_code, matchID,oddsType) {
      this.$http.get(this.$ports.gambling.matchOdds, {
          oddsType,
          game_code,
          matchID
        }).then(res => {
          if (res.data.status == 1 && res.data.data  ) {

            //滚球头部数据处理
            // console.log(res.data.data)
            if(res.data.data.result_mark){
              this.scoreDetails(res.data.data.result_mark);
            }
            //console.log(res.data.data.result_mark,'比赛得分详细');

            // //最新数据和上一次的数据匹配并储存历史数据
            let storage =this.previousStorage  != {} ? this.previousStorage : '';
            // console.log(this.previousStorage);
            let obj={},historyList = [];
            if(storage && storage.match_id == res.data.data.match_id  && storage.oddsData.length > 0){
                res.data.data.oddsData.forEach(e=>{
                  storage.oddsData.forEach((res,i)=>{
                    if(e.odds_code == res.odds_code){
                      if(e.sort == res.sort){
                        if(e.odds * 1 > res.odds_data * 1){
                          e.change ='add';
                        }else if(e.odds * 1  < res.odds_data * 1){
                          e.change = 'red';
                        }else{
                          e.change ='';
                        }
                      }
                    }
                  })
                })
            }

            this.previousStorage.match_id = res.data.data.match_id;
            res.data.data.oddsData.forEach(e=>{
              // console.log(e);
              historyList.push({
                odds_id:e.id,
                odds_data:e.odds,
                odds_code:e.odds_code,
                sort:e.sort
              })
            })
            this.previousStorage.oddsData = [];
            this.previousStorage.oddsData = historyList;

            this.key = [];
            if ( res.data.data.oddsData == [] ||res.data.data.oddsData.length == 0 ||res.data.data.oddsData == null) {
              this.$store.dispatch("GETSHOW", false);
              this.isShow = false;
              return false;
            }
            this.satatus  = res.data.data.league.length > 1 ? true :false;
            //最新玩法赔率
            let arrayData = [];
            let key =res.data.data.p_code_array ;//Object.keys(res.data.data.p_code_array);
            let values = this.$store.getters.getPlayAlias;
            this.isShow = true;
            this.key = ["所有盘口"];
            key.forEach((e, index) => {

              //组合详情玩法页面导航栏
              values.forEach(val=>{
                if(e == val.odds_code && this.$store.getters.getBallId == val.game_code){
                  if((this.name == '篮球' && val.odds_name =='入球数单双') || (this.name == '棒球' && val.odds_name =='入球数单双')){
                    val.odds_name ='总分:单双'
                  }
                  this.key.push(val.odds_name);
                }
              })

              //根据玩法分组本次赔率数据
              let stripData = [];
              res.data.data.oddsData.forEach(data => {
                if (data.p_code == e) {
                  stripData.push(data);
                }
                arrayData[index] = stripData;
              });
            });

            // // //更新数据和上一次的数据匹配
            // let storage =this.previousStorage ? JSON.parse(this.previousStorage) :'';
            // // console.log('storage',storage.oddsData)
            // if(storage && storage.match_id == res.data.data.match_id  && storage.oddsData.length > 0){
            //   arrayData.forEach((e,ind)=>{
            //     storage.oddsData.forEach((res,index)=>{
            //       if(e[0].p_code == res[0].p_code){
            //         e.forEach(dat=>{
            //           res.forEach((val,i)=>{
            //             console.log(dat,val);
            //             if(dat.id == val.id){
            //               console.log(dat.odds,val.odds);
            //               if(dat.odds * 1 > val.odds * 1){
            //                 dat.change ='add';
            //               }else if(dat.odds * 1  < val.odds * 1){
            //                 dat.change = 'red';
            //               }else{
            //                 dat.change ='';
            //               }
            //               res.splice(i,1)
            //             }
            //           })
            //         })
            //         storage.oddsData.splice(index,1)
            //       }
            //     })
            //   })
            // }

            
            // console.log(arrayData);
            res.data.data.oddsData = arrayData;
           // this.previousStorage = JSON.stringify(res.data.data)//JSON.stringfy();
            this.list = res.data.data;
            
            this.$store.dispatch("GETGAMERATIO", res.data.data);
            //console.log("数据源", arrayData);
          }
          let _this=this;
          setTimeout(()=>{
            this.$store.dispatch("GETSHOW", false);
          },1000)
        });
      },

    /**
     * 切换赛事
     */
    check(index, match_id) {
      let oddsType = localStorage.getItem('activity');
      this.show = false;
      if (this.list.match_id == match_id) return false;
      this.match_id = match_id;
      this.$store.dispatch("MACTH_ID", match_id);
      this.$store.dispatch("GETSHOW", true);
      this.getAjax(this.gameCode, match_id,oddsType);
    },

    /**
     * 切换玩法类型
     */
    toggleNav: function(index) {
      this.active = index;
      if (this.key[index] == "所有盘口") {
        this.isAll = true;
      } else {
        this.isAll = false;
        this.Single = this.key[index];
      }
    }
  },

  /**
   * 计算属性
   */
  computed: {
    getIsBettingType() {
      return this.$store.getters.getIsBetting;
    },
    // 获取投注框展示状态
    getBettingCase(){
        //console.log(this.$store.getters.getNoRoll,'aaaaa')
        return this.$store.getters.getNoRoll
    },
  },

  /**
   * 监听器
   */
  watch: {
    // 监听投注框开关
    getIsBettingType(val) {
      if(val=='-1'){
        this.$store.dispatch('SET_NOROLL',false)
      }
      this.isBettingWindow = val;
    },
    getBettingCase(val){
       this.getBettingIsShow=val
    },
  },

  /**
   * 
   */
  mounted() {
    let ballId = this.$store.getters.getBallId;
    let acty = this.$store.getters.getActivity;
    if(acty == 'StRollBall'){
      if(ballId == 'zq'){
        this.headStatus = 1;
      }else if(ballId == 'lq'){
        this.headStatus = 2;
      }else if(ballId == 'bq'){
        this.headStatus = 3;
      }else if(ballId == 'wq'){
        this.headStatus = 4
      }
    }else{
      this.headStatus = 0;
    }
    let _this = this;
    this.match_id = this.$store.getters.getMatchId;
    let oddsType = localStorage.getItem('activity');
    this.$store.dispatch("GETSHOW", true);
    this.getAjax(this.gameCode, this.match_id,oddsType);
    //this.timers  =true;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getAjax(_this.gameCode, _this.match_id,oddsType);
       // _this.updateAjax(_this.gameCode, _this.match_id);
      }else{
        clearInterval(timing);
      }
    },(1000*15));
    if (this.$store.getters.getIsBetting == '100') {
      this.isBettingWindow = 100;
    }
  },

  /**
   * 关闭当前页面钩子函数
   */
  beforeDestroy() {
    this.timers = false;
  },
  components: {
    Corner,
    LetBall,
    Goal,
    WaveBladder,
    StLinkFooter,
    SportsHead,
    OnlyWin,
    StartEnd,
    GoalSize,
    FullHalf,
    GoalSingleAndDouble,
    TeamGoalSize,
    TeamSize,
    Loading,
    NotOpend,
    BettingWindow,
    TotalScoreSize,
    TotalScoreSizeFive,
    TotalScoreHalfSize,
    TotalScoreSectionSize,
    TeamScoreLast,
    TotalScoreSingleDouble,
    MatchChampion,
    InningsSingleDouble,
    InningsSize,
    LetPlate,
    LetBureau,
    TennisWaveBravery
  }
};
</script>

<style scoped>
/* 禁止滚动 */
.noscoll{
  position: fixed;
   width: 100%;
  top: 0;
  left: 0;
}
/* 头部 */
.Serch {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #6a6a6a, #565656);
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.33rem;
}
.returnimg {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  /* padding: 0 0.32rem; */
  background-color: #626262;
}
.gambling {
  background: #f8f8f8;
}
.leagueMatch {
  position: relative;
  padding: 0.3rem 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e4e4e4;
  background: linear-gradient(to top, #ffe9c9, #fff3e2);
}
.leagueMatch div {
  font-size: 0.28rem;
  text-align: left;
  color: #333333;
}
.leagueName {
  width: 2.26rem;
}
.leagueMatch .teamName {
  text-align: center;
}
.teamName .vs {
  text-align: center;
  font-size: 0.24rem;
  color: #fd8f26;
}
.leagueMatch .time {
  width: 1.3rem;
  color: #333333;
  font-size: 0.24rem;
  text-align: center;
}
.leagueMatch .icon i {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
}
.leagueMatch .rotate {
  transform: rotate(180deg);
  transition: 0.2s;
}
.leagueMatch .backRotate {
  transform: rotate(0deg);
  transition: 0.2s;
}

.box {
  padding: 0 0.14rem;
  background: #f8f8f8;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
  height: 0.88rem;
}
#NavSlide nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.2rem 0 0;
  margin: 0 0.1rem 0 0;
  color: #b8b8b8;
  height: 0.88rem;
  line-height: 0.88rem;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}
#NavSlide .fixadd {
  position: absolute;
  right: -4px;
  background-color: #31c17b;
}
button.yd-btn-block {
  background: #f8f8f8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1; */
  margin: 0;
  opacity: 0;
}
.modality {
  text-align: center;
  background: #fbfbfb;
  padding: 0.2rem 0;
  height: 5rem;
  /* overflow: hidden; */
}
.modality span {
  color: #000000;
  font-size: 0.28rem;
}
.modality div {
  /* margin: 0.06rem 0; */
  padding: 0.2rem 0;
  background: #fbfbfb;
  border-bottom: 1px solid #e4e4e4;
}
.modality div .col {
  color: #fd8f26;
}
.lod{
    z-index: 999;
    position: fixed;
    width: 100%;
}
/* 滚球足球头部 */
/* 棒球头部 */
.bqHead {
  background: url("../../../assets/st-imges/1baseball.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.zqHead {
  color: #fff;
  background: url("../../../assets/st-imges/1football.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.eliminate span {
  display: block;
  width: 0.1rem;
  height: 0.1rem;
  background: #ccc;
  transform: rotate(45deg);
}
.spanBox {
  background: orange !important;
}
.ballhold{
  /* color:#fff; */
  font-size: 0.2rem;
  margin-right: 4px;
}
.current{
  color: orange;
}
.session{
  width:0.3rem;
}
.mark{
  background: hsla(0, 0%, 100%, 0.25);
}
.scoreInfo{
  line-height: 0.5rem;
  padding: 0 0.1rem ;
}
.mg-session{
  width:0.7rem;
  
}
.bqHead .pd-10 {
  padding: 0.1rem;
}
.bqHead .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match .info {
  background: rgba(0, 0, 0, 0.5);
  height: 0.52rem;
  line-height: 0.52rem;
  font-size: 15px;
  text-align: center;
  font-size: 0.28rem;
}
.match .info .pk,
.match .tit .scene {
  font-weight: bold;
  color: rgb(254, 146, 0);
}
.tit .time {
  color: #bd4700;
}
.tit span{
  font-size: 0.26rem;
}
.welcome {
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #4e4e4e;
  color: black;
}
/* 篮球头部 */
.header .match{
    background: #c28d47;
    background-image: url("../../../assets/st-imges/1basketball.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .match .live{
    padding: 0.06rem;
}
/* .live .tit{
    height: 30px;
    line-height: 30px;
    font-size: 0.14rem;
} */
.match .info{
    margin-top: 0.1rem;
    position: relative;
    height: auto;
    background: rgba(0,0,0,.5);
    line-height: 52px;
    font-size: 15px;
    text-align: center;
}
.infoBody{
    background: #000;
    opacity: .85;
    height: 0.52rem;
    padding-left: 0.1rem;
    font-size: 0.14rem;
}
.matchTime span{
    display: inline-block;
}
.matchTime .scene{
    color: #ff9200;
    margin-right: 0.06rem;
}
.matchTime .time{
    color: #b4b4b4;

}
.right_info_row_qt{
    width: 0.85rem;
    font-size: 0.12rem;
    text-align: center;
    /* padding: 0.04rem; */
    color: #787878;
    /* box-sizing: border-box; */
    /* font-weight: 700;
    font-family: serif; */
}
.infoRow{
    padding-left: 0.1rem;
}
.scence{
    width: 0.75rem;
    padding: 0;
    /* padding-top: 0.19rem; */
}
.infoItem{
    height: 0.5rem;
    line-height: 0.24rem;
    width: auto
}
.infoBox{
    width: 2.73rem;
    height:0.5rem;
        display: flex;
    align-items: center;
    justify-content: space-between;
    /* right: 0; */
    /* position: absolute; */
}
.infoBox > div{
    width: .75rem;
}
.infoNum{
    width: 0.25rem;
    font-size: 0.13rem;
    line-height: 0.28rem;
    padding: 0;
    height: 100%;
    line-height: 0.5rem;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-family: sans-serif;

}
.scenceNum{
    background: hsla(0,0%,100%,.16);
    width: 0.52rem;
    margin-left: 1px;
}
.infoItem .team{
    font-size: 0.16rem;
}
.col{
    color: #ff9200;
}
.ycol{
    color:#dcbc4c;
}
/* 网球头部 */
.tennisHead {
  background: url("../../../assets/st-imges/tennisball.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: auto;
}
.ordinaryHead .match .info{
  display: flex;
}
.match {
  color: #fff;
  height: auto;
}
.match .tit {
  height: 0.32rem;
  line-height: 0.32rem;
  /* margin-top: -4px; */
}
.ballTable{
   background: rgba(0, 0, 0, 0.2);
}
.listHead {
  padding: 0 0.1rem;
  line-height: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}
.listHead .txt-c-0 {
  color: orange;
}
.listHead .spanCol{
  color: orange;
}
.headerTop {
  width: 50%;
}
.score {
  width: 50%;
}
.score span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.score span.mg-5 {
  width: 0.7rem;
}
.headerTop span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.headerTop span.mg-5 {
  width: 0.7rem;
}
.mark {
  background: hsla(0, 0%, 100%, 0.25);
}
.list {
  background: hsla(0, 0%, 100%, 0.2);
  line-height: 0.4rem;
  padding: 0 0.1rem;
  color: #fff;
}

.cl {
  color: orange;
}
.sumCl {
  color: #ff0;
}
.welcome{
  height: .5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #898989;
  color: #fff;
}
.ordinaryHead {
  background: url("../../../assets/st-imges/1football.png") no-repeat;
  background-size: 100% 100%;

  /* padding: 0.04rem; */
  /* height: 1.2rem; */
  /* line-height: 1.2rem; */
}
.ordinaryHead .match {
  color: #fff;
}
.ordinaryHead .match .info {
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ordinaryHead .match .info div span{
  font-size: 0.22rem;
}
.match .time {
  font-weight: 400;
  color: #bd4700;
  margin-left: 0.05rem;
}
.live-score {
  padding: 0 8%;
}
.attack{
  color: rgb(197, 210, 60);
}
</style>