sport_mobile/.svn/pristine/33/3352707edf4286a5ee1d640a1545e93ff6b2083e.svn-base

<template>
    <div class="tennis">
        <div v-if="tennis.length == 0" class="no-message">暂无数据</div>
        <div v-for="(item, index) of tennis" :key="index">
            <el-table  :data="item.match_data">
                <el-table-column type="expand" style="border: none">
                    <template slot-scope="props">
                        <div v-if="props.row.play_data.length > 2">
                        <el-table style="width:700px;margin:0 auto" 
                        :data="[].concat(props.row.play_data[props.row.play_data.length-1])
                        .concat(props.row.play_data[props.row.play_data.length-2])">
                            <el-table-column label="队员" prop="team_name" width="140"></el-table-column>
                            <el-table-column label="第一盘" prop="sc_1th"></el-table-column>
                            <el-table-column label="第二盘" prop="sc_2th"></el-table-column>
                            <el-table-column label="第三盘" prop="sc_3th"></el-table-column>
                            <el-table-column label="第四盘" prop="sc_4th"></el-table-column>
                            <el-table-column label="第五盘" prop="sc_5th"></el-table-column>
                            <el-table-column label="局" prop="game_num"></el-table-column>
                            <el-table-column label="盘" prop="disc_num"></el-table-column>
                        </el-table>
                        <div style="padding: 8px 8px;margin: 0 auto">
                            <div style="font-weight:bold;">结果：</div>
                            <div style="margin-left: 40px;line-height: 28px;" v-for="(res, index) of props.row.play_data" :key="index">
                                <div v-if="index < props.row.play_data.length -2">{{res.play_name}}：{{res.play_result}}</div>
                            </div>
                        </div>
                        </div>
                        <div v-else style="text-align:center">暂无数据</div>
                    </template>
                </el-table-column>
                <el-table-column :label="item.league_name" width="400" align="center" style="border-left:none">
                    <template slot-scope="scope">
                        {{scope.row.match_time}}
                        <span style="width: 400px;font-weight:bold">
                            {{scope.row.home_team}}
                            <span style="color: #ff9200">VS</span>
                            {{scope.row.guest_team}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="赛果" align="center" prop="score_result"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'tennis',
        props: {
            tennisData: {
                type: Array,
                default: ()=>[]
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                tennis: [],
                tsLoading: false,
                show: true,
                test: '1'
            }
        },
        watch: {
            tennisData: {
                handler(val) {
                    if(val) {
                        this.tennis = JSON.parse(JSON.stringify(val))
                    }
                },
                deep: true
            },
            loading(val) {
                this.BtLoading = val
            }
        },
        methods: {
            // 默认展开
            initShow() {
                for(let item of this.tennis) {
                    item.show = !item.show;
                }
            },
            setShow(val, index) {
                val.show = !val.show
            },
        }
    }
</script>
<style>
    .tennis .el-table {
        border-top: none;
    }
    .tennis .el-table th {
        padding: 8px 0;
        background-color: #373737;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }
    .tennis .sec-table .el-table th {
        padding: 4px 0;
        background-color: #e3e3e3;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }
    
    .tennis .el-table td {
        padding: 6px 0;
    }
    .tennis .el-table--border th {
        border: none;
    }
</style>
<style scoped>
    .no-message {
        text-align: center;
        margin-top: 50px;
        padding-right: 100px;
        font-size: 16px;
        font-weight: 700;
    }
</style>