sport_mobile/.svn/pristine/e8/e89a4bbbbcae77275879c0d55f86c580a42c1a78.svn-base

<template>
    <div class="football" v-loading="ftLoading">
        <div v-if="football.length == 0">暂无数据</div>
        <div class="game-grid" v-for="(one, inde) of football" :key="inde">
            <div class="game-grid-head">
                <!-- <img v-if="one.show" src="../../assets/st-imges/jian.png" class="img-size"/>
                <img  v-else src="../../assets/st-imges/jia.png" class="imgsize" /> -->
                <span style='display:inline-block;width: 490px;'>{{one.league_name}}</span>
                <span style="display:inline-block;width: 150px">上半场</span>
                <span style="display:inline-block;width: 150px">赛果</span>
            </div>
            <div class="game-grid" v-for="(item, index) of one.match_data" :key="index">
                <div class="game-grid-one">
                    <div class="game-grid-cell">
                        <div style="width: 100px">
                            <span>{{item.match_time}}</span>
                        </div>
                    </div>
                    <div class="game-grid-cell">
                        <div style="width: 400px;font-weight:bold">
                            {{item.home_team}}
                            <span style="color: #ff9200">VS</span>
                            {{item.guest_team}}</div>
                    </div>
                    <div class="game-grid-cell">
                        <div style="width: 150px;">{{item.score_half}}</div>
                    </div>
                    <div class="game-grid-cell">
                        <div style="width: 150px;">{{item.score_full}}</div>
                    </div>
                </div>
                <div v-for="(info, ind) of item.play_data" :key="ind" class="game-gird">
                    <div class="game-grid-one" v-show="info.show">
                        <div class="game-grid-cell">
                            <div style="width: 100px">
                            </div>
                        </div>
                        <div class="game-grid-cell">
                            <div style="width: 400px;">
                                {{info.play_name}}
                                <span style="color: #ff9200">:</span>
                                {{info.play_result}}
                            </div>
                        </div>
                        <div class="game-grid-cell">
                            <div style="width: 300px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="football.length == 0" class="no-message">暂无数据</div>
    </div>
</template>
<script>
    export default {
        name: 'football',
        props: {
            footballData: {
                type: Array,
                default: ()=>[]
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                football: [],
                ftLoading: false,
                show: true,
                test: '1'
            }
        },
        watch: {
            footballData: {
                handler(val) {
                    if(val) {
                        this.football = JSON.parse(JSON.stringify(val))
                    }
                },
                deep: true
            },
            loading(val) {
                this.ftLoading = val
            }
        },
        boforemounted() {
            this.initShow();
        },
        methods: {
            // 默认展开
            initShow() {
                for(let item of this.football) {
                    item.show = !item.show;
                }
                // for(let i=0;i<this.football.length;i++) {
                //     this.$set(this.football[i], 'show'+i, true)
                // }
            },
            setShow(val, index) {
                // console.log('index',index)
                // this.initshow = false
                // this.show = !this.show
                // this.$set(val, 'show', this.show)
                // console.log(val)
                // console.log('show', this.show, val.show)
                val.show = !val.show
            }
        }
    }
</script>
<style scoped>
    .game-grid {
        box-sizing: border-box;
        width: 800px;
        border: solid 1px #e3e3e3;
        border-top: none;
        border-collapse: collapse;
    }
   .game-grid-head {
       position: relative;
       width: 100%;
       height: 40px;
       line-height: 40px;
       background-color: #373737;
       color: #ffffff;
       font-size: 14px;
       font-weight: 700;
       text-align: center;
   }
   .img-size {
       position: absolute;
       height: 10px;
       width: 10px;
       top: 15px;
       left: 10px;
   }
   .game-grid-one {
       display:table-cell;
       vertical-align: middle;
       text-align: center;
       font-size: 13px;
       border-collapse: collapse;
   }
    .game-grid-cell {
        display:table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 13px;
        border-collapse: collapse;
        padding: 6px 0;
        /* border-right: 1px solid #d7d7d7; */
        border: 1px solid #d7d7d7;
        border-top: none;
    }
    .no-message {
        text-align: center;
        margin-top: 50px;
        padding-right: 100px;
        font-size: 16px;
        font-weight: 700;
    }
</style>