<template>
    <div>
        <div class="match-tab">
            <div class="tab-name">指数数据</div>
            <div class="tab-sel">
                <div class="around">
                    <p :class="tab_name == '欧' ? 'around-p active-p' : 'around-p'" @click="tab_name = '欧'">欧</p>
                    <p :class="tab_name == '亚' ? 'around-p active-p' : 'around-p'" @click="tab_name = '亚'">亚</p>
                    <p :class="tab_name == '大小' ? 'around-p active-p' : 'around-p'" @click="tab_name = '大小'">大小</p>
                </div>
            </div>
        </div>
        <section class="nav-details" id="navDetails">
            <div class="main odd-details">

                <div class="sub-navDetails">

                    <!--指数-欧-->
                    <div v-if="tab_name == '欧'" id="subMain1" class="subMain subshow" isLoaded='1' oddtype="euro">
                        <table class='euro-table' v-if="game_odds.odds100_data && game_odds.odds100_data.length">
                            <thead>
                                <tr>
                                    <th>公司</th>
                                    <th>欧</th>
                                    <th>凯利指数</th>
                                    <th>返回率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) of game_odds.odds100_data" :key="index" :c='item.CompanyId'>
                                    <td><span>{{ item.CompanyName.replace('澳','ao') }}</span></td>
                                    <td>
                                        <p>初 {{ item.FirstOdds[0] }}/{{ item.FirstOdds[1] }}/{{ item.FirstOdds[2] }}
                                        </p>
                                        <p>即
                                            <span
                                                :class='item.LastOdds[0] > item.FirstOdds[0] ? "red" : (item.LastOdds[0] < item.FirstOdds[0] ? "green" : "")'>{{
                                                    item.LastOdds[0] }}<i v-html="get_icon(item.LastOdds[0], item.FirstOdds[0])"></i></span>
                                            <span
                                                :class='item.LastOdds[1] > item.FirstOdds[1] ? "red" : (item.LastOdds[1] < item.FirstOdds[1] ? "green" : "")'>{{
                                                    item.LastOdds[1] }}<i v-html="get_icon(item.LastOdds[1], item.FirstOdds[1])"></i></span>
                                             <span
                                                :class='item.LastOdds[2] > item.FirstOdds[2] ? "red" : (item.LastOdds[2] < item.FirstOdds[2] ? "green" : "")'>{{
                                                    item.LastOdds[2] }}<i v-html="get_icon(item.LastOdds[2], item.FirstOdds[2])"></i></span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ `${item.FirstKelly[0]}/${item.FirstKelly[1]}/${item.FirstKelly[2]}` }}
                                        </p>
                                        <p>
                                            <span
                                                :class='item.LastKelly[0] > item.FirstKelly[0] ? "red" : (item.LastKelly[0] < item.FirstKelly[0] ? "green" : "")'>{{
                                                    item.LastKelly[0] }}
                                                <i v-html="get_icon(item.LastKelly[0], item.FirstKelly[0])"></i></span>
                                            <span
                                                :class='item.LastKelly[1] > item.FirstKelly[1] ? "red" : (item.LastKelly[1] < item.FirstKelly[1] ? "green" : "")'>{{
                                                    item.LastKelly[1] }}
                                                <i v-html="get_icon(item.LastKelly[1], item.FirstKelly[1])"></i></span>
                                            <span
                                                :class='item.LastKelly[2] > item.FirstKelly[2] ? "red" : (item.LastKelly[2] < item.FirstKelly[2] ? "green" : "")'>{{
                                                    item.LastKelly[2] }}
                                                <i v-html="get_icon(item.LastKelly[2], item.FirstKelly[2])"></i></span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ item.init_reback_rate }}%</p>
                                        <p>{{ item.latest_reback_rate }}%</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--指数-亚-->
                    <div v-if="tab_name == '亚'" id="subMain2" class="subMain" oddtype="asia">
                        <table class="asia-table" v-if="game_odds.letgoal_data && game_odds.letgoal_data.length">
                            <thead>
                                <tr>
                                    <th>公司</th>
                                    <th>主队</th>
                                    <th>指数</th>
                                    <th>客队</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) of game_odds.letgoal_data" :key="index" :c='item.CompanyId'>
                                    <td><span>{{ item.CompanyName.replace('澳','ao') }}</span></td>
                                    <td>
                                        <p>初 {{ item.FirstOdds[1] }}</p>
                                        <p>即
                                            <span
                                                :class='item.LastOdds[1] > item.FirstOdds[1] ? "red" : (item.LastOdds[1] < item.FirstOdds[1] ? "green" : "")'>{{
                                                    item.LastOdds[1] }}
                                                <i v-html="get_icon(item.LastOdds[1], item.FirstOdds[1])"></i></span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ item.FirstOdds[0] }}</p>
                                        <p><span
                                                :class='item.LastOdds[0] > item.FirstOdds[0] ? "red" : (item.LastOdds[0] < item.FirstOdds[0] ? "green" : "")'>{{
                                                    item.LastOdds[0] }}
                                                <i v-html="get_icon(item.LastOdds[0], item.FirstOdds[0])"></i></span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ item.FirstOdds[2] }}</p>
                                        <p>
                                            <span
                                                :class='item.LastOdds[2] > item.FirstOdds[2] ? "red" : (item.LastOdds[2] < item.FirstOdds[2] ? "green" : "")'>
                                                {{ item.LastOdds[2] }}
                                                <i v-html="get_icon(item.LastOdds[2], item.FirstOdds[2])"></i>
                                            </span>
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--指数-大小-->
                    <div v-if="tab_name == '大小'" id="subMain3" class="subMain" oddtype="bs">
                        <table class="asia-table" v-if="game_odds.bigsmall_data && game_odds.bigsmall_data.length">
                            <thead>
                                <tr>
                                    <th>公司</th>
                                    <th>大</th>
                                    <th>指数</th>
                                    <th>小</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) of game_odds.bigsmall_data" :key="index" :c='item.CompanyId'>
                                    <td><span>{{ item.CompanyName.replace('澳','ao') }}</span></td>
                                    <td>
                                        <p>初 {{ item.FirstOdds[1] }}</p>
                                        <p>即
                                            <span
                                                :class='item.LastOdds[1] > item.FirstOdds[1] ? "red" : (item.LastOdds[1] < item.FirstOdds[1] ? "green" : "")'>
                                                {{ item.LastOdds[1] }}
                                                <i v-html="get_icon(item.LastOdds[1], item.FirstOdds[1])"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ item.FirstOdds[0] }}</p>
                                        <p>
                                            <span
                                                :class='item.LastOdds[0] > item.FirstOdds[0] ? "red" : (item.LastOdds[0] < item.FirstOdds[0] ? "green" : "")'>
                                                {{ item.LastOdds[0] }}
                                                <i v-html="get_icon(item.LastOdds[0], item.FirstOdds[0])"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td>
                                        <p>{{ item.FirstOdds[2] }}</p>
                                        <p>
                                            <span
                                                :class='item.LastOdds[2] > item.FirstOdds[2] ? "red" : (item.LastOdds[2] < item.FirstOdds[2] ? "green" : "")'>
                                                {{ item.LastOdds[2] }}
                                                <i v-html="get_icon(item.LastOdds[2], item.FirstOdds[2])"></i>
                                            </span>
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
        <noData v-if="no_data" :nodata_message="'暂无指数数据'"></noData>
    </div>
</template>
  
<script lang="ts">
import { ref,defineComponent,onMounted,toRef,watch} from 'vue';
import * as game_api from '@/api/game_api';
import noData from '@/components/NoData.vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    name: 'GameOdds',
    components: {
        noData,
    },
    props: { 
        yiqiu_id: {  
            type: Number,  
            required: true  
        } 
     },
    setup(props:any,{emit}) {
        const route = useRoute();
        const yiqiu_id: any = toRef(props,'yiqiu_id');
        const game_odds: any = ref({})
        const loading = ref(true);
        const no_data = ref(false);
        const tab_name = ref('欧');
        const up = `<svg t="1607311637600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5039" width="10" height="10"><path d="M384 341.333333H213.333333l298.666667-341.333333L810.666667 341.333333H640l-136.533333 682.666667L384 341.333333z" p-id="5040" fill="#FF3333"></path></svg>`;
        const down = `<svg t="1607322701151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10251" width="10" height="10"><path d="M613.358 638.062l119.088-42.142c34.382-12.168 47.187 3.356 27.037 35.228L539.704 978.764c-19.906 31.486-52.82 31.871-72.969 0L246.956 631.148c-19.907-31.487-8.045-47.642 27.037-35.227l119.088 42.142 89.078-559.012c11.633-72.997 30.473-73.105 42.122 0l89.078 559.013z" p-id="10252" fill="#00C423"></path></svg>`;

        const init_data = async() => {
            try {
                if (yiqiu_id.value) {
                    let result = await game_api.get_game_odds({ yiqiu_id: yiqiu_id.value});
                    if (!result || !result?.odds100_data) {
                        no_data.value = true;
                    } else {
                        game_odds.value = result;
                    }
                }
            } catch (error) {console.info("GameOdds",error)}
            
            emit('show-odds',{'show_odds':!no_data.value});
            loading.value = false;
            return;
        }

        onMounted(init_data);

        watch(() => route.query.yiqiuid || route.params.yiqiuid, (newVal: any) => {
            if (newVal && newVal != yiqiu_id.value) {
                init_data();
            }
        }, { deep: true });

        const get_icon = (last_odds: any, first_odds: any) => {
            if (Number(last_odds) > Number(first_odds)) {
                return up;
            } else if (Number(last_odds) < Number(first_odds)) {
                return down;
            }else if(tab_name.value == '欧'){
                return '/';
            }
        };

        return {
            tab_name,
            no_data,
            game_odds,
            get_icon
        }
    }
});
</script>
<style lang="scss" scoped>
@use '@/common/style/common' as *;

.match-tab {
    width: 100%;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tab-name {
        font-size: 16px;
        font-weight: 500;
    }

    .tab-sel {
        color: var(--color-999999);
        text-align: center;
        justify-content: center;

        .around {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 1px;
            box-sizing: border-box;
            background: #E7EEF7;
            @include border-radius(15px);
            overflow: hidden;
        }

        .around-p {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #777777;
            line-height: 30px;
            width: 60px;
            margin: 2px 3px;
        }

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

.red {
    color: #ff3300;
}

.blue {
    color: #1a86e1;
}

.green {
    color: green;
}

.gray {
    color: gray;
}

.odd-details table {
    font-size: 12px;
    color: #333;
    background: #fffeff;
}

.odd-details table tr {
    height: 50px;
    border-bottom: 1px solid #f0efeb;
}

.odd-details table tr th {
    height: 40px;
}

.odd-details thead tr:first-child {
    color: #232323;
}

.euro-table tr td:first-child {
    width: 14%;
    word-break: break-all;
    color: #232323;
}
table tr td:not(:first-child) {  
    text-align: left;
}

.asia-table tr td:first-child {
    width: 22%;
    word-break: break-all;
    text-align: center;
}

.companyName:after {
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    border-top: #ccc solid 1px;
    border-right: #ccc solid 1px;
    -webkit-transform: rotate(135deg);
    position: absolute;
    left: 10%;
}

.asia-table tr td .companyName:after {
    left: 12%;
}</style>