<template>
    <div>
        <div v-if="!no_data" class="match_pool">
            <div>
                <div class="title">
                    <span>胜负平过关固定红利</span>
                    <span>赛果：<span id="had">{{sporttery_pool?.pool_rs?.crs?.prs_name || '--'}}</span></span>
                </div>
                <ul class="had">
                    <li class="tab_head li_had">
                        <span>胜</span><span>平</span><span>负</span><span>发布时间</span>
                    </li>
                    <li class="li_had" v-for="(item, index) in sporttery_pool?.odds_list?.had?.odds" :key="index">
                        <span>{{ item.h }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.had?.odds[index - 1].h, item.h)"></i></span>
                        <span>{{ item.d }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.had?.odds[index - 1].d, item.d)"></i></span>
                        <span>{{ item.a }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.had?.odds[index - 1].a, item.a)"></i></span>
                        <span class="time">
                            <p>{{ item.date }}</p>
                            <p>{{ item.time }}</p>
                        </span>
                    </li>
                </ul>
            </div>

            <div>
                <div class="title">
                    <span>让球胜平负过关固定红利<span class="fixed_bonus">(-1)</span></span>
                    <span>赛果：<span id="hhad">{{sporttery_pool?.pool_rs?.hhad?.prs_name || '--'}}</span></span>
                </div>
                <ul class="hhad">
                    <li class="tab_head li_hhad">
                        <span>胜</span><span>平</span> <span>负</span><span>发布时间</span>
                    </li>
                    <li class="li_hhad" v-for="(item, index) in sporttery_pool?.odds_list?.hhad?.odds" :key="index">
                        <span>{{ item.h }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hhad?.odds[index - 1].h, item.h)"></i></span>
                        <span>{{ item.d }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hhad?.odds[index - 1].d, item.d)"></i></span>
                        <span>{{ item.a }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hhad?.odds[index - 1].a, item.a)"></i></span>
                        <span class="time">
                            <p>{{ item.date }}</p>
                            <p>{{ item.time }}</p>
                        </span>
                    </li>
                </ul>
            </div>

            <div>
                <div class="title">
                    <span>总进球过关固定红利</span>
                    <span>赛果：<span id="ttg">{{sporttery_pool?.pool_rs?.ttg?.prs_name || '--'}}</span></span>
                </div>
                <ul class="ttg">
                    <div class="ttgBox" v-for="(item, index) in sporttery_pool?.odds_list?.ttg?.odds" :key="index">
                        <div class="release_time">{{ item.date }} {{ item.time }}（发布时间）</div>
                        <li class="tab_head li_ttg">
                            <span>0</span>
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                            <span>6</span>
                            <span>7+</span>
                        </li>
                        <li class="li_ttg">
                            <span>{{ item.s0 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s0, item.s0)"></i></span>
                            <span>{{ item.s1 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s1, item.s1)"></i></span>
                            <span>{{ item.s2 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s2, item.s2)"></i></span>
                            <span>{{ item.s3 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s3, item.s3)"></i></span>
                            <span>{{ item.s4 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s4, item.s4)"></i></span>
                            <span>{{ item.s5 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s5, item.s5)"></i></span>
                            <span>{{ item.s6 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s6, item.s6)"></i></span>
                            <span>{{ item.s7 }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.ttg?.odds[index - 1].s7, item.s7)"></i></span>
                        </li>
                    </div>
                </ul>
            </div>

            <div>
                <div class="title">
                    <span>半全场胜平负过关固定红利</span>
                    <span>赛果：<span id="hafu">{{sporttery_pool?.pool_rs?.hafu?.prs_name || '--'}}</span></span>
                </div>
                <ul class="hafu">
                    <div class="hafuBox" v-for="(item, index) in sporttery_pool?.odds_list?.hafu?.odds" :key="index">
                        <div class="release_time">{{ item.date }} {{ item.time }}（发布时间）</div>
                        <li class="tab_head li_hafu">
                            <span>胜胜</span>
                            <span>胜平</span>
                            <span>胜负</span>
                            <span>平胜</span>
                            <span>平平</span>
                            <span>平负</span>
                            <span>负胜</span>
                            <span>负平</span>
                            <span>负负</span>
                        </li>
                        <li class="li_hafu">
                            <span>{{ item.hh }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].hh, item.hh)"></i></span>
                            <span>{{ item.hd }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].hd, item.hd)"></i></span>
                            <span>{{ item.ha }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].ha, item.ha)"></i></span>
                            <span>{{ item.dh }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].dh, item.dh)"></i></span>
                            <span>{{ item.dd }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].dd, item.dd)"></i></span>
                            <span>{{ item.da }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].da, item.da)"></i></span>
                            <span>{{ item.ah }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].ah, item.ah)"></i></span>
                            <span>{{ item.ad }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].ad, item.ad)"></i></span>
                            <span>{{ item.aa }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.hafu?.odds[index - 1].aa, item.aa)"></i></span>
                        </li>
                    </div>
                </ul>
            </div>

            <div>
                <div class="title">
                    <span>比分固定红利</span>
                    <span>赛果：<span id="crs">{{sporttery_pool?.pool_rs?.crs?.prs_name || '--'}}</span></span>
                </div>
                <ul class="crs">
                    <div class="crsBox" v-for="(item, index) in sporttery_pool?.odds_list?.crs?.odds" :key="index">
                        <div class="release_time">{{ item.date }} {{ item.time }}（发布时间）</div>
                        <li class="tab_head li_crs">
                            <span>1:0</span>
                            <span>2:0</span>
                            <span>2:1</span>
                            <span>3:0</span>
                            <span>3:1</span>
                            <span>3:2</span>
                            <span>4:0</span>
                        </li>
                        <li class="li_crs">
                            <span>{{ item["0100"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0100'], item['0100'])"></i></span>
                            <span>{{ item["0200"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0200'], item['0200'])"></i></span>
                            <span>{{ item["0201"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0201'], item['0201'])"></i></span>
                            <span>{{ item["0300"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0300'], item['0300'])"></i></span>
                            <span>{{ item["0301"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0301'], item['0301'])"></i></span>
                            <span>{{ item["0302"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0302'], item['0302'])"></i></span>
                            <span>{{ item["0400"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0400'], item['0400'])"></i></span>
                        </li>
                        <li class="tab_head li_crs">
                            <span>4:1</span>
                            <span>4:2</span>
                            <span>5:0</span>
                            <span>5:1</span>
                            <span>5:2</span>
                            <span>胜其他</span>
                            <span></span>
                        </li>
                        <li class="li_crs">
                            <span>{{ item["0401"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0401'], item['0401'])"></i></span>
                            <span>{{ item["0402"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0402'], item['0402'])"></i></span>
                            <span>{{ item["0500"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0500'], item['0500'])"></i></span>
                            <span>{{ item["0501"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0501'], item['0501'])"></i></span>
                            <span>{{ item["0502"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0502'], item['0502'])"></i></span>
                            <span>{{ item["-1-h"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['-1-h'], item['-1-h'])"></i></span>
                            <span></span>
                        </li>
                        <li class="tab_head li_crs">
                            <span>0:0</span>
                            <span>1:1</span>
                            <span>2:2</span>
                            <span>3:3</span>
                            <span>平其他</span>
                            <span></span>
                            <span></span>
                        </li>
                        <li class="li_crs">
                            <span>{{ item["0000"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0000'], item['0000'])"></i></span>
                            <span>{{ item["0101"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0101'], item['0101'])"></i></span>
                            <span>{{ item["0202"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0202'], item['0202'])"></i></span>
                            <span>{{ item["0303"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0303'], item['0303'])"></i></span>
                            <span>{{ item["-1-d"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['-1-d'], item['-1-d'])"></i></span>
                            <span></span>
                            <span></span>
                        </li>
                        <li class="tab_head li_crs">
                            <span>0:1</span>
                            <span>0:2</span>
                            <span>1:2</span>
                            <span>0:3</span>
                            <span>1:3</span>
                            <span>2:3</span>
                            <span>0:4</span>
                        </li>
                        <li class="li_crs">
                            <span>{{ item["0001"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0001'], item['0001'])"></i></span>
                            <span>{{ item["0002"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0002'], item['0002'])"></i></span>
                            <span>{{ item["0102"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0102'], item['0102'])"></i></span>
                            <span>{{ item["0003"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0003'], item['0003'])"></i></span>
                            <span>{{ item["0103"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0103'], item['0103'])"></i></span>
                            <span>{{ item["0203"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0203'], item['0203'])"></i></span>
                            <span>{{ item["0004"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0004'], item['0004'])"></i></span>
                        </li>
                        <li class="tab_head li_crs">
                            <span>1:4</span>
                            <span>2:4</span>
                            <span>0:5</span>
                            <span>1:5</span>
                            <span>2:5</span>
                            <span>负其他</span>
                            <span></span>
                        </li>
                        <li class="li_crs">
                            <span>{{ item["0104"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0104'], item['0104'])"></i></span>
                            <span>{{ item["0204"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0204'], item['0204'])"></i></span>
                            <span>{{ item["0005"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0005'], item['0005'])"></i></span>
                            <span>{{ item["0105"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0105'], item['0105'])"></i></span>
                            <span>{{ item["0205"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['0205'], item['0205'])"></i></span>
                            <span>{{ item["-1-a"] }}<i v-if="index > 0" v-html="get_icon(index,sporttery_pool?.odds_list?.crs?.odds[index - 1]['-1-a'], item['-1-a'])"></i></span>
                            <span></span>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
        <noData v-if="no_data" :nodata_message="'暂无红利数据'"></noData>
    </div>
</template>
  
<script lang="ts">
import { ref,onMounted,toRef} from 'vue';
import * as game_api from '@/api/game_api';
import noData from '@/components/NoData.vue'

export default{
    name:'GameBonus',
    components: {
        noData,
    },
    props: { 
        sporttery_id: {  
            type: Number,  
            required: true  
        } 
     },
    setup(props:any){
        const sporttery_id: any = toRef(props,'sporttery_id');
        const sporttery_pool: any = ref({})
        const loading = ref(true);
        const no_data = ref(false);
        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>`;
        onMounted(async() => {
            if (sporttery_id.value) {
                sporttery_pool.value = await game_api.get_sporttery_pool({ sporttery_id: sporttery_id.value });
                if(!sporttery_pool.value || !sporttery_pool.value?.odds_list){
                    no_data.value = true;
                }
            }
            loading.value = false;
            return;
        });

        const get_icon = (index:any,after_data:any,now_data:any) => {
            if(index > 0){
                if(Number(after_data) < Number(now_data)){
                    return up;
                }else if(Number(after_data) > Number(now_data)){
                    return down;
                }
            }
        };

        return{
            no_data,
            sporttery_pool,
            get_icon
        }
    }
}
</script>
<style lang="scss" scoped>

.match_pool {
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
  }
  .match_pool > div {
    margin-bottom: 10px;
  }
  .match_pool .title {
    background: #ffffff;
    height: 38px;
    line-height: 38px;
    padding: 0 6px;
    color: #666;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }
  .title span {
    font-size: 14px;
  }
  .title span:last-child {
    color: #f84a4a !important;
  }
  .tab_head {
    padding: 0 6px;
    height: 28px;
    line-height: 28px;
    color: #666;
    background: #f4f4f4;
    display: flex;
    justify-content: space-around;
  }
  ul{
    font-size: 12px;
  }
  ul li {
    padding: 0 6px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #e6e6e6;
    color: #333;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
  }
  ul li span {
    width: 25%;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul li .time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  ul li span p {
    margin:0;
    height: 14px;
    line-height: 14px;
  }
  .error {
    height: 40px;
    line-height: 40px;
    color: #666;
    background: #ffffff;
  }
  .release_time {
    line-height: 30px;
    background: #ffffff;
    color: #999;
    padding: 0 6px;
  }
  
</style>