<!-- 赛况 -->
<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div id="msgbar" v-if="[0, 17].includes(game_info.status)">比赛暂未开始</div>
    <section style="background-color: rgb(255, 255, 255); margin-top: 0px;" class="match_content">
      <div class="subMain zr-table">
        <!-- 直播数据 start-->
        <div id="liveBox">
          <div class="match live_box" v-if="game_goal_data.goal && game_goal_data.goal.length > 0">
            <div class="live-title" v-if="[4, 7, 8, 9, 10, 11, 12].includes(game_info.status)">
              <img style="width: 20px" src="/public/images/live/koushao.png">
              <span>结束比赛</span>
            </div>

            <div class="live">
              <div class="liveTxt" v-for="(val, index) in game_goal_data.goal" :key="index">

                <template v-if="event_list.includes(val.Event)"><!-- 进球 -->
                  <div class="cell left" :style="`visibility:${val.Type == '1' ? 'visible' : 'hidden'}`">
                    <div class="name" v-if="val.Event == 0">
                      <div>{{ val.Score }}{{ getMemo(val.Minute, val.outtime, "竞足比分") }}</div>
                      <div>{{ val.Pname ? val.Pname.substr(0, 7) : '' }}</div>
                      <div v-show="val.AssistedPname" class="ap_name">(助攻){{ val.AssistedPname ? val.AssistedPname.substr(0, 7) : '' }}</div>
                    </div>
                    <span v-else>{{ val.Pname ? val.Pname.substr(0, 7) : '' }}{{ getMemo(val.Minute, val.outtime, "竞足比分") }}</span>
                    <span class="imgspan"><img :src="`https://img2.ydniu.com/app/images/live/${img_names[event_list[val.Event]]}.png`" /></span>
                  </div>
                  <div class="cell time">{{ getTime(val.Minute, val.outtime) }}</div>
                  <div class="cell right" :style="`visibility:${val.Type == '2' ? 'visible' : 'hidden'}`">
                    <span class="imgspan"><img :src="`https://img2.ydniu.com/app/images/live/${img_names[event_list[val.Event]]}.png`" /></span>
                    <div class="name" v-if="val.Event == 0">
                      <div>{{ val.Score }}{{ getMemo(val.Minute, val.outtime, "竞足比分") }}</div>
                      <div>{{ val.Pname ? val.Pname.substr(0, 7) : '' }}</div>
                      <div v-show="val.AssistedPname" class="ap_name">(助攻){{ val.AssistedPname ? val.AssistedPname.substr(0, 7) : '' }}</div>
                    </div>
                    <span v-else>{{ val.Pname ? val.Pname.substr(0, 7) : '' }}{{ getMemo(val.Minute, val.outtime, "竞足比分") }}</span>
                  </div>
                </template>

                <template v-else-if="val.Type == 1 || val.Type == 2"><!--换人-->
                  <div class="cell left" :style="`visibility:${val.Type == '1' ? 'visible' : 'hidden'}`">
                    <div class="name">
                      <div>{{ val.Upname ? val.Upname.substr(0, 7) : '' }}</div>
                      <div>{{ val.Downname ? val.Downname.substr(0, 7) : '' }}{{ getMemo(val.Minute, val.outtime, "") }}</div>
                    </div>
                    <span class="imgspan">
                      <div><img class="huanren" src="https://img2.ydniu.com/app/images/live/huanren1.png" /></div>
                      <div><img class="huanren" src="https://img2.ydniu.com/app/images/live/huanren2.png" /></div>
                    </span>
                  </div>
                  <div class="cell time">{{ getTime(val.Minute, val.outtime) }}</div>
                  <div class="cell right" :style="`visibility:${val.Type == '2' ? 'visible' : 'hidden'}`">
                    <span class="imgspan">
                      <div><img class="huanren" src="https://img2.ydniu.com/app/images/live/huanren1.png" /></div>
                      <div><img class="huanren" src="https://img2.ydniu.com/app/images/live/huanren2.png" /></div>
                    </span>
                    <div class="name">
                      <div>{{ val.Upname ? val.Upname.substr(0, 7) : '' }}</div>
                      <div>{{ val.Downname ? val.Downname.substr(0, 7) : '' }}{{ getMemo(val.Minute, val.outtime, "") }}</div>
                    </div>
                  </div>
                </template>
              </div>

            </div>
            <div class="live-title">
              <img style="width: 20px;" src="/public/images/live/koushao.png">
              <span>开始比赛</span>
            </div>
          </div>
          <div class="match" v-if="game_goal_data.stat && game_goal_data.stat.length > 0">
            <div class="matchsm">
              <div class="sm">
                <span>
                  <img src="/public/images/live/jiaoqiu.png">角球</span>
                <span>
                  <img src="/public/images/live/jinqiu.png">进球</span>
                <span>
                  <img src="/public/images/live/dianqiu.png">点球</span>
                <span>
                  <img src="/public/images/live/wulong.png">乌龙</span>
              </div>
              <div class="sm">
                <span>
                  <img src="/public/images/live/hongpai.png">红牌</span>
                <span>
                  <img src="/public/images/live/huangpai.png">黄牌</span>
                <span>
                  <img src="/public/images/live/bianhong.png">变红</span>
                <span>
                  <img src="/public/images/live/huanren.png">换人</span>
              </div>
            </div>
            <div class="matchvs" v-show="game_goal_data.stat && game_goal_data.stat.length > 0">
              <div class="zr-title">
                <div class=""><img :src="game_info.host_team?.logo">
                  <span class="col-333" style="color:#333">{{ game_info.host_team?.short_name }}</span>
                </div>
                <div style="color:#d5d5d5;">VS</div>
                <div class="">
                  <span class="col-333" style="color:#333">{{ game_info.away_team?.short_name }}</span>
                  <img :src="game_info.away_team?.logo">
                </div>
              </div>
              <div class="vs">
                <div class="vszr" v-for="(val, index) in game_goal_data.stat" :key="index">
                  <div class="team">
                    <div style="flex:0.6;font-size:16px;text-align:right;">{{ val.Home }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <div class="bar">
                      <span class="bar2" :style="`width:${val.bar2Width}%;background-color: rgb(238, 239, 234);`"></span>
                      <span class="bar1" :style="`width:${val.bar1Width}%;background:${val.bar1Width == val.bar2Width ? '#dfe0db' : val.bar1Width > val.bar2Width ? '#8086a2' : '#dfe0db'}`"></span>
                    </div>
                  </div>
                  <div>{{ val.Name }}</div>
                  <div class="team">
                    <div class="bar">
                      <span class="bar2" :style="`width:${val.bar2Width}%;background:${val.bar1Width == val.bar2Width ? '#dfe0db' : val.bar1Width > val.bar2Width ? '#dfe0db' : '#8086a2'}`"></span>
                      <span class="bar1" :style="`width:${val.bar1Width}%;background-color: rgb(238, 239, 234);`"></span>
                    </div>
                    <div style="flex:0.6;font-size:16px;;text-align:left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ val.Away }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 直播数据 end-->
        <div class="match" id="playStarts" style="margin-bottom:0;">
          <div class="zr-title">
            <div class=""><img :src="game_info.host_team?.logo" onerror="this.src='/public/images/team_logo.png'">
              <span class="col-333" style="color:#e18635">{{ game_prediction.Lineup?.HFormation }}</span>
            </div>
            <div style="color:#d5d5d5;">正式阵型</div>
            <div class="line-title">
              <span class="col-333" style="color:#e18635">{{ game_prediction.Lineup?.AFormation }}</span>
              <img :src="game_info.away_team?.logo" onerror="this.src='/public/images/team_logo.png'">
            </div>
          </div>
        </div>
        <!-- 正式阵型 -->
        <div class="match" id="formal_player">
          <div class="zr lineup" v-if="game_prediction.Lineup?.HomePlayers">
            <div class="clearfix">
              <div class="left0">
                <div class="item_box" v-for="item in game_prediction.Lineup?.HomePlayers" v-show="item.Status == 3" :key="item._id">
                  <div class="col_img"><img style="border-radius: 50%;" :src="item.Id > 0 ? getLogoImg(item.Id) : player_default_img" :v-lazy="item.Id > 0 ? getLogoImg(item.Id) : player_default_img">
                  </div>
                  <div class="name_col">
                    <div class="name">{{ item.Name }}</div>
                    <div class="pos">
                      <span>{{ item.ShitNo }}</span><span>{{ ["守门员", "后卫", "中场", "前锋"][item.Pos] || "" }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right0">
                <div class="item_box" v-for="item in game_prediction.Lineup?.AwayPlayers" v-show="item.Status == 3" :key="item._id">
                  <div class="name_col">
                    <div class="name">{{ item.Name }}</div>
                    <div class="pos">
                      <span>{{ item.ShitNo }}</span><span>{{ ["守门员", "后卫", "中场", "前锋"][item.Pos] || "" }}</span>
                    </div>
                  </div>
                  <div class="col_img"><img style="border-radius: 50%;" :src="item.Id > 0 ? getLogoImg(item.Id) : player_default_img" :v-lazy="item.Id > 0 ? getLogoImg(item.Id) : player_default_img">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="injury-stop-info">
            <div class="kong">暂无信息</div>
          </div>
        </div>
        <!-- 替补 -->
        <div class="match" id="substitute_player">
          <div class="zr-title" style="display:flex;justify-content: center;align-items: center;text-align:center;color:#d5d5d5;">
            替补球员</div>
          <div class="zr lineup" v-if="game_prediction.Lineup?.HomePlayers">
            <div class="clearfix">
              <div class="left1">
                <div class="item_box" v-for="item in game_prediction.Lineup?.HomePlayers" v-show="item.Status == 0" :key="item._id">
                  <div class="col_img"><img style="border-radius: 50%;" :src="item.Id > 0 ? getLogoImg(item.Id) : player_default_img" :v-lazy="item.Id > 0 ? getLogoImg(item.Id) : player_default_img">
                  </div>
                  <div class="name_col">
                    <div class="name">{{ item.Name }}</div>
                    <div class="pos">
                      <span>{{ item.ShitNo }}</span><span>{{ ["守门员", "后卫", "中场", "前锋"][item.Pos] || "" }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right1">
                <div class="item_box" v-for="item in game_prediction.Lineup?.AwayPlayers" v-show="item.Status == 0" :key="item._id">
                  <div class="name_col">
                    <div class="name">{{ item.Name }}</div>
                    <div class="pos">
                      <span>{{ item.ShitNo }}</span><span>{{ ["守门员", "后卫", "中场", "前锋"][item.Pos] || "" }}</span>
                    </div>
                  </div>
                  <div class="col_img"><img style="border-radius: 50%;" :src="item.Id > 0 ? getLogoImg(item.Id) : player_default_img" :v-lazy="item.Id > 0 ? getLogoImg(item.Id) : player_default_img">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="injury-stop-info">
            <div class="kong">暂无信息</div>
          </div>
        </div>
        <!-- 伤停信息 -->
        <div class="match">
          <div class="zr-title" style="display:flex;justify-content: center;align-items: center;text-align:center;color:#d5d5d5;">
            伤停信息</div>
          <div class="injury-stop-info">
            <div class="kong">暂无信息</div>
          </div>
        </div>
      </div>
    </section>
  </van-pull-refresh>
</template>

<script lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import * as game_api from '@/api/game_api';
import { useStore } from 'vuex';
import { useRoute,onBeforeRouteUpdate } from 'vue-router';
import { default as _ } from 'lodash';
import { showLoadingToast, closeToast, showToast } from "vant";
export default {
  name: 'GameSituation',
  components: {},
  setup () {
    const store: any = useStore();
    const route = useRoute();
    const game_info: any = computed(() => store.state.gameInfo);
    // const liveStore = computed(() => store.state.liveStore);
    const game_prediction: any = ref({});
    const game_goal_data: any = ref({
      goal: null,
      substitutes: null,
      stat: null,
    });
    const event_list = ref([0, 1, 2, 3, 4, 5, 8]);
    const img_names = ref(["jinqiu", "dianqiu", "wulong", "huangpai", "hongpai", "bianhong", "dianqiu"]);
    const loading = ref(true);
    const no_data = ref(true);
    const player_default_img = ref('https://img2.ydniu.com/app/images/default_user.png');

    onMounted(async () => {
      showLoadingToast({
        message: '加载中...',
        forbidClick: true
      });
      await getData();
      loading.value = false;
      closeToast();
      return;
    });

    onBeforeRouteUpdate(async (to:any, from:any) => {
      console.log('路由正在更新',to,from);
      // let from_time = from?.query?.t;
      // let to_time = to?.query?.t;
    
      // // 如果不是同一场比赛，则直接使用以前逻辑
      // if(from?.query?.yiqiuid != to?.query?.yiqiuid){
      //   return
      // }
      
      // if(from_time && to_time && parseInt(from_time)+1000 < parseInt(to_time)){
      //   // 检查是否是进行中的比赛
      //   if([1, 2, 3, 7, 8, 9, 11].indexOf(game_info.value.status) > -1){
      //     // await getData();
      //   }
      // }
    });

    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
      }, 1000);
    };

    // watch(liveStore, async (n: any) => {
    //   await getIntervalMatch(n);
    // });

    const getData = async () => {
      if (!game_info.value.id) {
        const yiqiuid = route.query.yiqiuid || route.params.yiqiuid;
        const gameid = route.query.gameid;
        const infoid = route.query.infoid;
        game_info.value = await game_api.get_soccer_game_info({ yiqiu_id: yiqiuid, game_id: gameid, info_id: infoid });
      }

      if (game_info.value.sportsdt_game_id) {
        let args = { game_id: game_info.value.sportsdt_game_id };
        game_prediction.value = await game_api.get_soccer_game_prediction(args);
        let result = await game_api.get_game_goal_data(args);
        if (result.Goal_new || result.Substitutes) {
          let goalData = result.Substitutes.concat(result.Goal_new);
          game_goal_data.value.goal = goalData.sort(compare('Minute'));
          game_goal_data.value.substitutes = result.Substitutes;
          game_goal_data.value.stat = getStatData(result.Stat);
        }
      }
    };

    //轮询比赛
    const getIntervalMatch = async (liveDate: any) => {
      let game = _.find(liveDate, item => item.YiqiuMatchId == game_info.value?.id);
      if (game) {
        let timer;
        if ([4, 10, 12].indexOf(game_info.value.status) > -1) {
          clearTimeout(timer);
        } else if ([1, 2, 3, 7, 8, 9, 11].indexOf(game_info.value.status) > -1) {
          timer = setTimeout(async function () {
            await getData();
          }, 50000);
        } else {
          timer = setTimeout(async function () {
            await getData();
          }, 80000);
        }
      }

    };

    //stat数据
    const getStatData = (stat: any) => {
      for (var val of stat) {
        if (val.Home != '' && val.Home != '*' && val.Away != '' && val.Away != '*' && val.Name != '红牌数' && val.Name != '成功传球') {
          if (val.Name == "进攻") {
            val.Name = "进攻";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "危险进攻") {
            val.Name = "危险进攻";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "射门次数") {
            val.Name = "射门";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "射正球门次数") {
            val.Name = "射正";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "射失") {
            val.Name = "射失";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "犯规次数") {
            val.Name = "犯规";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "角球次数") {
            val.Name = "角球";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "任意球次数") {
            val.Name = "任意球";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "越位次数") {
            val.Name = "越位";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "黄牌数") {
            val.Name = "黄牌数";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "救球") {
            val.Name = "救球";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "换人数") {
            val.Name = "换人数";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "成功抢断") {
            val.Name = "成功抢断";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "助攻") {
            val.Name = "助攻";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "射门被挡") {
            val.Name = "射门被挡";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "传球总数") {
            val.Name = "传球总数";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "抢断") {
            val.Name = "抢断";
            val.bar1Width = JSON.parse(val.Home) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
            val.bar2Width = JSON.parse(val.Away) / (JSON.parse(val.Home) + JSON.parse(val.Away)) * 100;
          } else if (val.Name == "控球率") {
            val.Name = "控球率";
            val.bar1Width = val.Home.split("%").join("");
            val.bar2Width = val.Away.split("%").join("");
          }
        }
      }
      return stat;
    };

    const compare = (val: any) => {
      return function (a: any, b: any) {
        let value1 = a[val];
        let value2 = b[val];
        return value2 - value1;
      };
    };

    const getTime = (minute: any, outtime: any) => {
      return minute >= 90 && outtime == "1" ? `90'` :
        (minute < 90 && outtime == "1" ? `45'+${minute-45}` : minute + "'");
    };

    const getMemo = (minute: any, outtime: any, other: any) => {
      if (minute >= 90 && outtime == "1" && other != "") {
        return `(${other})`;
      }
      return outtime == "1" ? `(伤停补时)` :
        (minute >= 90 && outtime == "0" ? `(加时赛)` : "");
    };

    const getLogoImg = (id: any) => {
      return `https://data.7m.com.cn/player_data/${id}/logo_img/player_photo.jpg`;
    };

    return {
      no_data,
      loading,
      game_info,
      game_prediction,
      game_goal_data,
      event_list,
      img_names,
      player_default_img,
      onRefresh,
      getTime,
      getMemo,
      getLogoImg,
    };
  }
};
</script>
<style lang="scss" scoped>
@import url('https://img2.ydniu.com/app/soccer/match_situation.css');

.live_box {
  background: #F6F7F8;
  height: 100%;
  width: 100%;
  display: inline-block;
  padding-top: 20px;
  padding-bottom: 10px;
}

.left,
.right {
  background: #E3EFFF;
  border-radius: 4px;
  color: #333333;
  font-weight: 400;
  margin: 0 12px;
  padding: 5px 0;
}

.liveTxt .cell.time {
  font-size: 18px;
  background: #227AFF;
  border-radius: 50%;
  font-weight: bold;
  color: #FFFFFF;
  width: 30px;
  height: 30px;
  line-height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs {
  padding: 0 10px;
}

.zr-title {
  height: 50px;
  line-height: 50px;
}

.zr-title img,
.liveTxt img {
  width: 30px;
}

.matchsm .sm span img {
  width: 23px;
  height: 20px;
}

.liveTxt .huanren {
  width: 14px;
}

.liveTxt .cell>.imgspan {
  width: 35px;
}

.match .vszr .team .bar2,
.match .vszr .team .bar1 {
  height: 7px;
}
</style>