<template>
  <div>
    <div class="box">
      <div class="row allAlignment center head_on_box">
        <p
          class="logo"
          style="font-size:.6rem;color:#E1E1DF;font-family:  'Franklin Gothic Medium'"
        >
          <i style="color:#F76649;">HX</i>669
        </p>
        <p style="color:#fffffe;font-size:.36rem">投注记录</p>
        <!-- <img class="log" src="../assets/st-imges/indexlogo.png" alt=""> -->
        <div class="row allAlignment center">
          <img class="user-ion" @click="toRouter()" src="@/assets/st-imges/close.png" alt />
          <!-- <div v-if="nameShow" class="row allAlignment center username">
              {{name}}
          </div>-->
          <img
            style="margin-left: 0.44rem;"
            class="user-ion"
            src="@/assets/st-imges/contact.png"
            alt
          />
        </div>
      </div>
    </div>
    <div class="boxIn row item-center">
      <div class="date row center">
        <yd-button-group>
          <yd-button size="large" bgcolor="rgba(0,0,0,0)" @click.native="openStart">{{startTime}}</yd-button>
        </yd-button-group>
      </div>
      <p style="margin:0 .22rem">至</p>
      <div class="date row center">
        <yd-button-group>
          <yd-button size="large" bgcolor="rgba(0,0,0,0)" @click.native="openEnd">
            <div>{{endTime}}</div>
          </yd-button>
        </yd-button-group>
      </div>
      <button class="dateBtn" @click="reset()">查询</button>
    </div>
    <div
      class="row center average betting-btn"
      style="height:.88rem;background:#f4f4f4;margin:.1rem 0;"
    >
      <button
        :class="recordConditions==1?'active':''"
        style=" border-radius: .05rem;"
        @click="recordCode(1)"
      >单式投注记录</button>
      <button
        :class="recordConditions==2?'active':''"
        style=" border-radius: .05rem;"
        @click="recordCode(2)"
      >串式投注记录</button>
    </div>
    <div class="row classify average">
      <div
        v-for="(item,index) in table"
        :class="index==classifynum?'classifyactive':''"
        :key="index"
        @click="classifyclick(index,item.id)"
      >{{item.title}}</div>
    </div>
    <div>
      <div class="datalist">
        <yd-infinitescroll :callback="loadList" :distance="200" ref="infinitescrollDemo">
          <yd-list theme="5" slot="list">
            <yd-list-item v-for="(item,index) in list" :key="index">
              <yd-list-other slot="other">
                <div
                  v-if="recordConditions==1"
                  style="width:100%;padding:0 .2rem;"
                  class="list-box"
                >
                  <div style="margin-bottom:.1rem;">
                     <div>
                       <span>[{{item.game_code == 'zq'? '足球':item.game_code == 'lq'? '篮球':item.game_code == 'wq'? '网球':'棒球'}}]</span> 
                       <span>{{item.home_team}}vs{{item.guest_team}}</span>
                     </div>
                     <div class="row average center">
                      <div style="width:56%;">
                        <p>{{item.odds_name}}</p>
                        <!-- {{item.odds_name.slice(item.odds_name.lastIndexOf('|')+1)}}&emsp; -->
                        <p>{{(item.odds_name.slice(item.odds_name.lastIndexOf('|')+1)=='独赢'?item.condition=='1'?'主队':item.condition=='2'?'客队':'和局':item.condition)+'@' + item.odds}}</p>
                        <p>投注额：{{item.bet_money}}</p>
                      </div>
                      <div style="width:44%;">
                        <p> 赢/输：<span style="color:red">{{item.winMoney==0?'无':item.winMoney}}</span></p>
                        <p>可赢额：{{item.willMoney}}</p>
                        <div class="row">
                          <!-- <p
                            class="row center"
                            :class="item.addBet!=1?'bg':''"
                            :style="item.addBet==1?'background:#f76649;':'background:#aaa;'"
                            style="width:1rem;height:.4rem;border-radius: .25rem;color:#f4f4f4;margin-top:.1rem;"
                          >加注</p>-->
                          <div
                            class="row center"
                            @click="detailsShow(index)"
                            style="width:1rem;height:.4rem;border-radius: .25rem;color:#f4f4f4;background:#aaa;font-size:.5rem;"
                          >
                            <img
                              v-if="details!=index"
                              style="width:.25rem;height:.25rem;"
                              src="@/assets/st-imges/jia.png"
                            />
                            <img
                              v-if="details==index"
                              style="width:.3rem;height:.3rem;"
                              src="@/assets/st-imges/jian.png"
                            />
                          </div>
                        </div>
                      </div>
                     </div>
                  </div>
                  <div
                    v-show="details === index"
                    style="width:100%;height:min-2rem;border-top:.01rem solid #aaa;padding-top:.1rem;"
                  >
                    <div>
                      <span>{{item.lg_name}}</span>
                    </div>
                    <div class="row item-center">
                      <span>投注时间：</span>
                      <span>{{item.ctime}}</span>
                    </div>
                    <div>
                      <span>订单号：</span>
                      <span>{{item.order_id}}</span>
                    </div>
                    <div>
                      <span>赛果：</span>
                      <span style="color:red">{{item.matchresult==''?'无':item.matchresult}}</span>
                    </div>
                    <div class="row item-center">
                      <span>描述：{{item.use_mark}}</span>
                      <span></span>
                    </div>
                  </div>
                </div>
                <div v-if="recordConditions==2" style="width:100%;">
                  <div class="list-box row average center">
                    <div style="width:100%;" >
                      <div  style="height:1rem;background:#a0a0a0a8;color:#e0643efc;padding:0.1rem .2rem;"
                      >
                        <span>订单号：{{item.order_id}}</span>
                        <div class=" row  allAlignment center">
                          <span>投注额：{{item.money}}</span>
                          <span>可赢额：{{item.prize_money}}</span>
                          <span>输/赢：{{item.game_status == 0 ? "待开奖":item.game_status == 1 ? "赢":item.game_status == 2 ? "未开奖":"输" }}</span>
                        </div>
                      </div>
                      <div v-for="(items,i) in item.money_buy":key="i"
                        style="width:100%;margin-bottom:.2rem;padding:.1rem .2rem;background:#fff;border-radius: .08rem"
                      >
                        <div>
                          <span>{{items.game_code == 'zq'? '足球':items.game_code == 'lq'? '篮球':items.game_code == 'wq'? '网球':'棒球'}}</span> 
                          <span>{{items.home_team}}vs{{items.guest_team}}</span>
                        </div>
                        <div style="margin-bottom: 0.1rem;" class="row average center">
                          <div style="width:50%;">
                            <p style="margin-top: 0.1rem;">{{items.odds_name}}</p>
                            <p style="margin-top: 0.1rem;">{{(items.odds_name.slice(items.odds_name.lastIndexOf('|')+1)=='独赢'?items.condition=='1'?'主队':items.condition=='2'?'客队':'和局':items.condition)+'@' + items.odds}}</p>
                            <!-- <p>投注额：{{items.bet_money}}</p> -->
                          </div>
                          <div style="width:50%;" class="list-txt">
                            <p style="margin-top: 0.1rem;">输/赢：
                              <span style="color:red" >{{items.matchresult==0?'无':items.status==1?'赢':'输'}}</span>
                            </p>
                            <div style="margin-top: 0.1rem;" class="row">
                              <!-- <p
                                class="row center"
                                :class="items.addBet!=1?'bg':''"
                                :style="items.addBet==1?'background:#f76649;':'background:#aaa;'"
                                style="width:1rem;height:.4rem;border-radius: .25rem;color:#f4f4f4;margin-top:.1rem;"
                              >加注</p> -->
                              <div  class="row center"  @click="oddShow(index,i)"  
                              style="width:1rem;height:.4rem;border-radius: .25rem;color:#f4f4f4;background:#aaa;font-size:.5rem;">
                                <img v-if="!items.istrue" style="width:.25rem;height:.25rem;"
                                  src="@/assets/st-imges/jia.png"/>
                                <img  v-if="items.istrue" style="width:.3rem;height:.3rem;"
                                  src="@/assets/st-imges/jian.png"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          v-if="items.istrue"
                          style="width:100%;height:min-2rem;border-top:.01rem solid #aaa;padding-top:.2rem;"
                        >
                          <div>来源：{{items.is_rolling == 1 ? '滚球' :items.is_rolling == 2 ?'即将' :items.is_rolling == 3 ? '今日' :items.is_rolling == 4 ?'早盘' :items.is_rolling == 5 ? '串场' :items.is_rolling == 6 ? '冠军':'其他'}}</div>
                          <div class="row item-center">
                            <span>投注时间：</span>
                            <span>{{item.money_time}}</span>
                          </div>
                          <!-- <div class="row item-center">
                            <span>开赛时间：{{items.match_date}}&emsp;{{items.match_time}}</span>
                            <span></span>
                          </div> -->
                          <!-- <div>
                            <span>号：</span>
                            <span>{{items.batch_id}}</span>
                          </div> -->
                          <div>
                            <span>赛果：</span>
                            <span style="color:red">{{items.matchresult==''?'无':items.matchresult}}</span>
                          </div>
                          <div class="row item-center">
                            <span>描述：{{items.use_mark}}</span>
                            <span></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>  
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-infinitescroll>
      </div>
    </div>
    <yd-cell-group style="display:none;">
      <yd-cell-item arrow>
        <yd-datetime
          type="date"
          ref="datetimeStart"
          :end-date="endTime"
          slot="right"
          v-model="startTime"
        ></yd-datetime>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group style="display:none;">
      <yd-cell-item arrow>
        <yd-datetime
          type="date"
          ref="datetimeEnd"
          :start-date="startTime"
          :end-date="date"
          slot="right"
          v-model="endTime"
        ></yd-datetime>
      </yd-cell-item>
    </yd-cell-group>
  </div>
</template>
<script>
import "@/css/index.css";
export default {
  name: "BettingRecord",
  data() {
    return {
      img: require("@/assets/st-imges/date.png"),
      img1: require("@/assets/st-imges/home.png"),
      img2: require("@/assets/st-imges/gengduo-1.png"),
      active: 0,
      list: "",
      // 当前时间 同时也是日历结束时间
      date: "",
      // 日历开始时间
      startDate: "",
      //   查询开始时间
      startTime: "",
      //   查询结束时间
      endTime: "",
      recordConditions: 1,
      table: [
        { title: "未结算", id: 1 },
        { title: "已结算", id: 2 },
        { title: "无效", id: -1 }
      ],
      classifynum: 0,
      set_status:1,
      // 分页开始页
      page: 1,
      // 分页数据条数
      pageSize: 10,
      timers: true,
      details: 99999
    };
  },
  methods: {
    oddShow(index, odd) {
      this.list.forEach(e => {
        if (e.money_buy) {
          e.money_buy.forEach(a => {
            this.$set(a, "istrue", a.istrue ? true : false);
          });
        }
      });
      this.$set(
        this.list[index].money_buy[odd],
        "istrue",
        this.list[index].money_buy[odd].istrue ? false : true
      );
      this.$forceUpdate();
    },
    detailsShow(num) {
      if (this.details == num) {
        this.details = 99999;
      } else {
        this.details = num;
      }
    },
    //判断登录是否过期
    getuserData() {
      if (localStorage.getItem("token")) {
        this.$http
          .post(this.$ports.login.getAgent, {
            token: localStorage.getItem("token")
          })
          .then(res => {
            if (res.data.status == -4001) {
              this.$store.dispatch("SET_TOKEN", "");
              this.$store.dispatch("GET_ISSHOW", false);
              this.$dialog.toast({
                mes: "对不起您的登录已过期，请您重新登录",
                timeout: 3000
              });
              this.$router.push("/");
            }
          });
      }
    },
    reset() {
      this.list = "";
      this.page = 1;
      // 重置下拉加载
      this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
      this.loadList();
    },
    //投注类型查询
    recordCode(num) {
      this.recordConditions = num;
      this.reset();
    },
    // 导航
    toRouter() {
      this.$router.go(-2);
    },
    // 初始化时间
    initialTime() {
      // 现在的时间
      let date = new Date();
      //  日历开始时间
      let date2 = new Date(date);
      date2.setMonth(date.getMonth() - 3);
      this.startDate = `${date2.getFullYear()}-${
        date2.getMonth() + 1 < 10
          ? "0" + (date2.getMonth() + 1)
          : date2.getMonth() + 1
      }-${date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate()}`;
      this.date = `${date.getFullYear()}-${
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
      //  查询结束时间
      this.endTime = `${date.getFullYear()}-${
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
      this.startTime = `${date.getFullYear()}-${
        date.getMonth() - 2 < 10
          ? "0" + (date.getMonth() - 2)
          : date.getMonth() - 2
      }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
      // console.log(this.startDate);
      // console.log(this.endTime, "bbb");
      // console.log(this.startTime, "cccc");
    },
    // 发送请求
    loadList() {
      // 补全时间
      let date = new Date();
      let hours = date.getHours();
      let min = date.getMinutes();
      let sec = date.getSeconds();
      this.$http
        .post(this.$ports.login.bettingRecord, {
          currentPage: this.page,
          pageSize: this.pageSize,
          startTime: this.startTime + " 00:00:00",
          endTime:
            this.endTime +
            " " +
            (hours < 10 ? "0" + hours : hours) +
            ":" +
            (min < 10 ? "0" + min : min) +
            ":" +
            (sec < 10 ? "0" + sec : sec),
          set_status: this.set_status,
          token: localStorage.getItem("token"),
          type: this.recordConditions
        })
        .then(res => {
          // console.log(res);
          /* 单次请求数据完毕 */
          if (res.data.data) {
            let table = res.data.data.list;
            table.forEach(e => {
              if(this.recordConditions == 1){
                if(e.odds_name.indexOf('主队') != -1){
                  e.odds_name =  e.odds_name.replace(/主队/g,`主队(${e.home_team})`);
                }else if(e.odds_name.indexOf('客队') != -1){
                  e.odds_name = e.odds_name.replace(/客队/g,`客队(${e.guest_team})`);
                }
              }else if(this.recordConditions == 2){
                e.money_buy.forEach(data =>{
                  if(data.odds_name.indexOf('主队') != -1){
                    data.odds_name =  data.odds_name.replace(/主队/g,`主队(${data.home_team})`);
                  }else if(data.odds_name.indexOf('客队') != -1){
                    data.odds_name = data.odds_name.replace(/客队/g,`客队(${data.guest_team})`);
                  }
                })
              }
            });
            this.list = [...this.list, ...table];
            // console.log(this.list, "我的");
            if (res.data.data.list.length < 10) {
              this.$dialog.toast({ mes: "当前已经没有记录", timeout: 1500 });
              /* 所有数据加载完毕 */
              this.$refs.infinitescrollDemo.$emit(
                "ydui.infinitescroll.loadedDone"
              );
              return;
            } else {
              /* 单次请求数据完毕 */
              this.$refs.infinitescrollDemo.$emit(
                "ydui.infinitescroll.finishLoad"
              );
              this.page++;
            }
          }
        });
    },
    // 点击待开奖，中奖未中奖
    classifyclick(index,id) {
      this.classifynum = index;
      this.set_status = id;
      this.reset();
    },
    // 日历开关
    openStart() {
      this.$refs.datetimeStart.open();
    },
    openEnd() {
      this.$refs.datetimeEnd.open();
    }
  },
  mounted() {
    this.initialTime();
    this.reset();
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getuserData();
      } else {
        clearInterval(timing);
      }
    }, 1000 * 60);
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>
<style  scoped>
div /deep/ .yd-list-img {
  display: none;
}
.list-txt p {
  height: 100%;
}
.list-txt {
}
.bg {
  background: #f76649;
}
.yd-list {
  background: rgba(0, 0, 0, 0);
  padding: 0;
}
.list-box {
  width: 100%;
  min-height: 2rem;
  font-size: 0.26rem;
  background: #f8f8f8;
  margin-bottom: 0.1rem;
  margin: 0 auto;
}
.yd-btn-block {
  height: 100%;
  width: 100%;
}
.dateBtn {
  width: 0.94rem;
  height: 0.6rem;
  border: none;
  border-radius: 0.08rem;
  background-image: linear-gradient(7deg, #565656 0%, #999999 100%),
    linear-gradient(#4a4949, #4a4949);
  color: #ffffff;
  margin-left: 0.22rem;
}
.boxIn {
  background: #e4e4e4;
  height: 0.88rem;
  padding: 0 0.32rem;
}
.betting-btn button {
  height: 0.6rem;
  border: none;
  width: 2rem;
  background: #a0a0a0;
  color: #dcdcdc;
}
.betting-btn button.active {
  background: #dcdcdc;
  color: #363636 !important;
}
.listbox p {
  width: 5rem;
  height: 0.45rem;
}
.paging {
  width: 100%;
  height: 0.88rem;
  position: absolute;
  bottom: 0;
}
.paging p {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.05rem;
  border-radius: 0.08rem;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #363636;
}
.paging p input {
  width: 0.6rem;
  height: 0.6rem;
  background: #ebebeb;
  border: 2px solid #ccc;
  border-radius: 0.08rem;
}
.paging p button {
  width: 0.6rem;
  height: 0.6rem;
  border: none;
  background: #555;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.08rem;
}
.paging p button:active {
  background: rgb(126, 125, 125);
  color: #ccc;
}
.datalistbox {
  height: 2.2rem;
  margin-top: 0.3rem;
  background: #efefef;
  padding: 0.2rem 0.3rem;
  font-size: 0.28rem;
  color: #555555;
  line-height: 0.4rem;
}
.datalist {
  position: relative;
}
.datalistlet {
  background-color: #cccccc;
}
.datalist .active {
  background: #f76649 !important;
  color: #efefef !important;
}
.msg {
  height: 0.88rem;
  margin-top: 0.3rem;
  color: #ccc;
  background: #333;
}
.classifyactive {
  color: #f76649;

  border-bottom: 2px solid #f76649;
}
.classify {
  height: 0.88rem;
  font-size: 0.3rem;
  line-height: 0.66rem;
  font-weight: normal;
  color: #777777;
  background-color: #efefef;
  padding: 0.1rem 0;
}
.active {
  color: rgb(247, 102, 73) !important;
}
.box {
  background: #ebebeb;
  padding-left: 0.14rem;
}
.date {
  width: 2.5rem;
  height: 0.6rem;
  border-radius: 0.25rem;
  background: #ccc;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
}
#NavSlide nav {
  padding-top: 0.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
div /deep/ .yd-datetime-content,
div /deep/ .yd-datetime-shade,
div /deep/ .yd-datetime-indicator {
  height: 2rem !important;
}
div /deep/ .yd-button {
  padding: 0;
  width: 100%;
  height: 100%;
}
div /deep/ .yd-button button {
  margin: 0;
  border-radius: 0;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.1rem;
  color: #b8b8b8;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}

.head_on_box {
  padding: 0 0.32rem;
}
.box {
  height: 0.88rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
  overflow: hidden;
}
.user-ion {
  width: 0.3rem;
  height: 0.3rem;
}
#NavSlide p {
  width: 1.1rem;
}
</style>

