<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>
      <div class="select" style="position:relative;width:200px;">
        <span class="select-name">联赛：</span>
        <el-button type="plain" size="small" @click="getSpread">查看联赛</el-button>
        <check-all
          class="check-position"
          v-show="spread"
          :checkData="leagueData"
          @leagueName="getNowGameData"
        ></check-all>
      </div>
      <div class="select" style="width:300px">
        <span class="select-name">联赛名:</span>
        <el-input size="small" style="width:180px" v-model="inputValue"></el-input>
      </div>
      <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">
      <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", // 时间跟新标志,
      gameAllData: [],
      gameData: [], // 赛果数据
      leagueData: [], // 联赛集合分类
      loading: false,
      spread: false,
      inputValue: "", // 联赛输入框
      limitData: [], // 勾选的联赛对应的数据
      limit: false // 是否有联赛范围限制
    };
  },
  created() {
    this.getNowDate();
    this.getMatchData();
  },
  mounted() {
    this.setFirstDate();
  },
  methods: {
    search() {
      let resultData = [];
      if (this.limit) {
          if(this.inputValue === '') {
              this.gameData = this.limitData
          } else {
                for (let item of this.limitData) {
                    if (item.league_name.indexOf(this.inputValue) > -1) {
                        resultData.push(item);
                    }
                }
            this.gameData = resultData    
          }
      } else {
        if(this.inputValue === '') {
            this.gameData = this.gameAllData
        } else {
            for(let item of this.gameAllData) {
                if (item.league_name.indexOf(this.inputValue) > -1) {
                    resultData.push(item);
                }
            }
            this.gameData = resultData
        }
      }
    },
    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.spread = false; // 切换球类时关闭球类联赛搜索
      this.loading = true;
      this.$http
        .get(this.$ports.home.getMatchResult, params)
        .then(res => {
          if (res.data.data) {
            this.gameAllData = res.data.data[1] ? res.data.data[1] : [];
            this.leagueData = res.data.data[0] ? res.data.data[0] : [];
            console.log("league", this.leagueData);
            console.log("all", this.gameAllData);
            this.gameData = JSON.parse(JSON.stringify(this.gameAllData));
          }
          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("/");
    },
    getSpread() {
      // 联赛选择
      this.spread = !this.spread;
    },
    getNowGameData(league, isSpread) {
      // 根据联赛搜索的数据
      this.gameData = [];
      this.limitData = [];
      this.limit = false;
      if (league.length > 0) {
        for (let id of league) {
          for (let item of this.gameAllData) {
            if (item.league_id == id) {
              this.gameData.push(item);
            }
          }
        }
      }
      this.limitData = JSON.parse(JSON.stringify(this.gameData));
      this.limit = true;
      this.spread = isSpread;
    }
  },
  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: 280px;
}
.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;
}
.check-position {
  position: absolute;
  top: 35px;
  left: 100px;
}
</style>