<template>
  <view
    class="content"
    :style="'height:' + (datas.length > 10 ? '' : '100vh') + ';'"
  >
    <view class="top">
      <view class="top-image">
        <image mode src="@/assets/icon_v1/wdjbbj@3x.png"></image>
      </view>
      <view class="top-text">剩余可用金币</view>
      <view class="top-text1">{{ coinAmount }}</view>
    </view>
    <view class="commodity">
      <scroll-view class="scroll-Y" scroll-y="true">
        <view v-for="(item, key) in datas" :key="key" class="commodity-list">
          <view style="float: left; width: 521rpx; margin-left: 24rpx">
            <view class="commodity-list_text">{{ "" + item.type + "" }}</view>
            <view class="commodity-list_text1">{{
              "订单编号：" + item.order_id + ""
            }}</view>
            <view class="commodity-list_text1">{{
              "下单时间：" + item.invest_time + ""
            }}</view>
          </view>
          <view style="float: left; width: 130rpx">
            <view v-if="item.add_balance < 0" class="commodity-list_text2">{{
              item.add_balance
            }}</view>
            <view v-else class="commodity-list_text2" style="color: #ff4b4b">
              <text>+</text>{{ item.add_balance }}</view
            >
          </view>
          <view v-if="key < datas.length - 1" class="option-border"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import api from "@/lib/api/api";

export default {
  name: "PageMyWallet",
  data() {
    return {
      coinAmount: 0,
      datas: [],
      userInfo: {},
    };
  },
  onShow() {
    const t = uni.getMenuButtonBoundingClientRect();
    this.top = t.top + 5 + "px";

    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      this.refresh();
    } else {
      this.userInfo = {};
    }
  },
  methods: {
    refresh() {
      api
        .balanceRecords(this.userInfo.session)
        .then((data) => {
          if (data.data) {
            this.coinAmount = data.data.balance;
            this.datas = data.data.relations;
          }
        })
        .catch((e) => {
          console.error(e);
        });
    },
  },
};
</script>

<style>
image {
  height: inherit;
  width: inherit;
}

.content {
  align-items: flex-start;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  width: 750rpx;
}

.top {
  background-color: #fff;
  border-radius: 16rpx;
  height: 186rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 702rpx;
}

.top-image {
  float: right;
  height: 150rpx;
  margin-top: 36rpx;
  width: 150rpx;
}

.top-text {
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  margin-left: 24rpx;
  margin-top: 32rpx;
  width: 528rpx;
}

.top-text1 {
  color: #ff4b4b;
  float: left;
  font-family: DINPro-Medium;
  font-size: 66rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 24rpx;
  margin-top: 16rpx;
  width: 528rpx;
}

.commodity {
  background-color: #fff;
  border-radius: 24rpx;
  margin-bottom: 42rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  overflow: auto;
  width: 702rpx;
}

.commodity-list {
  float: left;
  height: 154rpx;
  width: 702rpx;
}

.commodity-list_text {
  color: #333;
  font-size: 30rpx;
  height: 35rpx;
  left: 35rpx;
  line-height: 35rpx;
  margin-bottom: 16rpx;
  margin-top: 24rpx;
}

.commodity-list_text1,
.commodity-list_text {
  float: left;
  font-family: PingFangSC-Regular;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 521rpx;
}

.commodity-list_text1 {
  color: #999;
  font-size: 26rpx;
  height: 31rpx;
  line-height: 31rpx;
}

.commodity-list_text2 {
  color: #333;
  float: left;
  font-size: 30rpx;
  height: 154rpx;
  line-height: 154rpx;
  text-align: center;
  width: 150rpx;
}

.option-border {
  background-color: #eee;
  float: left;
  height: 2rpx;
  margin-left: 24rpx;
  width: 678rpx;
}
</style>
