<template>
  <div style="opacity: 1;">
    <div style="opacity: 1;" class="top-main" id="topMain">
      <sHeader class="acce-render" :name="app_is_back ? '' : title || getTitle(game_info) || game_info?.competition_short_name" :back="back_url"></sHeader>
      <section class="nav-details acce-render" id="navDetails"  :style="`padding-top:calc(54px + ${common_data.appHeight}px);height:calc(170px + ${common_data.appHeight}px)`">
        <template v-if="!app_is_back && game_info">
          <!-- 头部 -->
          <div class="team-warp acce-render">
            <div class="rotate-left acce-render" v-if="game_info?.host_photo">
              <img :class="show_fang_logo ? 'logo_fang acce-render' : 'logo acce-render'" v-lazy="{loading: 'https://img2.ydniu.com/app/images/team_logo.png',src:game_info?.host_photo,error:getTeamLazyErrorLogo(game_detail && game_detail.nm_home_team_logo)}">
            </div>
            <div class="wrap-center acce-render">
              <div class="status acce-render" v-if="game_status_minite != '未'">{{game_status_minite}}<span class="ap-code-dian acce-render" v-if="game_status_minite != '' && [2, 4].indexOf(game_info?.nm_status) != -1">'</span></div>
              <!-- <div class="jincai-num" v-if="game_info.is_jingcai">{{ getWeek(game_info.sporttery_issue_name) }} {{ game_info.sporttery_number }}</div> -->
              <div class="game-time score acce-render">
                {{ getScore(game_info) }}
              </div>
              
            </div>
            <div class="rotate-right acce-render"  v-if="game_info?.away_photo">
              <img :class="show_fang_logo ? 'logo_fang acce-render' : 'logo acce-render'" v-lazy="{loading: 'https://img2.ydniu.com/app/images/team_logo.png',src:game_info?.away_photo,error:getTeamLazyErrorLogo(game_detail && game_detail.nm_away_team_logo)}">
            </div>
          </div>
          <div class="team-warp acce-render" style="padding-bottom: 20px;">
            <div>
              <div class="name acce-render">
                {{ app_is_back ? '主队名' : game_info?.host_name }}
              </div>
              <div class="rank acce-render" v-if="!card_show">
                <span v-if="game_info?.host_rank" class="acce-render">排名[{{ game_info.host_rank }}]</span>
              </div>
              <div class="card acce-render" v-else>
                  <span v-if="game_info?.red_card && game_info.red_card?.[0] > 0" class="icon red acce-render">{{ game_info.red_card[0]}}</span>
                
                  <span v-if="game_info?.yellow_card && game_info.yellow_card?.[0] > 0" class="icon yellow acce-render">{{ game_info.yellow_card[0] }}</span>
                
              </div>
            </div>
            <div class="wrap-center acce-render">
              <div class="match-time acce-render">{{ getMore(game_info) }}</div>
              <div class="weather acce-render" v-if="game_info?.is_jingcai && game_info?.n">本场比赛<br/>体彩以{{ game_info?.away_name }}为主队</div>
              <div v-if="show_live && ((common_data?.isQianHai && common_data?.isApp) || !common_data.isApp)">
                <a class="zhibo acce-render" href="javascript:;" @click="goLive(game_info?.live_link[0]?.url)">
                  <svg-icon className="icon acce-render" iconName="zhibo"></svg-icon>视频直播
                </a>
              </div>
              <div v-else-if="show_live && !common_data.isApp" class="acce-render">
                <a class="zhibo acce-render" href="javascript:;" @click="goLive('https://m.ydn.com/user/app_download/1718439812649?zq&promoterId=999')">
                  <svg-icon className="icon acce-render" iconName="zhibo"></svg-icon>视频直播
                </a>
              </div>
            </div>
            <div class="acce-render">
              <div class="name acce-render">
                {{ game_info?.away_name }}
              </div>
              <div class="rank acce-render" v-if="!card_show">
                <span v-if="game_info?.away_rank" class="acce-render">排名[{{ game_info.away_rank }}]</span>
              </div>
              <div class="card acce-render" v-else>
                  <span v-if="game_info?.red_card && game_info.red_card?.[1] > 0" class="icon red acce-render" >{{ game_info.red_card[1] }}</span>
                  <span v-if="game_info?.yellow_card && game_info.yellow_card?.[1] > 0" class="icon yellow acce-render">{{ game_info.yellow_card[1] }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
        <!-- 头部 -->
        <div class="team-warp acce-render">
          <div class="rotate-left acce-render">
            <div class="logo acce-render"></div>
          </div>
          <div class="wrap-center acce-render"></div>
          <div class="rotate-right acce-render">
            <div class="logo acce-render"></div>
          </div>
        </div>
      </template>
      </section>
      
    </div>
    <div class="progress-bar acce-render" >
      <span class="left acce-render" :style="`width:${rate?.[0]}%`"></span>
      <span class="right acce-render" :style="`width:${rate?.[1]}%`"></span>
    </div>
</div>
</template>

<script lang="ts">
import { ref, computed,toRef, onActivated, nextTick } from 'vue';
import { default as moment } from 'moment';
import { useStore } from 'vuex';
import sHeader from '@/components/SimpleHeader.vue';
import { sports_status,nm_status } from '@/common/js/nm_config';
import { getWeek,getTeamLazyErrorLogo } from '@/until/index';
import { showToast } from 'vant';
export default {
  name: 'GameHeader',
  components: {sHeader,},
  props: { 
    gameInfo: {
      type: Object,
      required: true,
      default: () => { return {}; }
    },
    gameDetail: {
      type: Object,
      required: true,
      default: () => { return {}; }
    }
  },
  setup(props:any) {
    const store: any = useStore();
    const game_info:any = toRef(props,'gameInfo');
    const game_detail:any = toRef(props,'gameDetail');
    const common_data: any = computed(() => store.state.common_data);
    const userInfo:any = computed(() => store.state.userInfo);
    const app_is_back:any = computed(() => store.state.app_is_back);
    const s_status:any = ref(sports_status);
    const n_status:any = ref(nm_status);
    const title = ref('');
    const back_url:any = computed(() => common_data.value.isApp ? store.state.live_path + '?ydn_back' : store.state.live_path);
    let unusual_game = computed(() => game_info.value?.nm_status > 1 && game_info.value?.nm_status < 8 && moment(store.state.server_time) > moment(game_info.value.match_time).add(3, "hours"))
    const game_status_minite = computed(() => {
      let data = game_info.value && JSON.parse(JSON.stringify(game_info.value));
      if (!data || unusual_game.value) { // 异常不显示状态
        return '';
      } else {
        let time_stamp = game_info.value?.time_stamp || store.state.nm_live_message[data?.id]?.score?.[4] //开球时间戳
        let contrastTime: any = time_stamp ? moment(time_stamp * 1000) : '';
        if (contrastTime == '' || ![2,4].includes(data?.nm_status)) return n_status.value[data?.nm_status];
        let startTime = moment(contrastTime).valueOf();
        let abs: any = moment(store.state.server_time).diff(startTime, 'minutes') + 1;
        if (abs < 1) return '';
        if (data.nm_status == 2 && abs > 45) {
          abs = '45+';
        } else if (data.nm_status == 4) {
          abs += 45;
          if (abs > 90) abs = '90+';
        }
        return abs;
      }
    });
    const card_show = computed(() => {
        if(!game_info.value.id || unusual_game.value){
          return false;
        }
        if(game_info.value?.nm_status < 1 && game_info.value?.nm_status > 8){
          return false
        }
        let card_count:any = game_info.value?.red_card[0] || 0 + game_info.value?.red_card[1] + game_info.value?.yellow_card[0] + game_info.value?.yellow_card[1];
        return card_count > 0;
    })
    const rate = computed(() => [game_info.value?.home_rate,game_info.value?.away_rate])
    const show_fang_logo = computed(() => {
      let competition_id = game_info.value?.competition?.yiqiu_id || game_info.value?.yiqiu_competition_id;
      console.info(competition_id)
      //欧洲杯、亚洲杯、美洲杯、世界杯、奥运男足、奥运女足、亚青杯
      if([80,31,30,32,268,612,437].includes(competition_id)){
        return true
      }else{
        return false
      }
    })
    const show_live = computed(() => {
      if(userInfo.value?.is_test_user && game_info.value?.live_link && game_info.value?.live_link[0]?.url){
        if (game_info.value?.match_time && moment().add(10,'minute') < moment(game_info.value?.match_time)){
          return true;
        }else if(game_info.value?.match_time && game_info.value?.nm_status == 8 && moment().add(12,'hour') > moment(game_info.value?.match_time)){
            return true
        }
      }
      return false;
    })
    onActivated(async () => {
      title.value = '';
      //调用android原生方法
      if (store.state.common_data.isApp && store.state.common_data.isAndroid) {
        (window as any).Android?.changeToolBarColor('0');
      }
      //调用ios原生方法
      if (store.state.common_data.isApp && store.state.common_data.isIos) {
        if((window as any).webkit?.messageHandlers.changeStatusBarStyle){
          (window as any).webkit?.messageHandlers.changeStatusBarStyle.postMessage('0');  
        }
      }
    });

    nextTick(() => {
      window.scrollTo({ top: 0 });
      document.querySelector("#game-page")?.addEventListener('scroll', handleScroll,{passive:true});
    })

    const getScore = (game: any) => {
      if(unusual_game.value){
        // return "VS";
        return moment(game.match_time).format('HH:mm');
      }
      if ((game.nm_status <=1 || game.nm_status > 8 || moment(game.match_time) > moment() || game.score?.[0] == null)) {
        // return "VS";
        return moment(game.match_time).format('HH:mm');
      }else if (game.score.indexOf('-') > -1) {
        return game.score.split('-').join(" - ");
      } else {
        return `${game.score?.join(" - ")}`;
      }
    };

    const getTitle = (game:any) => {
      if(!game?.id){
        return '';
      }
      var html = game.competition_short_name;
      if(game.is_jingcai && game.weather){
        html = `<div style="line-height:22px;transform: translate3d(0, 0, 0);opacity: 1;">${game.competition_short_name}</div>
                    <div style="line-height:18px;font-size:12px;transform: translate3d(0, 0, 0);opacity: 1;">
                      <span style="transform: translate3d(0, 0, 0);opacity: 1;">${game.is_jingcai ? getWeek(game.sporttery_issue_name) + game.sporttery_number : ''} </span>
                      <span style="transform: translate3d(0, 0, 0);opacity: 1;">${game.weather && game.weather.indexOf('～') > -1 ? game.weather.split('～')[0] : game.weather}</span>
                    </div>`
        if(game?.nm_status && game.nm_status > 1 && game.nm_status <= 8 && !unusual_game.value) {
          html = `<div style="line-height:22px;transform: translate3d(0, 0, 0);opacity: 1;">${game.competition_short_name}</div>
                  <div style="line-height:18px;font-size:12px;transform: translate3d(0, 0, 0);opacity: 1;">
                    <span style="transform: translate3d(0, 0, 0);opacity: 1;">${moment(game.match_time).format("MM-DD HH:mm")}</span>
                    <span style="transform: translate3d(0, 0, 0);opacity: 1;">${game.is_jingcai ? getWeek(game.sporttery_issue_name) + game.sporttery_number : ''} </span>
                    <span style="transform: translate3d(0, 0, 0);opacity: 1;">${game.weather && game.weather.indexOf('～') > -1 ? game.weather.split('～')[0] : game.weather}</span>
                  </div>`
        }
      }
      return html;
    }

    const getMore = (game: any) => {
      if(game?.nm_status && game.nm_status > 1 && game.nm_status <= 8 && !unusual_game.value) {
        return showHC(game);
      }else{
        return moment(game.match_time).format("MM-DD");
      }
    };

    const showHC = (game: any) => {
      let text = [];
      if (game.half && [3, 4, 5, 6, 7, 8].includes(game?.nm_status)) {
        text.push('半:' + game?.half.join('-'));
      }
      if (game.corner_kicks && JSON.stringify(game.corner_kicks) != '[0,0]') {
        text.push('角:' + game?.corner_kicks.join('-'));
      }
      return text.join(' ');
    };

    const handleScroll = () => {
      let scrollPosition = document.querySelector("#game-page")?.scrollTop || 0;
      const headerElement = document.querySelector('.header') as HTMLElement;
      if (scrollPosition > 44) {
        title.value = `${game_info.value?.host_name} ${getScore(game_info.value)} ${game_info.value?.away_name}`;
        if (headerElement) {
          headerElement.style.backgroundColor = '#227AFF'; // Replace '#your-color' with the color you want
        }
      } else {
        title.value = '';
        if (headerElement) {
          headerElement.style.backgroundColor = 'transparent'; // Replace '#your-color' with the color you want
        }
      }
    };

    const goLive = (url:any) => {
      if (game_info.value?.match_time && moment().add(10,'minute') < moment(game_info.value?.match_time)){
        showToast('赛事暂未开始');
      }else if(game_info.value?.match_time && game_info.value?.nm_status == 8 && moment().add(12,'hour') > moment(game_info.value?.match_time)){
        showToast('比赛直播已结束');
      }else if(!common_data.value.isApp){
        location.href = url;
      }else if (common_data.value.isAndroid && (window as any).Android?.gotoLive) {
        (window as any).Android?.gotoLive(url, title.value + '视频直播')
      }
    }
    
    return {
      title,
      moment,
      game_info,
      game_detail,
      common_data,
      game_status_minite,
      s_status,
      n_status,
      card_show,
      rate,
      back_url,
      getScore,
      getMore,
      getWeek,
      getTeamLazyErrorLogo,
      show_fang_logo,
      show_live,
      goLive,
      userInfo,
      getTitle,
      app_is_back
    };
  }
}


</script>

<style lang="scss" scoped>
@use '@/common/style/common' as *;

.top-main {
  width: 100%;
  top: 0;
  background-color: #1b6dea;
  @include back-img('https://img2.ydniu.com/app/images/sports_ydniu/live/bg_game.png');

  .nav-details {
    padding-top: 54px;
    height: 180px;
  }
}

.team-warp {
  width: 100%;
  color: #fff;
  margin: 0 auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;

  >div {
    flex: 1;
  }
  .name{
    height: 24px;
    line-height: 24px;
  }
  .rotate-left,
  .rotate-right{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }
  .wrap-center {
    .jincai-num {
      font-size: 14px;
    }

    .match-time {
      font-size: 12px;
    }
  }

  .game-time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    font-family: yiqu;
    font-size: 28px;
    color: #fff;
  }

  .logo {
    width: 56px;
    height: 56px;
    background-color: #f5f5f5;
    @include border-radius(50%);
  }
  .logo_fang{
    width: 56px;
  }

  .name {
    margin: 0 auto;
    font-size: 13px;
    color: #fff;
  }

  .score {
    font-weight: 600;
    font-size: 32px;
    animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    /* Safari and Chrome */
    -webkit-animation-name: fadeinT;
    -moz-animation-name: fadeinT;
    -ms-animation-name: fadeinT;
    animation-name: fadeinT;
  }

  .status {
    font-size: 12px;
    color: #FFCD00;
    font-weight: bold;
    .ap-code-dian {
      animation-name: ap-code-dian;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
      animation-delay: 0;
      -webkit-animation-name: ap-code-dian;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -webkit-animation-delay: 0;
      -moz-animation-name: ap-code-dian;
      -moz-animation-duration: 1.5s;
      -moz-animation-timing-function: linear;
      -moz-animation-iteration-count: infinite;
      -moz-animation-fill-mode: forwards;
      -moz-animation-delay: 0;
      -o-animation-name: ap-code-dian;
      -o-animation-duration: 1.5s;
      -o-animation-timing-function: linear;
      -o-animation-iteration-count: infinite;
      -o-animation-fill-mode: forwards;
      -o-animation-delay: 0;
    }
    
  }
  @keyframes ap-code-dian {
      0%{opacity: 0;}
      30%{opacity: 1;}
      80%{opacity: 1;}
      100%{opacity: 0;}
  }
  .weather,
  .rank {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-overflow: ellipsis;
    -wekit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
  }
  .zhibo .icon{
    width:22px;
    height:22px;
  }
  .zhibo{
    background-color: #1b6dea;
    color:#fff;
    border-radius: 10px;
    line-height: 22px;
    padding: 0 5px;
  }
  .card{
    @include flex-center;
    height: 14px;
    .icon{
      height: 14px;
      line-height: 14px;
      width: 12px;
      border-radius: 2px;
      font-weight: bold;
      font-size: 12px;
      color:#fff;
      font-style: normal;
      font-family: DINAlternate, DINAlternate;
    }
    .red{
      background-color: #DA2323;
      margin-right: 2px;
    }
    .yellow{
      background-color:#FFCD00;
    }
  }
}

.progress-bar {
  display: flex;

  .left {
    height: 6px;
    background-color: #204077;
  }

  .right {
    height: 6px;
    background-color: #ae5971;
  }
}

/* 淡入-从上 */
@-webkit-keyframes fadeinT {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeinT {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-ms-keyframes fadeinT {
  0% {
    opacity: 0;
    -ms-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}

@keyframes fadeinT {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 积分对比 淡入-从右 */
@-webkit-keyframes fadeinR {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeinR {
  0% {
    opacity: 0;
    -moz-transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes fadeinR {
  0% {
    opacity: 0;
    -ms-transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -ms-transform: translateX(0);
  }
}

@keyframes fadeinR {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>