<!-- 情报 -->
<template>
<div>
    <div class="content-slide" v-if="game_info?.sports_info">
        <!-- 主客队选择-->
        <div class="tab-sel">
            <div class="around">
            <p :class="tab_name == game_info.host_team?.short_name ? 'around-p active-p' : 'around-p'" @click="tab_name = game_info.host_team?.short_name,is_show.host=true,is_show.away=false,is_show.zhong=false">{{ game_info.host_team?.short_name }}</p>
            <p :class="tab_name == '中立' ? 'around-p active-p' : 'around-p'" @click="tab_name = '中立',is_show.host=false,is_show.away=false,is_show.zhong=true">中立</p>
            <p :class="tab_name == game_info.away_team?.short_name ? 'around-p active-p' : 'around-p'" @click="tab_name = game_info.away_team?.short_name,is_show.host=false,is_show.away=true,is_show.zhong=false">{{game_info.away_team?.short_name}}</p>
            </div>
        </div>

        <div class="info-list qb-space" v-if="game_info.dfcp_img_url && common_data.switchState" @click="look_img()">
            <h6>牛牛指数截图</h6>
            <img :src="game_info.dfcp_img_url" alt="牛牛指数截图">
            <div style="font-size:12px; color:#999;">仅供大家参考</div>
        </div>

        <template v-if="is_show.host">
            <!--主队 有利情报-->
            <div class="info-list" v-if="game_info.sports_info?.HostGood && game_info.sports_info?.HostGood.length">
                <h6><span class="t-bg"></span><span>{{ game_info.host_team?.short_name }}有利情报</span></h6>
                <div class="info">
                    <p v-for="(item, index) in game_info.sports_info?.HostGood" :key="index"><span>{{ item }}</span></p>
                </div>
            </div>

            <!--主队  不利情报-->
            <div class="info-list" v-if="game_info.sports_info?.HostBad && game_info.sports_info?.HostBad.length">
                <h6><span class="t-bg"></span><span>{{ game_info.host_team?.short_name }}不利情报</span></h6>
                <div class="info">
                    <p v-for="(item, index) in game_info.sports_info?.HostBad" :key="index"><span>{{ item }}</span></p>
                </div>
            </div>
        </template>
        <template v-if="is_show.away">
            <!--客队  有利情报-->
            <div class="info-list" v-if="game_info.sports_info?.GuestGood && game_info.sports_info?.GuestGood.length">
                <h6><span class="t-bg"></span><span>{{ game_info.away_team?.short_name }}有利情报</span></h6>
                <div class="info">
                    <p v-for="(item, index) in game_info.sports_info?.GuestGood" :key="index"><span>{{ item }}</span></p>
                </div>
            </div>

            <!--客队  不利情报-->
            <div class="info-list" v-if="game_info.sports_info?.GuestBad && game_info.sports_info?.GuestBad.length">
                <h6><span class="t-bg"></span><span>{{ game_info.away_team?.short_name }}不利情报</span></h6>
                <div class="info">
                    <p v-for="(item, index) in game_info.sports_info?.GuestBad" :key="index"><span>{{ item }}</span></p>
                </div>
            </div>
        </template>
        <template v-if="is_show.zhong">
            <!--中立场-->
            <div class="info-list" v-if="game_info.sports_info?.PredictionDesc && game_info.sports_info?.PredictionDesc.length">
                <h6><span class="t-bg"></span><span>中立情报</span></h6>
                <div class="info">
                    <p v-for="(item, index) in game_info.sports_info?.PredictionDesc" :key="index"><span>{{ item }}</span></p>
                </div>
            </div>
        </template>
    </div>
    <noData v-if="no_data" :nodata_message="'暂无情报数据！'"></noData>
</div>
</template>
  
<script lang="ts">
import { ref,defineComponent,onMounted,watch, computed } from "vue";
  import {showImagePreview } from "vant";
  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';
  import * as game_api from "@/api/game_api";
  import noData from '@/components/NoData.vue';

  export default defineComponent({
    name: "GameInfo",
    components: {noData},
    props: { 
        gameInfo: {
            type: Object,
            default: () => { return {}; }
        }
    },
    setup(props) {
        const store:any = useStore();
        const route = useRoute();
        const gameInfo:any = ref({});
        const game_info:any = computed(() =>{
            if(props.gameInfo?.sports_info){
                return props.gameInfo
            }else{
                return gameInfo.value
            }
        });
        const tab_name = ref('');
        const is_show = ref({
            host:true,
            zhong:false,
            away:false,
        })
        const no_data = ref(false);

        const init_data = async() => {
            gameInfo.value = await get_game_info();
            if(!game_info.value?.sports_info || 
            (!game_info.value.sports_info?.HostGood && !game_info.value.sports_info?.HostBad &&
            !game_info.value.sports_info?.GuestGood && !game_info.value.sports_info?.GuestBad)){
                no_data.value = true;
            }else{
                tab_name.value = game_info.value.host_team?.short_name
            }
            return;
        }

        onMounted(init_data);

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

        const get_game_info = (async() => {
            try {
                if (!game_info.value?.sports_info) {
                    // alert(1)
                    const yiqiuid = 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 });
                    return temp;
                }
            } catch (error) {
                console.info("get_soccer_game_info",error)
                return {};
            }
        })

        const look_img = () => {
            showImagePreview([game_info.value.dfcp_img_url]);
        }
        return {
            no_data,
            game_info,
            tab_name,
            is_show,
            common_data:store.state.common_data,
            look_img
        };
    }
  });
</script>

<style lang="scss" scoped>
@use '@/common/style/common' as *;
.content-slide{
    background-color: #fff;
    @include border-radius(5px);
    margin:10px;
    text-align: left;
    .tab-sel {
    color: var(--color-999999);
    text-align: center;
    justify-content: center;

    .around {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
    }

    .around-p {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #777777;
      border:solid 1px #E7EEF7;
      line-height: 30px;
      @include border-radius(15px);
      width: 100px;
      margin: 2px 3px;
    }

    .active-p {
     background: #E7EEF7;
      color: #227AFF;
      box-shadow: 0px 1 4px 0px rgba(34, 122, 255, 0.3);
      @include border-radius(15px);
      overflow: hidden;
    }
}
}

.info-list {
    padding: 5px 10px;
    position: relative;
    h6{
        @include sc(16px,#333333);
        font-weight: 500;
        line-height: 40px;
        .t-bg{
            width: 25px;
            height: 12px;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url(https://img2.ydniu.com/app/images/sports_ydniu/model/ic_xiaoxi.png);
            margin-right: 10px;
        }
    }
    .info{
        background: #F6F7F8;
        color:#574B4B;
        padding:10px;
        @include border-radius(5px);
        p{
            font-size: 15px;
            padding-left: 15px;
            padding-bottom: 10px;
            position: relative;
        }
        p:after{
            content: "";
            position: absolute;
            width: 8px;
            left: 0;
            top: 6px;
            height: 8px;
            border-radius: 8px;
            background: #227aff;
            animation: activeScaleX .4s both;
            -webkit-animation: activeScaleX .4s both;
            z-index: 0;
        }
    }
    

}
</style>