<template>
  <view class="tab-box">
    <!--顶部导航栏-->
    <view class="scroll-view_H">
      <view
        v-for="(tab, index) in datas"
        :key="index"
        class="scroll-view-item_H"
        :class="navIndex == tab.tab ? 'activite' : ''"
        @tap="checkIndex(tab.tab)"
      >
        {{ tab.show_tab }}
      </view>
    </view>

    <!-- 内容 -->
    <template v-for="(item, index) in list1.relations">
      <view
        v-if="list1.relations.length != 0 && navIndex == 1"
        :key="index"
        class="swiper_item"
      >
        <view class="text-price">
          <view class="text-name">
            {{ item.order_name }}
          </view>
          <view class="">
            {{ item.pay_method }} &yen;{{ item.order_price }}
          </view>
        </view>
        <view class="text-time">
          <view class="">
            {{ item.order_time }}
          </view>
          <view class="">
            &yen;{{ item.single_price }} x {{ item.order_num }}
          </view>
        </view>
      </view>
    </template>
    <template v-for="(item, index) in list2.relations">
      <view
        v-if="list2.relations.length != 0 && navIndex == 2"
        :key="index"
        class="swiper_item"
      >
        <view class="text-price">
          <view class="text-name">
            {{ item.show_type }}
          </view>
          <view class=""> &yen;{{ item.add_balance }} </view>
        </view>
        <view class="text-time">
          <view class="">
            {{ item.invest_time }}
          </view>
          <view class="">
            {{ item.type == 2 ? "回血" : "回购" }} x {{ item.num }}
          </view>
        </view>
      </view>
    </template>
    <template v-for="(item, index) in list3.relations">
      <view
        v-if="list3.relations.length != 0 && navIndex == 3"
        :key="index"
        class="swiper_item"
      >
        <view class="text-price">
          <view class="text-name">
            {{ item.show_type }}
          </view>
          <view class=""> &yen;{{ item.add_balance }} </view>
        </view>
        <view class="text-time">
          <view class="">
            {{ item.invest_time }}
          </view>
        </view>
      </view>
    </template>
    <view
      v-if="list1.relations.length == 0 && navIndex == 1"
      class="swiper_item1"
      >暂无消费记录</view
    >
    <view
      v-if="list2.relations.length == 0 && navIndex == 2"
      class="swiper_item1"
      >暂无消费记录</view
    >
    <view
      v-if="list3.relations.length == 0 && navIndex == 3"
      class="swiper_item1"
      >暂无消费记录</view
    >
  </view>
</template>

<script>
import api from "@/lib/api/api";
export default {
  name: "PageOrder",
  data() {
    return {
      datas: [],
      list1: [],
      list2: [],
      list3: [],
      scrollTop: 0,
      navIndex: 0,
      userInfo: {},
    };
  },
  onLoad(options) {
    this.navIndex = options.tabIndex;
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    } else {
      uni.showToast({
        title: "请先登录",
        icon: "none",
      });
      return;
    }
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      api
        .balanceRecords(this.userInfo.session)
        .then((data) => {
          if (data.data) {
            this.datas = data.data.relations;
            this.list1 = [];
            this.list2 = [];
            this.list3 = [];
            for (let j = 0; j < this.datas.length; j++) {
              if (this.datas[j].tab == 1) {
                this.list1 = this.datas[j];
              } else if (this.datas[j].tab == 2) {
                this.list2 = this.datas[j];
              } else if (this.datas[j].tab == 3) {
                this.list3 = this.datas[j];
              }
            }
          }
        })
        .catch((e) => {
          console.error(e);
        });
    } else {
      this.userInfo = {};
      uni.showToast({
        title: "请先登录",
        icon: "none",
      });
      return;
    }
  },
  methods: {
    checkIndex(index) {
      this.navIndex = index;
    },
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    //滑动切换swiper
    tabChange(e) {
      const navIndex = e.detail.current;
      this.navIndex = navIndex;
    },
  },
};
</script>

<style scoped>
.tab-box {
  padding: 0 47rpx;
}
.activite {
  font-family: PingFangSC-Medium, PingFang SC;
  line-height: 48px;
  font-size: 34rpx;
  font-weight: 500;
  color: #262626 !important;
  border-bottom: 6rpx solid #262626;
}

.content {
  height: 700px;
}
.swiper_item {
  padding: 48rpx 0 38rpx 0;
  border-bottom: 1px solid #e5e5e5;
}
.swiper_item1 {
  text-align: center;
  display: block;
  margin: 100rpx auto;
}
.text-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text-name {
  letter-spacing: 1rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #262626;
  width: 315rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-time {
  margin-top: 5rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scroll-view_H {
  padding-top: 15rpx;
  color: #cccccc;
  background: #fff;
  position: sticky;
  top: 0;
}

.scroll-view-item_H {
  display: inline-block;
  margin-right: 30rpx;
  padding-bottom: 10rpx;
  width: 68rpx;
  height: 48rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #b7b7b7;
  line-height: 48rpx;
}
</style>
