sport_mobile/.svn/pristine/b8/b84bc627a59670f5963b0ce92a9c9f6ca8100731.svn-base

<template>
  <div class="gameResult">
    <!-- <div class="box">
      <div class="title">赛事结果</div>
      <div class='home' @click="goHome">返回首页</div>
    </div> -->
    <div class="box">
        <div class="select">
            <span class="select-name">体育类型：</span>
            <el-select v-model="physicaLType" size="small" style="width: 150px" @change="getMatchData">
                <el-option
                v-for="(item, index) of type"
                :key="index"
                :value="item.value"
                :label="item.label"
                ></el-option>
            </el-select>
        </div>
        <!-- <check-all></check-all> -->
        <div class="interval"></div>
        <div class="search">
            <el-button size="small" type="info" @click="search">搜索</el-button>
        </div>
        <div class="search">
            <el-button size="small" type="text" @click="goHome" style="color: #ffffff;">返回首页</el-button>
        </div>
    </div>
    <div class="content">
        <!-- <el-tabs type="border-card">
            <el-tab-pane v-for="(item, index) of dateArr" :key="index" :label="item.date">{{item}}</el-tab-pane>
        </el-tabs> -->
        <div class="head-date" v-for="(item, index) of dateArr" :key="index" 
            @click="changeMatchData(item, index)" :id="'head' + index">
            <div>
                <div>{{item.date}}</div>
                <div>{{index == 0 ? '今日' : item.weekday}}</div>
            </div>
        </div>
        <!-- <football-table :footballData="gameData" :loading="loading" v-if="physicaLType ==='zq'"></football-table> -->
        <new-football-table :footballData="gameData" :loading="loading" v-if="physicaLType === 'zq'"></new-football-table>
        <basketball-table :basketballData="gameData" :loading="loading" v-if="physicaLType === 'lq'"></basketball-table>
        <tennis-table :tennisData="gameData" :loading="loading" v-if="physicaLType === 'wq'"></tennis-table>
        <baseball-table :baseballData="gameData" :laoding="loading" v-if="physicaLType === 'bq'"></baseball-table>
    </div>
  </div>
</template>
<script>
import FootballTable from '../../components/Gametable/FootballTable'
import BasketballTable from '../../components/Gametable/BasketballTable'
import TennisTable from '../../components/Gametable/TennisTable'
import BaseballTable from '../../components/Gametable/BaseballTable'
import NewFootballTable from '../../components/Gametable/NewFootballTable'
import CheckAll from '../../components/Gametable/CheckAll'


export default {
    name: "gameResult",
    data() {
        return {
            physicaLType: 'bq',
            type: [{ value: 'zq', label: "足球" }, { value: 'lq', label: "篮球" },
                    {value: 'wq', label: '网球'}, {value: 'bq', label: '棒球'}],
            showGame: false,
            game: [],
            selectGame: [],
            date: '',
            dateArr: [], // 最近7天的时间,
            matchDate: '', // 查询时间
            updateTime: 'update', // 时间跟新标志,
            gameData: [],
            loading: false
        };
    },
    created() {
        this.getNowDate();
        this.getMatchData();
    },
    mounted() {
        this.setFirstDate();
    },
    methods: {
        search() {
            this.getMatchData();
        },
        showGameSet() {
            this.showGame = !this.showGame
        },
        // 获取现在的时间
        getNowDate() {
            if(this.updateTime === 'update') {
                this.setDateArr(new Date(), 7)
            }
        },
        setDateArr(date, num) { // 设置过去一周的时间
            for(let i=0; i<num; i++) {
                let nowDate = new Date(date.getTime() - 24*60*60*1000*i)
                this.dateArr.push(
                    {
                        weekday: this.getweekDay(nowDate), // 星期几
                        date: nowDate.toLocaleDateString()  // 年月日
                    }
                )
            }
            this.matchDate = this.dateArr[0].date // 默认查询时间为当前时间
            this.updateTime = 'stop'
        },
        getweekDay(date) {
            let weekday = new Array(7)
            weekday[0] = "星期日"
            weekday[1] = "星期一"
            weekday[2] = "星期二"
            weekday[3] = "星期三"
            weekday[4] = "星期四"
            weekday[5] = "星期五"
            weekday[6] = "星期六"
            return weekday[date.getDay()];
        },
        // 获取赛事数据
        getMatchData() {
            let params = {
                game_code: this.physicaLType,
                match_date: this.matchDate
            }
            this.loading = true
            this.$http.get(this.$ports.home.getMatchResult, params)
            .then(res => {
                if(res.data.data) {
                    this.gameData = res.data.data[1] ? res.data.data[1] : {}
                }
                this.loading = false
            })
            .catch(err => {
                this.loading = false
                this.$message.error(err.message)
            })
        },
        changeMatchData(item, index) { // 选项卡操作，并查询改时间的赛果
            // 样式切换
            let allhead = document.getElementsByClassName('head-date')
            let head = document.getElementById('head'+ index)
            for(let i =0; i<allhead.length;i ++) {
                allhead[i].style.color = '#747474'
                allhead[i].style.backgroundColor = '#e3e3e3'
            }
            head.style.color = "#ffffff"
            head.style.backgroundColor = '#373737'
            // 当前选中的时间作为搜索条件
            this.matchDate = item.date
            this.getMatchData();
        },
        setFirstDate() { // 初始化时, 当前时间默认选中
             let allhead = document.getElementsByClassName('head-date')
             allhead[0].style.color = "#ffffff"
             allhead[0].style.backgroundColor = '#373737'
        },
        goHome() { // 返回首页
            this.$router.push('/');
        }
    },
    components: {
        FootballTable,
        BasketballTable,
        TennisTable,
        BaseballTable,
        NewFootballTable,
        CheckAll
    }
}
</script>
<style>
    .el-select .el-input__inner:focus {
      border-color: #999999;
    }
    .el-select .el-input.is-focus .el-input__inner {
      border-color: #999999;
    }
    .el-input .el-input__inner:focus {
      border-color: #999999;
    }
    .el-input .el-input.is-focus .el-input__inner {
      border-color: #999999;
    }
</style>
<style scoped>
    /deep/ .el-checkbox__input {
        display: inline-grid;
        white-space: pre-line;
        word-wrap: break-word;
        overflow: hidden;
        line-height: 20px;
    }
    /deep/ .el-checkbox__label {
        font-size: 0.2rem;
    }
    .box {
        display: flex;
        height: 60px;
        align-items: center;
        background: linear-gradient(to bottom, #999999, #6a6a6b);
    }
    .title {
        flex: 1;
        font-size: 16px;
        color: #ffffff;
        margin-left: 50px;
    }
    .home {
        flex: 0 1 50px;
        font-size: 14px;
        color: #ffffff;
        margin-right: 50px;
    }
    .select-name {
    color: #ffffff;
    margin-left: 50px;
    margin-right: 10px;
    }
    .select {
        width: 400px;
    }
    .interval {
        flex: 1;
    }
    .search {
        flex: 0 1 50px;
        margin-right: 20px;
    }
    .option-content {
        display: flex;
        width: 400px;
        flex-flow: row wrap;
        align-items: center;
    }
    .option-title {
        width: 100%;
        height: 80px;
        font-size: 14px;
        /* background-color: #2d2d2d; */
    }
    .game-content {
       position: absolute;
       margin-top: 10px;
       background-color: #ffffff;
       font-size: 0.2rem;
    }
    .game-title {
        background-color: #373737;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
    }
    .game-item-content {
        /* display: flex;
        flex-flow: row wrap; */
        height: 300px;
        width: 500px;
        background-color: #ffffff;
        padding-left: 10px;
        padding-top: 10px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .game-item {
        display: inline-block;
        width: 150px;
        height: auto;
    }
    .content {
        width: 800px;
        margin: 20px auto;
        overflow-x: hidden;
    }
   .head-date {
       display: inline-block;
       box-sizing: content-box;
       height: 40px;
       width: 80px;
       padding: 10px 10px 0 10px;
       text-align: center;
       color: #747474;
       font-weight: 700;
       background-color: #e3e3e3;
   }
   .head-date:hover {
       opacity: 0.8;
   }
   .game-grid {
       box-sizing: border-box;
       width: 100%;
       border: solid 1px #e3e3e3;
   }
   .game-grid-head {
       width: 100%;
       height: 40px;
       line-height: 40px;
       background-color: #373737;
       color: #ffffff;
       font-size: 14px;
       font-weight: 700;
       text-align: center;
   }
   .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;
   }
   
</style>