<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="top-info">
           <view class="left">
             <view class="title">{{ item.point_title }}</view>
             <view class="time">{{ item.create_time }}</view>
           </view>
           <view class="right">{{ item.total_money }}</view>
         </view>
         <view class="other-info">
           <view class="other-info-line">操作员：{{ item.staff_nickname || item.staff_uid }}</view>
           <view class="other-info-line">扣除酒卡额度：{{ (item.total_money - item.diff_money_pay).toFixed(2) }}</view>
           <view class="other-info-line">使用酒水卡积分：{{ item.use_integral }}</view>
           <view class="other-info-line" v-if="item.diff_money > 0">差价：{{ item.diff_money }}</view>
           <view class="other-info-line" v-if="item.diff_money_pay > 0">差价实付金额：{{ item.diff_money_pay }}</view>
         </view>
       </view>
     </view>
      <emptyPage v-else title="暂无记录～"></emptyPage>
		</view>
	</view>
</template>

<script>
import { exchangeRecord } 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,
    };
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    this.getPointList();
  },
  onReachBottom: function () {
    this.getPointList();
  },
  methods: {
    // 提货记录
    getPointList() {
      let _this = this;
      exchangeRecord({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: 30rpx 20rpx;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  .top-info{
    width: 100%;
    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;
        width: 100%;
        text-align: left;
      }
      .time{
        width: 100%;
        text-align: left;
        font-size: 26rpx;
        color: #C1C1C1;
      }
    }
    .right{
      font-size: 40rpx;
    }
  }
  .other-info{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    .other-info-line{
      width: 50%;
      height: 35rpx;
      line-height: 35rpx;
      font-size: 24rpx;
    }
  }
}
</style>
