sport_pc/.svn/pristine/1f/1f8df11d41431cbbefd3bbbeb176851bad743480.svn-base

<template>
  <div>
    <div v-if="isDisplay">
      <div v-for="item in data">
        <yd-accordion>
          <!-- 组件标题 -->
          <yd-accordion-item class="Match-game" :title="item.title" open>
            <!-- 让球 -->
            <div v-if="item.title == '角球:让球'|| item.title =='角球:让球-上半场' ">
              <!-- <div slot="txt" class="Match-game-stat" v-if="table.census">
								当前总数:{{ table.census }}
              </div>-->
              <div v-if="item.val.a">
                <div v-for="(items) in item.val.a.data">
                  <div class="row allAlignment center rowBox">
                    <span class="The-club">{{ item.val.a.type }}</span>
                    <span class="column center btn-box">
                      <i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
                      <i>{{ items.odds }}</i>
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="item.val.b">
                <div v-for="(items) in item.val.b.data">
                  <div class="row allAlignment center rowBox">
                    <span class="The-club">{{ item.val.b.type }}</span>
                    <span class="column center btn-box">
                      <i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
                      <i>{{ items.odds }}</i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 大小  a==大 , b ==小-->
            <div v-if="item.title == '角球:进球大小'|| item.title =='角球:进球大小-上半场' ">
              <div class="row allAlignment center rowBox" style="padding:0;">
                <!-- {{item.data.a}} -->
                <div class="column  width-box" style="border-right: 1px solid #e4e4e4;">
                  <div v-for="(items) in item.data.a" class=" left-box">
                    <div class="row allAlignment center">
                      <span>大</span>
                      <div class="column center btn-box">
                        <span style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</span>
                        <span>{{ items.odds }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="column width-box">
                  <div v-for="(items) in item.data.b" class="right-box">
                    <div class="row allAlignment center ">
                      <span>小</span>
                      <div class="column center btn-box">
                        <span style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</span>
                        <span>{{ items.odds }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 独赢 -->
            <div v-if="item.title == '角球:独赢'|| item.title =='角球:独赢-上半场' ">
              独赢
              <!-- <div v-if="item.val.a">
									<div v-for="(items) in item.val.a.data"> 
										<div style="background: #F0F0F0;">
											<span class="The-club">{{ item.val.a.type }}</span>
											<span>
												<i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
												<i > {{ items.odds }}</i>
											</span>
										</div>
									</div>
									<div v-for="(items) in item.val.b.data">
										<div style="background: #F0F0F0;">
											<span class="The-club">{{ item.val.b.type }}</span>
											<span>
												<i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
												<i> {{ items.odds }}</i>
											</span>
										</div>
									</div> 
              </div>-->
            </div>

            <!-- 单双 -->
            <div v-if="item.title == '角球:单双'|| item.title =='角球:单双-上半场' ">
              单双
              <!-- <div v-if="item.val.a">
									<div v-for="(items) in item.val.a.data"> 
										<div style="background: #F0F0F0;">
											<span class="The-club">{{ item.val.a.type }}</span>
											<span>
												<i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
												<i > {{ items.odds }}</i>
											</span>
										</div>
									</div>
									<div v-for="(items) in item.val.b.data">
										<div style="background: #F0F0F0;">
											<span class="The-club">{{ item.val.b.type }}</span>
											<span>
												<i style="color: #FD8F26;" v-if="items.condition">{{ items.condition }}</i>
												<i> {{ items.odds }}</i>
											</span>
										</div>
									</div> 
              </div>-->
            </div>

            <!--  -->
          </yd-accordion-item>
        </yd-accordion>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "角球",
      data: [],
      isDisplay: false
    };
  },
  methods: {
    // 点击更改组件选中状态
    Theclubboxclick(num) {
      // 更改组件是否选中
      this.$set(
        this.table.list[num],
        "istrue",
        this.table.list[num].istrue == true ? false : true
      );
    }
  },
  computed: {
    getUserIcons() {
      return this.$store.getters.getGameRatio;
    }
  },
  watch: {
    getUserIcons(val) {
      if (!val) return false;
      this.home_team = val.home_team;
      this.guest_team = val.guest_team;
      let objA = [],
        objB = [],
        objC = [],
        objD = [];
      let lelBall = {},
        lelBall1 = {};
      let sizeA = {},
        sizeB = {};
      let singleA = {},
        singleB = {};
      let sinA = {},
        sinB = {};
      val.oddsData.forEach(res => {
        if (res.key == this.title) {
          this.isDisplay = true;
          let key = Object.keys(res.data);
          let data = Object.values(res.data);
          key.forEach((e, index) => {
            let str = e.split("|");
            if (str[2] == "让球") {
              if (str[0] == "全场") {
                if (str[1] == "主队") {
                  lelBall.a = { type: this.home_team, data: data[index] };
                } else if (str[1] == "客队") {
                  lelBall.b = { type: this.guest_team, data: data[index] };
                }
                objA[0] = { title: "角球:让球", val: lelBall };
              } else if (str[0] == "上半场") {
                if (str[1] == "主队") {
                  lelBall1.a = { type: this.home_team, data: data[index] };
                } else if (str[1] == "客队") {
                  lelBall1.b = { type: this.guest_team, data: data[index] };
                }
                objA[1] = { title: "角球:让球-上半场", val: lelBall1 };
              }
            } else if (str[2] == "大小") {
              if (str[0] == "全场") {
                if (str[1] == "主队") {
                  sizeA.a = data[index];
                  // { type: "大", data: data[index] };
                } else if (str[1] == "客队") {
                  sizeA.b = data[index];
                  // { type: "小", data: data[index] };
                }
                objB[0] = { title: "角球:进球大小", data: sizeA };
              } else if (str[0] == "上半场") {
                if (str[1] == "主队") {
                  sizeB.a = data[index];
                  //{ type: "大", data: data[index] };
                } else if (str[1] == "客队") {
                  sizeB.b = data[index];
                  //{ type: "小", data: data[index] };
                }
                objB[1] = { title: "角球:进球大小-上半场", data: sizeB };
              }
            } else if (str[2] == "独赢") {
              console.log("独赢");
              if (str[0] == "全场") {
                if (str[1] == "主队") {
                  singleA.a = { type: this.home_team, data: data[index][0] };
                } else if (str[1] == "客队") {
                  singleA.b = { type: this.guest_team, data: data[index][0] };
                } else if (str[1] == "主客平") {
                  singleA.c = { type: "和局", data: data[index][0] };
                }
                objC[0] = { title: "角球:独赢", data: singleA };
              } else if (str[0] == "上半场") {
                if (str[1] == "主队") {
                  singleB.a = { type: this.home_team, data: data[index][0] };
                } else if (str[1] == "客队") {
                  singleB.b = { type: this.guest_team, data: data[index][0] };
                } else if (str[1] == "主客平") {
                  singleB.c = { type: "和局", data: data[index][0] };
                }
                objC[1] = { title: "角球:独赢-上半场", data: singleB };
              }
            } else if (str[2] == "单双") {
              if (str[0] == "全场") {
                if (str[1] == "单") {
                  sinA.a = { type: "单", data: data[index][0] };
                } else if (str[1] == "双") {
                  sinA.b = { type: "双", data: data[index][0] };
                }
                objD[0] = { title: "角球:进球单双", sinA };
              } else if (str[0] == "上半场") {
                if (str[1] == "单") {
                  sinB.a = { type: "单", data: data[index][0] };
                } else if (str[1] == "双") {
                  sinB.b = { type: "双", data: data[index][0] };
                }
                objD[1] = { title: "角球:进球单双-上半场", sinB };
              }
            }
          });
        }
      });
      if (objA.length > 0) {
        if (objA[1]) {
          this.data.push(objA[0]);
          this.data.push(objA[1]);
        } else {
          this.data.push(objA[0]);
        }
      }
      if (objB.length > 0) {
        if (objB[1]) {
          this.data.push(objB[0]);
          this.data.push(objB[1]);
        } else {
          this.data.push(objB[0]);
        }
      }
      if (objC.length > 0) {
        if (objC[1]) {
          this.data.push(objC[0]);
          this.data.push(objC[1]);
        } else {
          this.data.push(objC[0]);
        }
      }
      if (objD.length > 0) {
        if (objD[1]) {
          this.data.push(objD[0]);
          this.data.push(objD[1]);
        } else {
          this.data.push(objD[0]);
        }
      }
      //console.log(this.data);
    }
  }
};
</script>

<style scoped>
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.5rem;
  height: 0.5rem;
  background: url(../assets/st-imges/xiangxia.png) no-repeat;
  background-size: 100% 100%;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title {
  height: 0.88rem;
  font-size: 0.32rem;
  color: #333;
  background: #f8f8f8;
}
div /deep/ .yd-accordion-head {
  padding: 0 0.32rem;
}
.rowBox {
  padding: 0 0.32rem;
  background: #f0f0f0;
  border-bottom: 1px solid #e4e4e4;
}
.width-box {
  width: 50%;
}
.right-box{
	padding-right: 0.32rem;
	padding-left: 0.2rem;
	border-bottom: 1px solid #e4e4e4;
}
.left-box{
	padding-left: 0.32rem;
	border-bottom: 1px solid #e4e4e4;
}
.btn-box {
  width: 1.07rem;
  height: 0.76rem;
  font-size: 0.24rem;
  padding: 0.1rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  margin: 0.1rem;
}
.active {
  background: #f76649;
  padding: 0.1rem;
  border: 2px solid #f76649;
}
.active i {
  color: #f4f4f4 !important;
}
</style>