<template>
  <div>
    <div v-if="isData">
      <div v-if="obj.a ">
        <div class="tit">
          <span>总分:大/小</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code == 'tnb'"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code == 'tns'"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.b ">
        <div class="tit">
          <span>总分:大/小-上半场</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_h') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-上半场')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_h')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-上半场')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.c ">
        <div class="tit">
          <span>总分:大/小-第一节</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_1') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-第一节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_1')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-第一节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.d ">
        <div class="tit">
          <span>总分:大/小-第二节</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_2') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-第二节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_2')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-第二节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.e ">
        <div class="tit">
          <span>总分:大/小-第三节</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_3') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-第三节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_3')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-第三节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.f ">
        <div class="tit">
          <span>总分:大/小-第四节</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_4') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-第四节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_4')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-第四节')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.g ">
        <div class="tit">
          <span>总分:大/小-前五局</span>
        </div>
        <div class="playCode">
          <div class="row item-center">
            <div class="teamName wrap">大</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tnb')  && item.odds_code.endsWith('_5') "
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'大','总分:大/小-前五局')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row item-center">
            <div class="teamName wrap">小</div>
            <div class="row allAlignment">
              <div
                class="row center obbsBox rightAlignment"
                v-for="(item,index) in data"
                v-if="item.odds_code.startsWith('tns')  && item.odds_code.endsWith('_5')"
              >
                <span class="condation">{{item.condition}}</span>
                <div v-if="item.odds <= 0" class="odds row center">
                  <img
                    style="vertical-align:middle;width:0.2rem"
                    src="@/assets/st-imges/mima.png"
                    alt
                  />
                </div>
                <div
                  v-else
                  class="odds row center"
                  :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}"
                  @click="betMethod(index,item.id,'小','总分:大/小-前五局')"
                >
                  <span>{{item.odds}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "TN",
      data: [], //数据源
      isData: "", //
      guest_team: "", //客队名
      home_team: "", //主队名
      obj: "", //
      match_id: "",
      limit: "", //投注数量
      lg_id: "",
      match_inf:{},
    };
  },
  /***
   * 方法
   */
  methods: {
    //玩法分类
    playGrouping(data) {
      let obj = {};
      let betting = this.$store.getters.getBetting;
      data.forEach(e => {
        if (betting.length > 0) {
          for (let i = 0; i < betting.length; i++) {
            if (betting[i].title == "TN" && betting[i].data.length > 0) {
              for (let j = 0; j < betting[i].data.length; j++) {
                if (betting[i].data[j].mark == e.mark) {
                  this.$set(e, "isTrue", true);
                  //betting[i].data.splice(j,1);
                }
              }
              break;
            }
          }
        }
        e.lg_id = this.lg_id;
        // console.log("odds_code:", e.odds_code);
        if (e.odds_code == "tnb" || e.odds_code == "tns") {
          obj.a = true;
        } else if (e.odds_code.endsWith("_h")) {
          obj.b = true;
        } else if (e.odds_code.endsWith("_1")) {
          obj.c = true;
        } else if (e.odds_code.endsWith("_2")) {
          obj.d = true;
        } else if (e.odds_code.endsWith("_3")) {
          obj.e = true;
        } else if (e.odds_code.endsWith("_4")) {
          obj.f = true;
        } else if (e.odds_code.endsWith("_5")) {
          obj.g = true;
        }
      });
      this.obj = obj;
    },

    /*---------------------------------- */
    //玩法投注
    betMethod(index, id, name, playName) {
      //调用投注公共方法
      let betting;
      let _this = this;
      let ballId = this.$store.getters.getBallCode;
      let bettingType = this.$store.getters.getBettingType;

      if (bettingType == 2) {
        betting = this.$store.getters.getPassBetting;
        betting = betting == null ? [] : betting;
        for (let e in betting) {
          if (betting[e].title == this.title) {
            for (let i in betting[e].data) {
              for (let j in this.data) {
                if (betting[e].data[i].mark == this.data[j].mark) {
                  this.$set(this.data[j], "isTrue", false);
                  break;
                }
              }
            }
          }
        }
      } else if (bettingType == 1) {
        betting = this.$store.getters.getBetting;
      }
      if (this.data[index].isTrue) {
        this.$set(this.data[index], "isTrue", false);
      } else {
        this.$set(this.data[index], "isTrue", true);
      }
      //调用投注公共方法
      let teamName = {
        home: this.home_team,
        guest: this.guest_team
      };
      this.$public.publicBetMethod(
        this.data,
        this.title,
        index,
        betting,
        teamName,
        playName,
        name,
        this.match_id,
        ballId,
        this.limit,
        bettingType,
        this.$store.getters.getActivity,
        this.match_inf,
        function(data, type) {
          if (type) {
            _this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 });
          }
          if (bettingType == 2) {
            _this.$store.dispatch("SET_PASSBETTING", []);
            _this.$store.dispatch("SET_PASSBETTING", data);
          } else {
            _this.$store.dispatch("SET_BETTING", []);
            _this.$store.dispatch("SET_BETTING", data);
          }
        }
      );
    }
  },
  /**
   * 计算属性
   */
  computed: {
    getGameRatio() {
      return this.$store.getters.getGameRatio;
    },
    //获取投注数据
    getBetting() {
      if (this.$store.getters.getBettingType == 2) {
        return this.$store.getters.getPassBetting;
      } else {
        return this.$store.getters.getBetting;
      }
    },
    //获取投注数据数量
    getLimit() {
      return this.$store.getters.getLimit;
    }
  },
  /**
   * 监听器
   */
  watch: {
    getGameRatio(val) {
      this.lg_id = val.lg_id;
      this.match_id = val.match_id;
      this.guest_team = val.guest_team;
      this.home_team = val.home_team;
      this.match_inf={
        match_process:val.match_process,
        match_ptime:val.match_ptime,
        match_score:val.match_score,
      }
      // console.log('Data', val)
      val.oddsData.forEach(e => {
        if (e[0].p_code == this.title) {
          this.data = e;
          this.isData = true;
          this.playGrouping(this.data);
        }
      });
      //console.log(this.data);
    },
    //投注数据监听和处理
    getBetting(val) {
      if (val.length > 0) {
        let mark = this.$store.getters.getDeleteType;
        for (let i = 0; i < val.length; i++) {
          if (val[i].title == this.title) {
            for (let j = 0; j < this.data.length; j++) {
              if (this.data[j].mark == mark) {
                this.$set(this.data[j], "isTrue", false);
                break;
              }
            }
            break;
          }
        }
      } else {
        for (let j = 0; j < this.data.length; j++) {
          if (this.data[j].isTrue) {
            this.$set(this.data[j], "isTrue", false);
          }
        }
      }
    },
    //投注数量
    getLimit(val) {
      this.limit = val;
    }
  }
};
</script>
<style scoped>
.tit {
  background: #cdcdcd;
  font-size: 0.14rem;
  padding: 0 0.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #333;
}
.playCode {
  background: #fff;
  font-size: 0.16rem;
  padding: 0 0.1rem;
}
.obbsBox {
  width: 1.3rem;
  min-height: 0.4rem;
}
.teamName {
  width: 1.5rem;
}
.odds {
  display: inline-block;
  width: 0.48rem;
  height: 0.3rem;
  font-size: 0.14rem;
  border: 0.01rem solid #ccc;
  line-height: 0.3rem;
  text-align: center;
  border-radius: 0.05rem;
  cursor: pointer;
}
.odds:hover,
.odds:hover span {
  background: #ddd;
  color: #f76649;
}
.condation {
  color: #f76649;
  font-size: 0.14rem;
  font-weight: bold;
  margin-right: 0.1rem;
}
.guest .odds span {
  line-height: 0.44rem;
}
/*玩法加注样式*/
.chooseStyle {
  background: #f76649;
  color: #fff;
  border-color: #f76649;
}
.teamName {
  font-size: 0.14rem;
}
</style>