<template>
  <view class="game">
    <u-navbar
      leftIconColor="#eee"
      bgColor="#0c0c0d"
      :placeholder="true"
      :fixed="true"
      height="60"
      @leftClick="back"
    >
      <view class="nav" slot="center" @tap="show = true">
        <text>{{ active.name }}</text>
        <u-icon
          class="icon"
          name="arrow-down-fill"
          color="#959393"
          size="13"
        ></u-icon>
      </view>
      <view class="data-btn" slot="right">
        <u-icon
          v-if="active.game_id == 100"
          @tap="showDate = true"
          name="calendar"
          color="#eee"
          size="28"
        ></u-icon>
        <text v-else class="rigt-text">{{ $lang.weekRecord }}</text>
      </view>
    </u-navbar>
    <view class="item" v-for="(item, index) in list" :key="index">
      <template v-if="active.game_id == 100">
        <view class="box"> {{ $lang.gameName }}： {{ item.GameName }} </view>
        <view class="box">{{ $lang.roomNo }}： {{ item.ChildGameID }}</view>
        <view class="box">{{ $lang.totalBetting }}： {{ item.AllBet }}</view>
        <view class="box">{{ $lang.winLose }}： {{ item.ValidBet }}</view>
        <view class="box" v-if="item.Tax > 0"
          >{{ $lang.taxation }}： {{ item.Tax }}</view
        >
        <view class="box"> {{ $lang.date }}： {{ item.createTime }}</view>
      </template>
      <template v-else>
        <view class="box">
          {{ $lang.tableNumber }}： {{ item.table_name }}
        </view>
        <view class="box">{{ $lang.playingMethod }}： {{ item.user_bet }}</view>
        <view class="box" v-if="item.ximaliang"
          >{{ $lang.ximaliang }}： {{ item.ximaliang }}</view
        >
        <view class="box" v-if="item.maliang"
          >{{ $lang.maliang }}： {{ item.maliang }}</view
        >
        <view class="box">{{ $lang.result }}： {{ item.card_result }}</view>
        <view class="box">{{ $lang.winLose }}： {{ item.win_total }}</view>
        <view class="box">{{ $lang.date }}： {{ item.create_time }}</view>
      </template>
    </view>
    <u-empty
      :show="status == 'nomore' && list.length == 0"
      text=" "
      marginTop="20%"
      icon="https://cdn.uviewui.com/uview/empty/data.png"
    >
    </u-empty>
    <u-loadmore :status="status" />
    <view class="ft" v-if="active.game_id != 100">
      <view class="text"> {{ $lang.common }}{{ num }}{{ $lang.strip }}</view>
      <view class="text"> {{ $lang.totalBetting }} {{ alldown }} </view>
      <view class="text"> {{ $lang.totalWin }} {{ allwin }} </view>
    </view>
    <view class="mb60"></view>
    <l-calendar
      v-model="showDate"
      @change="changeDate"
      :isRange="true"
      :maxDate="today"
      :initStartDate="startTime"
      :initEndDate="endTime"
    ></l-calendar>
    <u-picker
      :title="$lang.gameType"
      closeOnClickOverlay
      :show="show"
      :columns="$lang.gameList"
      :cancelText="$lang.cancel"
      :confirmText="$lang.confirm"
      keyName="name"
      @close="show = false"
      @cancel="show = false"
      @confirm="chooseNav"
    ></u-picker>
  </view>
</template>

<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
export default {
  data() {
    return {
      status: "loadmore",
      list: [],
      page: 1,
      num: 0,
      pagenum: 0,
      alldown: 0,
      allwin: 0,
      show: false,
      showDate: false,
      today: dayjs().format("YYYY-MM-D"),
      startTime: dayjs().subtract(3, "day").format("YYYY-MM-D"),
      endTime: dayjs().format("YYYY-MM-D"),
      active: {},
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    this.active = this.$lang.gameList[0][0];
    console.log(this.$lang.gameList);
    this.getData("refresh");
  },
  onReachBottom() {
    if (this.status != "nomore") {
      this.getData("loading");
    }
  },
  methods: {
    chooseNav(nav) {
      this.active = nav.value[0];
      this.show = false;
      this.getData("refresh");
    },
    changeDate(date) {
      this.startTime = date.startDate;
      this.endTime = date.endDate;
      this.getData("refresh");
    },
    getData(type) {
      if (type == "refresh") {
        this.list = [];
        this.page = 1;
      } else {
        this.page += 1;
      }
      this.status = "loading";
      if (this.active.game_id == 100) {
        this.getGamelog();
      } else {
        this.getUserBets();
      }
    },
    getUserBets() {
      const params = {
        user_id: this.userInfo.id,
        api_token: this.userInfo.api_token,
        game_id: this.active.game_id,
        page: this.page,
        time_interval: 3,
      };
      this.$api
        .getUserBets(params)
        .then((res) => {
          let list = [];
          if (res.Success == 1) {
            const data = res.Data;
            list = res?.Data?.bet_info || [];
            this.num = data.bet_num || 0;
            this.pagenum = data.page_num || 0;
            this.alldown = data.bet_list_amount || 0;
            this.allwin = data.bet_list_wintotal || 0;
          } else {
            this.$toast({
              message: res.Msg,
              duration: 2000,
            });
          }
          if (list.length == 0 || list.length < 10) {
            this.status = "nomore";
          }
          this.list = [...this.list, ...list];
        })
        .catch((err) => {
          this.status = "nomore";
          console.log(err);
        })
        .finally(() => {});
    },
    getRobBet() {
      const params = {
        // user_id: this.userInfo.id,
        // api_token: this.userInfo.api_token,
        // game_id: this.active.game_id,
        // page: this.page,
        // time_interval: 3,
        // user_id: this.userInfo.id,
        // api_token: this.userInfo.api_token,
        // game_id: this.type,
        // page: this.robpage,
        // number_tab_id: number_tab_id,
      };
      getRobBet(params)
        .then((res) => {
          if (res.Success == 1) {
            const data = res.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((err) => {
          console.log(err);
        });
    },
    getGamelog() {
      const params = {
        pageSize: 10,
        page: this.page,
        // startTime: dayjs(this.startTime).unix(),
        // endTime: dayjs(this.endTime).unix(),
      };

      let start = dayjs(this.startTime).unix(),
        end = dayjs(this.endTime).unix();

      if (end > start) {
        params.startTime = start;
        params.endTime = end + 24 * 60 * 60 * 1000 - 1;
      } else {
        params.startTime = end;
        params.endTime = start + 24 * 60 * 60 * 1000 - 1;
      }

      this.$api
        .getGamelog(params)
        .then((res) => {
          let list = [];
          if (res.status_code == 200) {
            console.log(res);
            list = res?.data?.list || [];
          } else {
            this.$toast({
              message: res.message,
              duration: 2000,
            });
          }
          if (list.length == 0 || list.length < 10) {
            this.status = "nomore";
          }
          this.list = [...this.list, ...list];
        })
        .catch((err) => {
          this.status = "nomore";
          console.log(err);
        });
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.game {
  height: calc(100vh - 40px);
  ::v-deep .u-navbar__content__title {
    color: #eee;
    font-weight: 600;
  }
  .nav {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    font-size: 16px;
    color: #947b2b;
    font-weight: 600;
    display: flex;
    align-items: center;
    .icon {
      padding-left: 5px;
    }
  }
  .rigt-text {
    color: #999;
    font-size: 12px;
  }
  .item {
    color: $u-content-color;
    font-size: 28rpx;
    padding: 24rpx 0;
    border-bottom: 1px solid #38393b;
    .box {
      padding: 10rpx 20rpx;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
  .ft {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #0c0c0d;
    color: #947b2b;
    box-sizing: border-box;
    font-size: 14px;
  }
  .mb60 {
    width: 100%;
    height: 60px;
  }
}
</style>
