<template>
  <div class="record">
    <div class="nav">
      <div class="select-view">
        <div
          class="select-box left"
          :class="{
            on:
              type == 1 ||
              type == 2 ||
              type == 4 ||
              type == 5 ||
              type == 6 ||
              type == 7 ||
              type == 8
          }"
        >
          <span class="text" @click="gameType()">{{ typetext }}</span>
          <i class="icon"></i>
          <ul class="animate__animated animate__fadeIn" v-if="showGameType">
            <li
              class="btn"
              :class="{ active: type == 1 }"
              @click="choseType('1', $lang[$Type].Baccarat)"
            >
              {{ $lang[$Type].Baccarat }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 2 }"
              @click="choseType('2', $lang[$Type].DragonTiger)"
            >
              {{ $lang[$Type].DragonTiger }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 4 }"
              @click="choseType('4', $lang[$Type].NN)"
            >
              {{ $lang[$Type].NN }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 5 }"
              @click="choseType('5', $lang[$Type].ThreeCard)"
            >
              {{ $lang[$Type].ThreeCard }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 6 }"
              @click="choseType('6', $lang[$Type].Toning)"
            >
              {{ $lang[$Type].Toning }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 7 }"
              @click="choseType('7', $lang[$Type].Dice)"
            >
              {{ $lang[$Type].Dice }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 8 }"
              @click="choseType('8', $lang[$Type].roulette)"
            >
              {{ $lang[$Type].roulette }}
            </li>
          </ul>
        </div>
        <div
          class="select-box right"
          :class="{ on: type == 10 || type == 11 || type == 12 }"
        >
          <span class="text" @click="capitalType()">{{ capitaltext }}</span>
          <i class="icon"></i>
          <ul class="animate__animated animate__fadeIn" v-if="showCapitalType">
            <li
              class="btn"
              :class="{ active: type == 10 }"
              @click="choseType('10', $lang[$Type].Upperrecord)"
            >
              {{ $lang[$Type].Upperrecord }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 11 }"
              @click="choseType('11', $lang[$Type].Subrecord)"
            >
              {{ $lang[$Type].Subrecord }}
            </li>
            <li
              class="btn"
              :class="{ active: type == 12 }"
              @click="choseType('12', $lang[$Type].Rewardrecord)"
            >
              {{ $lang[$Type].Rewardrecord }}
            </li>
          </ul>
        </div>
      </div>
      <div class="time">
        <span
          class="item btn"
          @click="choseTime(1)"
          :class="{ active: time_interval == 1 }"
        >
          {{ $lang[$Type].Today }}
        </span>
        <span
          class="item btn"
          @click="choseTime(2)"
          :class="{ active: time_interval == 2 }"
        >
          {{ $lang[$Type].Yesterday }}
        </span>
        <span
          class="item btn"
          @click="choseTime(3)"
          :class="{ active: time_interval == 3 }"
        >
          {{ $lang[$Type].Week }}
        </span>
      </div>
    </div>
    <section class="view" @click="offSelect()">
      <div
        class="list-box"
        v-if="
          type == 1 ||
          type == 2 ||
          type == 4 ||
          type == 5 ||
          type == 6 ||
          type == 7 ||
          type == 8
        "
      >
        <table class="hd">
          <tr>
            <td>{{ $lang[$Type].Notenumber }}</td>
            <td>{{ $lang[$Type].Type }}</td>
            <td>{{ $lang[$Type].Result }}</td>
            <td>{{ $lang[$Type].Play }}</td>
            <td>{{ $lang[$Type].Date }}</td>
            <td>{{ $lang[$Type].Beforebalance }}</td>
            <td>{{ $lang[$Type].bet_amount }}</td>
            <td>{{ $lang[$Type].note_win_lose }}</td>
          </tr>
        </table>
        <div class="bd">
          <table>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ item.game_num }}</td>
              <td>{{ item.table_name }}</td>
              <td>{{ item.card_result }}</td>
              <td>
                <span
                  v-if="item.number_is_rob == 1"
                  @click="
                    Details(item.number_tab_id, item.table_name, item.win_total)
                  "
                  class="btn"
                >
                  {{ item.user_bet }}
                </span>
                <span v-else>{{ item.user_bet }}</span>
              </td>

              <td>{{ item.create_time }}</td>
              <td>{{ $fk(item.money_before_bet) }}</td>
              <td>{{ $fk(item.amount) }}</td>
              <td>{{ $fk(item.win_total) }}</td>
            </tr>
          </table>
        </div>
      </div>

      <div v-if="type == 10 || type == 11" class="list-box">
        <table class="hd fadeIn animated0">
          <tr>
            <td>{{ $lang[$Type].Notenumber }}</td>
            <td>{{ $lang[$Type].Type }}</td>
            <td>{{ $lang[$Type].Date }}</td>
            <td>{{ $lang[$Type].Beforebalance }}</td>
            <td>{{ $lang[$Type].bet_amount }}</td>
            <td>{{ $lang[$Type].Transaction }}</td>
          </tr>
        </table>
        <div class="bd">
          <table>
            <tr v-for="item in tableData" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.mode }}</td>
              <td>{{ item.create_time }}</td>
              <td>{{ $fk(item.old_money) }}</td>
              <td>{{ $fk(item.new_money) }}</td>
              <td>{{ $fk(item.amount) }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div v-if="type == 12" class="list-box">
        <table class="hd fadeIn animated0">
          <tr>
            <td>{{ $lang[$Type].Number }}</td>
            <td>{{ $lang[$Type].Rewardamount }}</td>
            <td>{{ $lang[$Type].RewardTab }}</td>
            <td>{{ $lang[$Type].Date }}</td>
          </tr>
        </table>
        <table class="bd">
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ $fk(item.money) }}</td>
            <td>{{ item.table_name }}</td>
            <td>{{ item.create_time }}</td>
          </tr>
        </table>
      </div>
      <div class="ft fadeIn animated0">
        <span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
        <span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
          第{{ page }}页
        </span>

        <span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
        <span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
          第{{ page }}頁
        </span>

        <span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
        <span v-if="$Type == 'en'" class="pagenum">
          Total {{ pagenum }} pages
        </span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'en'">
          Page {{ page }}
        </span>

        <span class="btn" @click="prevPage" v-if="pagenum > 1 && page != 1">
          {{ $lang[$Type].Previous }}
        </span>
        <span
          class="btn"
          @click="nextPage"
          v-if="pagenum > 1 && pagenum != page"
        >
          {{ $lang[$Type].Next }}
        </span>
        <span
          class="alldown"
          v-if="type == 1 || type == 2 || type == 4 || type == 5"
        >
          {{ $lang[$Type].Totalbet }} {{ $fk(alldown) }}
        </span>
        <span
          class="allwin"
          v-if="type == 1 || type == 2 || type == 4 || type == 5"
        >
          {{ $lang[$Type].TotalWin }} {{ $fk(returnFloat(allwin)) }}
        </span>
        <span class="allwin" v-if="type == 10">
          {{ $lang[$Type].Upperscore }} {{ $fk(recharge_amount) }}
        </span>
        <span class="allwin" v-if="type == 11">
          {{ $lang[$Type].Subordinate }} {{ $fk(recharge_amount) }}
        </span>
        <span class="allwin" v-if="type == 12">
          {{ $lang[$Type].Pagerewarded }} {{ $fk(recharge_amount) }}
        </span>
      </div>
    </section>
    <section class="rob-view view" v-if="showRob">
      <div class="list-box">
        <div class="title">
          <small class="btn" @click="backRecord()">
            {{ $lang[$Type].Back }}
          </small>
          {{ robTitle }}
        </div>
        <table class="hd">
          <tr>
            <td>{{ $lang[$Type].UserName }}</td>
            <td>{{ $lang[$Type].Type }}</td>
            <td>{{ $lang[$Type].ThisResults }}</td>
            <td>{{ $lang[$Type].Betamount }}</td>
            <td>{{ $lang[$Type].msg_win_lose }}</td>
            <td>{{ $lang[$Type].Date }}</td>
          </tr>
        </table>
        <div class="bd">
          <table>
            <tr v-for="(item, index) in robData" :key="index">
              <td>{{ item.username }}</td>
              <!-- <td>{{item.table_name}}</td> -->
              <td>{{ item.user_bet }}</td>
              <td>{{ item.card_result }}</td>
              <td>{{ $fk(item.amount) }}</td>
              <td>{{ $fk(item.win_total) }}</td>
              <td>{{ item.create_time }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="ft fadeIn animated0">
        <span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
        <span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
          第{{ page }}页
        </span>

        <span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
        <span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
          第{{ page }}頁
        </span>

        <span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
        <span v-if="$Type == 'en'" class="pagenum">
          Total {{ pagenum }} pages
        </span>
        <span class="pages" v-if="pagenum != 0 && $Type == 'en'">
          Page {{ page }}
        </span>

        <span
          class="btn"
          @click="robprevPage"
          v-if="robpagenum > 1 && robpage != 1"
        >
          {{ $lang[$Type].Previous }}
        </span>
        <span
          class="btn"
          @click="robnextPage"
          v-if="robpagenum > 1 && robpagenum != page"
        >
          {{ $lang[$Type].Next }}
        </span>
        <span class="alldown">
          {{ $lang[$Type].Totalbet }} {{ $fk(roballdown) }}
        </span>
        <span class="allwin">{{ $lang[$Type].TotalWin }} {{ $fk(roballwin) }}</span>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { showToast, showLoadingToast, closeToast } from "vant"
import { getUserBets, getRobBet, tipRecord, rechargeRecord } from "@/utils/api"
export default {
  name: "RecordView",
  data() {
    return {
      frist: true,
      showGameType: false,
      showCapitalType: false,
      num: 0,
      pagenum: 0,
      page: 1,
      alldown: 0,
      allwin: 0,
      recharge_amount: 0,
      time_interval: 1,
      tableData: [],

      type: 1,
      // typetext:this.$lang[this.$Type].Baccarat||'',
      // capitaltext:this.$lang[this.$Type].Fundrecord||'',
      typetext: "",
      capitaltext: "",

      showRob: false,
      robTitle: "",
      robData: [],
      robnum: 0,
      robpagenum: 0,
      roballdown: 0,
      roballwin: 0,
      robpage: 1,

      rob_number_tab_id: 0,
      rob_title: "",
      rob_win_total: 0
    }
  },
  methods: {
    returnFloat(num) {
      let value = Math.round(parseFloat(num) * 100) / 100
      let xsd = value.toString().split(".")
      if (xsd.length == 1) {
        value = value.toString() + ".00"
        return value
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + "0"
        }
        return value
      }
    },
    gameType() {
      this.showGameType = !this.showGameType
      this.showCapitalType = false
    },
    capitalType() {
      this.showCapitalType = !this.showCapitalType
      this.showGameType = false
    },
    offSelect() {
      if (this.showGameType) {
        this.showGameType = false
      }
      if (this.showCapitalType) {
        this.showCapitalType = false
      }
    },
    choseTime(type) {
      this.time_interval = type
      this.page = 1
      this.getData(this.type)
    },
    choseType(type, text) {
      this.page = 1
      if (type <= 7) {
        this.typetext = text
        this.capitaltext = this.$lang[this.$Type].Betrecord
        this.showGameType = false
        this.getData(type)
      } else {
        if (this.userInfo.is_sw != 1) {
          this.capitaltext = text
          this.typetext = this.$lang[this.$Type].Gamerecord
          this.showCapitalType = false
          this.getData(type)
        } else {
          showToast(this.$lang[this.$Type].Not_power)
        }
      }
    },
    getData(type) {
      this.type = type
      if (this.type != 10 && this.type != 11 && this.type != 12) {
        // 游戏记录
        const params = {
          user_id: this.userInfo.id,
          api_token: this.userInfo.api_token,
          game_id: this.type,
          page: this.page,
          time_interval: this.time_interval
        }
        showLoadingToast({
          message: "加载中...",
          forbidClick: true
        })
        getUserBets(params)
          .then((response) => {
            if (response.Success == 1) {
              const data = response.Data
              this.tableData = data.bet_info
              this.num = data.bet_num
              this.pagenum = data.page_num
              this.alldown = data.bet_list_amount
              this.allwin = data.bet_list_wintotal
            } else {
              console.log(response)
            }
          })
          .catch((error) => {
            console.log(error)
          })
          .finally(() => {
            closeToast()
          })
      } else if (this.type == 12) {
        // 打赏记录
        const params = {
          user_id: this.userInfo.id,
          api_token: this.userInfo.api_token,
          page: this.page,
          time_interval: this.time_interval
        }
        tipRecord(params)
          .then((response) => {
            if (response.Success == 1) {
              const data = response.Data
              this.tableData = data.tip
              this.num = data.tip_num
              this.pagenum = data.page_num
              this.recharge_amount = data.tip_amount
              // console.log(data)
            } else {
              // console.log(data)
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        // 上下分记录
        let mode = 1
        if (this.type == 10) {
          mode = 1
        } else if (this.type == 11) {
          mode = 2
        }
        const params = {
          user_id: this.userInfo.id,
          api_token: this.userInfo.api_token,
          page: this.page,
          mode: mode,
          time_interval: this.time_interval
        }
        rechargeRecord(params)
          .then((response) => {
            if (response.Success == 1) {
              const data = response.Data
              this.tableData = data.recharge
              this.num = data.recharge_num
              this.pagenum = data.page_num
              this.recharge_amount = data.recharge_amount
            } else {
              // console.log(data)
            }
          })
          .catch((error) => {
            console.log(error)
          })
      }
    },
    // 查看庄详情
    Details(number_tab_id, title, win_total) {
      this.rob_number_tab_id = number_tab_id
      this.rob_title = title
      this.rob_win_total = win_total

      const params = {
        user_id: this.userInfo.id,
        api_token: this.userInfo.api_token,
        game_id: this.type,
        page: this.robpage,
        number_tab_id: number_tab_id
      }
      if (win_total != 0) {
        getRobBet(params)
          .then((response) => {
            if (response.Success == 1) {
              const data = response.Data
              // console.log(data)
              this.showRob = true
              this.robTitle = title
              this.robData = data.bet_info
              this.robnum = data.bet_num
              this.robpagenum = data.page_num
              this.roballdown = data.bet_list_amount
              this.roballwin = data.bet_list_wintotal
            } else {
              // console.log(data)
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        showToast(this.$lang[this.$Type].Not_bet)
      }
    },
    backRecord() {
      this.showRob = false
    },

    prevPage() {
      this.page = this.page - 1
      this.getData(this.type)
    },
    nextPage() {
      this.page = this.page + 1
      this.getData(this.type)
    },

    robprevPage() {
      this.robpage = this.robpage - 1
      this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
    },
    robnextPage() {
      this.robpage = this.robpage + 1
      this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
    },

    goback() {
      this.$router.go(-1)
    }
  },
  computed: {
    ...mapState({
      $Type: (state) => state.config.$Type,
      $lang: (state) => state.config.$lang,
      userInfo: (state) => state.app.userInfo
    })
  },
  watch: {
    userInfo: {
      handler: function (newData) {
        if (newData.api_token) {
          this.getData(1)
          this.typetext = this.$lang[this.$Type].Baccarat
          this.capitaltext = this.$lang[this.$Type].Fundrecord
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.record {
  width: 100%;
  height: 100%;
  overflow: hidden;
  input {
    border: none;
  }
}
.record .nav {
  color: #ddd;
  width: 100%;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 90;
}
.record .select-view {
  display: flex;
  border-radius: 100rem;
  box-shadow: 0 0 2px #cba552;
  margin-left: 0.2rem;
}
.record .nav .select-box {
  background: #2b2e31;
  width: 2.8rem;
  text-align: center;
  position: relative;
  z-index: 888;
  transform: rotateX(0deg);
}
.record .nav .select-box.on {
  color: #000;
  background-color: #baa277;
  background-image: linear-gradient(
    180deg,
    #baa277 0%,
    #f0d199 50%,
    #8b5e25 100%
  );
}

.record .nav .select-box.left {
  border-top-left-radius: 100rem;
  border-bottom-left-radius: 100rem;
}
.record .nav .select-box.right {
  border-bottom-right-radius: 100rem;
  border-top-right-radius: 100rem;
}

.record .select-box .text {
  background: none;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 0.4rem;
  padding: 0.2rem 0;
  padding-right: 0.6rem;
  font-weight: bold;
  box-sizing: border-box;
  line-height: 1.5;
}

.record .select-box .icon {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  margin-top: -0.1rem;
  width: 0;
  height: 0;
  border-left: 0.15rem solid transparent;
  border-right: 0.15rem solid transparent;
  border-top: 0.2rem solid #fff;
}

.record .select-box.on .icon {
  border-top-color: #000;
}

.record .nav ul {
  position: absolute;
  width: 100%;
  background: #000;
  z-index: 99;
  left: 0;
  border-radius: 2px;
  box-shadow: 0 0 3px #060606;
  top: 0.9rem;
  transform: rotateX(0deg);
}
.record .nav li {
  font-size: 0.4rem;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 0.2rem 0;
  color: #fff;
  box-sizing: border-box;
  transition: 0.3s all;
}
.record .nav .btn.active {
  color: #efcd69;
  border: 1px solid #efcd69;
}
.record .nav .time {
  margin-right: 2rem;
  display: flex;
  align-items: center;
}
.record .nav .time .item {
  font-size: 0.4rem;
  padding: 0.2rem 0.4rem;
  font-weight: bold;
  border-radius: 100rem;
  background-color: #4385cd;
  background-image: linear-gradient(
    180deg,
    #4385cd 0%,
    #3b7bbe 50%,
    #1b4e7d 100%
  );
  line-height: 1.5;
  box-sizing: border-box;
}

.record .nav .time .item:nth-of-type(2) {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}

.record .nav .time .item.active {
  background-color: #baa277;
  background-image: linear-gradient(
    180deg,
    #baa277 0%,
    #f0d199 50%,
    #8b5e25 100%
  );
  color: #000;
}

.record .view {
  height: calc(100% - 2.4rem);
  width: 100%;
  position: relative;
  overflow-y: auto;
}
.record .view .hd {
  font-size: 0.38rem;
  color: #edcf99;
}

.record .view table {
  color: #d8cfa9;
  font-weight: 500;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.record .view .bd tr:first-child td {
  border-top: none;
}

.record .view .bd tr:nth-child(odd) {
  color: #d1cfcc;
  background: #6d5e4a;
  font-size: 0.35rem;
}

.record .view table td {
  padding: 0.05rem 0.2rem;
  height: 32px;
  font-size: 0.35rem;
  color: #d1cfcc;
  text-align: left;
  font-weight: normal;
}
.record .view table td .btn {
  background: #f44336;
  color: #fff;
  border-radius: 2px;
  padding: 2px;
  display: block;
  font-size: 12px;
}

.record .view .list-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.record .view .bd {
  max-height: 100%;
  overflow-y: auto;
}
.record .view .bd table {
  margin-bottom: 2rem;
}

.record .view .ft {
  background: #2b2e31;
  color: #edcf99;
  position: fixed;
  width: 100%;
  text-align: center;
  line-height: 0.8rem;
  height: 0.8rem;
  bottom: 0;
  left: 0;
  right: 0;
  display: table;
  // border-bottom-right-radius: 10px;
  // border-bottom-left-radius: 10px;
  overflow: hidden;
}

.record .view .ft span {
  display: table-cell;
  background: #2b2e31;
  font-size: 0.35rem;
}

.record .rob-view {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 10px;
  z-index: 9;
  /* background: url(../common/images/landscape/record_bg.jpg) repeat-x; */
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}
.record .rob-view .title {
  text-align: center;
  background: #252729;
  color: #edcf99;
  // border-top-right-radius: 10px;
  // border-top-left-radius: 10px;
  border-bottom: 1px solid #453312;
  line-height: 1.2rem;
  font-size: 0.45rem;
  font-weight: bold;
  position: relative;
}
.record .rob-view .title .btn {
  position: absolute;
  left: 0.2rem;
  top: 0;
  padding-left: 0.45rem;
  /* background: url(../common/images/icon/goback_icon.png) left 0.35rem no-repeat; */
  -webkit-background-size: 0.3rem;
  background-size: 0.3rem;
}
</style>
