<template>
	<view :style="viewColor">
    <view class='content-box'>
     <view v-if="Object.values(list).length > 0" class="content-list">
       <view class="list-box" v-for="(item,index) in list" :key="index">
         <view class="left">
           <view class="title">
             {{ item.remark }}
             <view :class="['status',(item.change_type == 1 ? 'status-success' : 'status-error' )]">
               {{ item.change_type == 1 ? '增加' : '减少' }}
             </view>
           </view>
           <view class="time">{{ item.create_time }}</view>
         </view>
         <view v-if="item.change_type == 1" class="right">+{{ item.change_quantity }}</view>
         <view v-else class="right status-success">-{{ item.change_quantity }}</view>
       </view>
     </view>
      <emptyPage v-else title="暂无记录～"></emptyPage>
		</view>
	</view>
</template>

<script>
import { recordIntegralList } from '@/api/exchange.js';
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';

const app = getApp();
export default {
  components: {
    emptyPage,
  },
  data() {
    return {
      list: [],
      page: 1,
      total_page: 1,

    };
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    this.getPointList();
  },
  onReachBottom: function () {
    this.getPointList();
  },
  methods: {
    // 提货记录
    getPointList() {
      let _this = this;
      recordIntegralList({page: _this.page})
          .then(res => {
            let list = res.data.list || {};
            if (Object.values(list).length > 0) {
              _this.list = _this.$util.SplitArray(list, _this.list);
              _this.$set(_this, 'list', _this.list);
              _this.page++;
            }
          })
          .catch(err => {
            this.$util.Tips({
              title: err
            });
          });
    },
  },
}
</script>

<style scoped lang="scss">
.list-box{
  width: 100%;
  padding: 20rpx;
  height: 120rpx;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  .left{
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    .title{
      font-size: 30rpx;
      font-weight: bold;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .status{
        font-size: 24rpx;
        font-weight: initial;
        margin-left: 20rpx;
        height: 35rpx;
        line-height: 35rpx;
        padding: 0 15rpx;
        border-radius: 50rpx;
      }
      .status-success{
        background-color: #13ce66;
        color: #fff;
      }
      .status-error{
        background-color: #ff4949;
        color: #fff;
      }
    }
    .time{
      font-size: 26rpx;
      color: #C1C1C1;
    }
  }
  .right{
    font-size: 40rpx;
    color: #ff4949;
  }
  .status-success{
    color: #13ce66;
  }
}
</style>
