<template>
    <div>
        <div class="match-tab">
            <div class="tab-sel">
                <div class="around">
                    <p :class="tab_name == 'asia' ? 'around-p active-p' : 'around-p'" @click="tab_name = 'asia'">让球</p>
                    <p :class="tab_name == 'eu' ? 'around-p active-p' : 'around-p'" @click="tab_name = 'eu'">胜平负</p>
                    <p :class="tab_name == 'bs' ? 'around-p active-p' : 'around-p'" @click="tab_name = 'bs'">总进球</p>
                    <p :class="tab_name == 'cr' ? 'around-p active-p' : 'around-p'" @click="tab_name = 'cr'">角球</p>
                </div>
            </div>
        </div>
        <section class="nav-details" id="navDetails">
            <div class="main odd-details">
                <div class="sub-navDetails">
                    <!--指数-欧-->
                    <div v-if="tab_name == 'eu'" 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>公司<span class="c-dingzhi" @click="setup_company(oddtype.eu)">|管理</span>
                                    </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 }}</span></td>
                                    <td>
                                        <p>初 <span>{{ item.FirstOdds[0] }}</span>&nbsp;<span>{{ item.FirstOdds[1] }}</span>&nbsp;
                                        <span>{{ item.FirstOdds[2] }}</span>
                                        </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>&nbsp;<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>&nbsp;<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><span>{{ item.FirstKelly[0]}}</span>&nbsp;<span>{{item.FirstKelly[1]}}</span>&nbsp;<span>{{item.FirstKelly[2] }}</span>
                                        </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>&nbsp;<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>&nbsp;<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 == 'asia'" id="subMain2" class="subMain" oddtype="asia">
                        <table class="asia-table" v-if="game_odds.letgoal_data && game_odds.letgoal_data.length">
                            <thead>
                                <tr>
                                    <th>公司<span class="c-dingzhi" @click="setup_company(oddtype.asia)">|管理</span></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 }}
                                        </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] }}
                                            </span>
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--指数-大小-->
                    <div v-if="tab_name == 'bs'" id="subMain3" class="subMain" oddtype="bs">
                        <table class="asia-table" v-if="game_odds.bigsmall_data && game_odds.bigsmall_data.length">
                            <thead>
                                <tr>
                                    <th>公司<span class="c-dingzhi" @click="setup_company(oddtype.bs)">|管理</span></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 }}</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 == 'cr'" id="subMain4" class="subMain" oddtype="cr">
                        <table class="asia-table" v-if="game_odds.corner_data && game_odds.corner_data.length">
                            <thead>
                                <tr>
                                    <th>公司<span class="c-dingzhi" @click="setup_company(oddtype.cr)">|管理</span>
                                    </th>
                                    <th>多</th>
                                    <th>指数</th>
                                    <th>少</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) of game_odds.corner_data" :key="index" :c='item.CompanyId'>
                                    <td><span>{{ item.CompanyName }}</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>
    <!--我的定制-->
    <van-popup z-index="99" overlay-class="van-overlay-set" class="popup" :show="show_popup" close-on-popstate position="bottom" teleport="body">
    <div v-if="show_popup" class="box">
        <div class="list-header" :style="`padding-top:${common_data.appHeight}px`">
            <span class="back" @click="show_popup = false"></span>
            <span class="title">我的定制</span>
            <span class="right"></span>
        </div>
        <div class="list-box" :style="`padding-top:${common_data.appHeight + 10}px`">
            <div class="list_left">
                <div class="list_title">
                    <span>我的定制</span>
                </div>
                <div class="list_content">
                    <div class="list" v-for="(item, index) of my_company.list" :key="index">
                        <div class="l_left">
                            <span v-html="del_icon" class="list_del" @click="delete_company(item)"></span>
                            <span>{{ item.cname }}</span>
                        </div>
                        <div class="l_right">
                            <span v-if="item.top" class="istop" @click="setup_top_company(item,false)">已置顶</span>
                            <span v-else v-html="top_icon" class="list_top" @click="setup_top_company(item,true)"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list_right">
                <div class="list_title">
                    <span>全部公司</span>
                </div>
                <div class="list_content">
                    <div class="list" v-for="(item, index) of all_company.list" :key="index">
                        <div class="l_left">
                            <span>{{ item.cname }}</span>
                        </div>
                        <div class="l_right">
                            <span v-if="item.selected">已添加</span>
                            <span v-else @click="add_company(item)" v-html="add_icon" class="list_add"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-footer">
            <div class="f_close" @click="onCancel">
                <span>取消</span>
            </div>
            <div class="f_require" @click="onConfirm">
                <span>确定</span>
            </div>
        </div>
    </div>
    </van-popup>
</template>
  
<script lang="ts">
import { ref,defineComponent,onMounted,toRef,watch, reactive} from 'vue';
import * as game_api from '@/api/game_api';
import { showLoadingToast, closeToast } from "vant";
import noData from '@/components/NoData.vue';
import { useRoute } from 'vue-router';
import store from "@/store";
import { default as _} from 'lodash';
export default defineComponent({
    name: 'GameOddsNm',
    components: {
        noData,
    },
    props: { 
        yiqiu_id: {  
            type: Number,  
            required: true  
        },
        activeName: { type: String, default: '' },
     },
    setup(props:any) {
        const route = useRoute();
        const common_data = ref(store.state.common_data);
        const yiqiu_id: any = toRef(props,'yiqiu_id');
        const game_odds: any = ref({});
        const loading = ref(true);
        const no_data = ref(false);
        let show_popup = ref(false);
        let oddtype:any ={
            asia:'asia',
            eu:'eu',
            bs:"bs",
            cr:"cr"
        }
        let tab_name = ref(oddtype.asia);
        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 add_icon  =`<svg width="15px" height="15px" viewBox="0 0 24 24" 
        version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_add</title><g id="欧洲杯" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="画板" stroke="#E04849" stroke-width="1.5"><g id="ic_add"><circle id="椭圆形" cx="12" cy="12" r="11.25"></circle><line x1="12" y1="6" x2="12" y2="18" id="路径-8" stroke-linecap="round"></line> <line x1="6" y1="12" x2="18" y2="12" id="路径-8" stroke-linecap="round"></line></g></g></g>
        </svg>`;
        const del_icon  =`<svg width="15px" height="15px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>ic_del</title> <g id="欧洲杯" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="画板备份" stroke="#E04849" stroke-width="1.5"><g id="ic_del"><circle id="椭圆形" cx="12" cy="12" r="11.25"></circle><line x1="6" y1="12" x2="18" y2="12" id="路径-8" stroke-linecap="round"></line> </g></g></g>
        </svg>`;
        const top_icon =`<svg width="15px" height="15px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_top</title><g id="ic_top" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g id="ic_add" transform="translate(4.000000, 3.500000)" stroke="#CBCBCB" stroke-width="1.5"><line x1="8" y1="0.5" x2="8" y2="16.5" id="路径-8"></line><line x1="2.84286483e-13" y1="0.5" x2="16" y2="0.5" id="路径-8"></line><polyline id="路径-9" stroke-linejoin="round" transform="translate(8.035534, 5.000000) rotate(-315.000000) translate(-8.035534, -5.000000) " points="10.5355339 2.5 5.53553391 2.5 5.53553391 7.5"></polyline></g></g>
        </svg>`;
        let asia_odds:any[] = [];
        let eu_odds:any[]= [];
        let bs_odds:any[] = [];
        let cr_odds:any[]= [];
        let asia:any[] = [];
        let eu:any[]= [];
        let bs:any[] = [];
        let cr:any[]= [];
        let odd_type:string= oddtype.asia;
        let my_company :any = reactive({list:[]});
        let all_company :any = reactive({list:[]});
        const init_data = async() => {
            // if(props.activeName || route.name == "GameOddsNm"){
                closeToast(true);
                showLoadingToast({});
                try {
                    if (yiqiu_id.value) {
                        let result = await game_api.get_game_odds({ yiqiu_id: yiqiu_id.value});
                        console.log(result);
                        if (!result || !result?.odds100_data) {
                            no_data.value = true;
                        } else {
                            // game_odds.value = result;
                            my_company.list = store.state.my_asia || [];
                            game_odds.value ={
                                odds100_data: show_setup_order(result.odds100_data,store.state.my_euro),
                                letgoal_data: show_setup_order(result.letgoal_data,store.state.my_asia),
                                bigsmall_data: show_setup_order(result.bigsmall_data,store.state.my_bs),
                                corner_data: show_setup_order(result.corner_data,store.state.my_cr)
                            } 
                            eu_odds = result.odds100_data;
                            asia_odds= result.letgoal_data;
                            bs_odds = result.bigsmall_data;
                            cr_odds =  result.corner_data;
                            asia = result.asia_companys;
                            eu = result.europe_companys;
                            bs = result.bigsmall_companys;
                            cr = result.corner_companys;
                        }
                    }
                } catch (error) {
                    console.info("GameOdds",error)
                }
                loading.value = false;
                closeToast(true);
                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 == 'eu'){
                return '/';
            }
        };
        //显示定制公司
        const setup_company = (param_type:string) => {
            show_popup.value = true;
            odd_type = param_type;
            switch (odd_type) {
                case oddtype.asia:{
                    //该赛事无亚盘指数
                    if(!asia || asia.length <= 0){
                        return;
                    }
                    asia = asia.map((item:any) => {
                        return{
                            ...item,
                            selected: false
                        }
                    });
                    all_company.list = asia;
                    my_company.list = store.state.my_asia || [];
                    if(my_company && my_company.list.length > 0){
                        let temp_cids:any = my_company.list.map((item:any) => item.cid);
                        //标记选中的公司
                        all_company.list = all_company.list.map((item:any) => {
                            if(temp_cids.includes(item.cid)){
                                item.selected = true;
                            }
                            return item;
                        });
                    }
                    break;
                }
                case oddtype.eu:{
                    //该赛事无欧赔指数
                    if(!eu || eu.length <= 0){
                        return;
                    }
                    eu = eu.map((item:any) => {
                        return{
                            ...item,
                            selected: false
                        }
                    });
                    my_company.list = store.state.my_euro || [];
                    all_company.list = eu;
                    if(my_company && my_company.list.length > 0){
                        let temp_cids:any = my_company.list.map((item:any) => item.cid);
                        //标记选中的公司
                        all_company.list = all_company.list.map((item:any) => {
                            if(temp_cids.includes(item.cid)){
                                item.selected = true;
                            }
                            return item;
                        });
                    }
                    break;
                }
                case oddtype.bs:{
                    //该赛事无总进球指数
                    if(!bs || bs.length <= 0){
                        return;
                    }
                    bs = bs.map((item:any) => {
                        return{
                            ...item,
                            selected: false
                        }
                    });
                    my_company.list = store.state.my_bs || [];
                    all_company.list = bs;
                    if(my_company && my_company.list.length > 0){
                        let temp_cids:any = my_company.list.map((item:any) => item.cid);
                        //标记选中的公司
                        all_company.list = all_company.list.map((item:any) => {
                            if(temp_cids.includes(item.cid)){
                                item.selected = true;
                            }
                            return item;
                        });
                    }
                    break;
                }
                case oddtype.cr:{
                    //该赛事无欧赔指数
                    if(!cr || cr.length <= 0){
                        return;
                    }
                    cr = cr.map((item:any) => {
                        return{
                            ...item,
                            selected: false
                        }
                    });
                    my_company.list = store.state.my_cr || [];
                    all_company.list = cr;
                    if(my_company && my_company.list.length > 0){
                        let temp_cids:any = my_company.list.map((item:any) => item.cid);
                        //标记选中的公司
                        all_company.list = all_company.list.map((item:any) => {
                            if(temp_cids.includes(item.cid)){
                                item.selected = true;
                            }
                            return item;
                        });
                    }
                    break;
                }
            }
        };

        //添加定制公司
        let add_company = (item:any) => {
            //标记置顶的公司
            let top_list:any = my_company.list.filter((v:any) => v.top);
            let temp_list:any = my_company.list.filter((v:any) => !v.top);
            item.top = false;
            temp_list.unshift(item);
            my_company.list = top_list.concat(temp_list);
            //标记选中的公司
            _.map(all_company.list,(v:any) => {
                if(item.cid == v.cid){
                    v.selected = true;
                }
                return v;
            });
        };

        //删除定制公司
        let delete_company = (item:any) =>{
            //标记选中的公司
            _.map(all_company.list,(v:any) => {
                if(item.cid == v.cid){
                    v.selected = false;
                }
                return v;
            });
            my_company.list = my_company.list.filter((v:any) => v.cid != item.cid);
        }

        //置顶定制公司顺序
        let setup_top_company = (item:any,is_top:boolean) =>{
            if(!my_company || !my_company.list || my_company.list.length <= 0){
                return ;
            }
            //标记选中的公司置顶
            if(is_top){
                let temp_list:any  = my_company.list.filter((v:any) => v.cid != item.cid);
                item.top = true;
                temp_list.unshift(item);
                my_company.list = temp_list;
            }else{
                //取消置顶
                let temp_list:any  = my_company.list.filter((v:any) => v.cid != item.cid);
                item.top = false;
                temp_list.push(item);
                my_company.list = temp_list;
            }
        }

        //初始化数据 根据我的定制公司顺序显示
        let show_setup_order = (odds_list:any,company_list:any) => {
            //没有我的定制公司 则直接显示默认公司
            if(!company_list || company_list.length <= 0){
                return odds_list;
            }
            let setup_cids : any = _.map(company_list,(v:any) => v.cid);
            let temp_list:any = [];
            for (const cid of setup_cids) {
                let  odd:any = odds_list.find((v:any) => v.CompanyId == cid);
                if(!odd){
                    continue;
                }
                temp_list.push(odd);
            }
            return temp_list;
        }

        let onCancel = () => {
            show_popup.value = false;
        }

        let onConfirm = () => {
            show_popup.value = false;
            let action_name:any ='';
            tab_name.value = odd_type;
            console.info('confirm',odd_type);
            switch (odd_type) {
                case oddtype.asia:{
                    action_name  = "updateMyAsia";
                    game_odds.value.letgoal_data = show_setup_order(asia_odds,my_company.list);
                    break;
                }
                case oddtype.eu:{
                    action_name  = "updateMyEuro";
                    game_odds.value.odds100_data = show_setup_order(eu_odds,my_company.list);
                    break;
                }
                case oddtype.bs:{
                    action_name = "updateMyBs";
                    game_odds.value.bigsmall_data = show_setup_order(bs_odds,my_company.list);
                    break;
                }
                case oddtype.cr:{
                    action_name  = "updateMyCr";
                    game_odds.value.corner_data = show_setup_order(cr_odds,my_company.list);
                    break;
                }
            }
            //保存我的定制公司
            store.commit(action_name, my_company.list);
            
        }

        return {
            common_data,
            tab_name,
            no_data,
            show_popup,
            game_odds,
            get_icon,
            setup_company,
            my_company,
            all_company,
            add_icon,
            del_icon,
            top_icon,
            add_company,
            delete_company,
            setup_top_company,
            show_setup_order,
            onCancel,
            onConfirm,
            oddtype,
            // VanDialog      
        }
    }
});
</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: space-around;
        display: flex;
        width: 100%;
        .around {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 1px;
            width: 100%;
            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: 25%;
            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 table tr  p {
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.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%;
}
//我的定制样式
*{
    padding: 0;
    margin: 0;
}
.box{
    background: rgb(242, 242, 242);
}
.list-header{
    background: #FF4242;
    color:#fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 44px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    .back {
        height: 44px;
        line-height: 44px;
        display: flex;
        justify-content: left;
        align-items: center;
        padding-left: 16px;
    }

  .back,
  .right {
    min-width: 30px;
  }

  .back:after {
    content: '';
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
.van-overlay-set,
  .van-popup--top {
    top: 0;
    right: 0;
    height:100%;
    max-width: 769Px;
    min-width: 320Px;
    margin: 0 auto !important;
  }
  .popup{
    top: 0;
    right: 0;
    height:100%;
    max-width: 769Px;
    min-width: 320Px;
    margin: 0 auto !important;
    background: rgb(242, 242, 242);
  }
.list-box{
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom:80px;
    .list_left{
        background: #ffffff;
        border-radius: 5px;
        flex: 1;
        margin-right: 10px;
        padding: 10px 10px;
        overflow-y: auto;
    }
    .list_right{
        background: #ffffff;
        border-radius: 5px;
        flex: 1;
        padding: 10px 10px;
        overflow-y: auto;
    }
    .list_title{
        font-size: 12px;
        color: rgb(200, 200, 200);
    }
    .list{
        padding: 15px 0;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgb(250, 250, 250);
    }
    .list_del{
        margin-right: 10px;
    }
    .l_left span{
        display: inline-block;
        vertical-align: middle;
    }
    .list_del,.list_top,.list_add{
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    .l_right{
        width: 50px;
        text-align: center;
    }
    .istop{
        display: inline-block;
        vertical-align: middle;
        color: rgb(251, 41, 51);
    }
    .isadd{
        display: inline-block;
        vertical-align: middle;
        color: rgb(200, 200, 200);
    }
}

.list-footer{
    padding: 15px 15px;
    margin : 0 auto;
    background-color: rgba(255, 255, 255, 1);
    border-top: solid 1px rgb(242, 242, 242);
    z-index: 10;
    border-radius: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .f_close,.f_require{
        flex: 1;
        margin-right: 15px;
        border-radius: 5px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        background-color: rgb(242, 242, 242);
        text-align: center;
    }
    .f_require{
        background-color: rgb(209, 21, 34);
        color: #ffffff;
    }
    
}
.c-dingzhi{
    color:#1F78FF;
}

</style>