<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text :class="tabType==1?'active':''" @tap="changeTab(1)">消费</text>
	  <text :class="tabType==0?'active':''" @tap="changeTab(0)">充值</text>
    </view>

    <!-- 主体内容 -->
    <view class="scroll-content" >
		<scroll-view scroll-y style="height: 100%;width:100%;overflow: auto;" @scrolltolower="onreachBottom">
		  <view class="month-list">
			  <!-- 3月记录 -->
			  <view class="month-card" v-for="item in list" :key="item.tradeMonth">
			    <view class="month-header">
			      <text class="month-title">{{item.tradeMonth}}</text>
			      <view>
					  <text class="month-total">总计：{{item.totalAmount}}</text>
					  <text style="font-size: 10px;margin-left:5px;"> 元</text>
				  </view>
			    </view>
			    
			    <view class="record-list">
			      <view 
			        class="record-item"
			        v-for="(sitem, index) in item.list"
			        :key="sitem.id"
					@click="toDetail(sitem)"
			      >
			        <view class="item-left">
			          <text class="amount-label">{{tabType==0?'充值':'消费'}}</text>
					  <text class="time" v-if="tabType==0">充值人：{{sitem.operatorName}}</text>
					  <text class="time" v-if="tabType==0">{{sitem.bizType=='ZERO'?'清零时间':'充值时间'}}：{{sitem.tradeDate}}</text>
					  <text class="time" v-if="tabType==1&&sitem.bizType=='SALES'">{{sitem.finishFlag==1?'支付时间':'采购时间'}}：{{sitem.tradeDate}}</text>
					  <text class="time" v-if="tabType==1&&sitem.bizType=='REFUND'">退款时间：{{sitem.tradeDate}}</text>
			        </view>
					<view class="amount">
						<text :class="sitem.bizType=='ZERO'?'red':''" v-if="tabType==0">{{sitem.bizType=='ZERO'?'':'+'}}{{sitem.tradeAmount}}</text>
						<text :class="sitem.bizType=='SALES'?'red':''" v-if="tabType==1">{{sitem.bizType=='SALES'?'':'+'}}{{sitem.tradeAmount}}</text>
						<text style="font-size: 10px;margin-left:5px;"> 元</text>
					</view>
			      </view>
			    </view>
			  </view>
			  <view style="padding:0 30upx 30upx;">
				 <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
				 <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
			 </view>
		  </view>
		</scroll-view>
	</view>
  </view>
</template>

<script>
import {xprhStoreAccountFlowPage} from '@/api/recharge.js'
import {
	    mapState,
	    mapMutations,
	} from 'vuex'
export default {
  data() {
    return {
      status: 'loading',
	  noDataText: '暂无数据',
	  // 查询条件
	  pageNo: 1,
	  pageSize: 10,
	  list: [],
	  total: 0,
	  tabType:0,
	  lastMoth:''
    }
  },
  onLoad(opts){
	this.tabType = opts.type
	uni.setNavigationBarTitle({
		title: opts.type==0?'充值交易记录':'消费交易记录'
	})
  },
  onShow() {
	this.getRow(1)
  },
  computed: {
  	...mapState(['hasLogin']),
  	// 登录用户信息
  	userInfo(){
  		return this.$store.state.vuex_userInfo
  	},
  	// 货架经销商信息
  	shelfInfo(){
  		return this.$store.state.vuex_storeShelf
  	},
	maxNums(){
		let nums = 0
		this.list.forEach(item => {
			nums += item.list.length
		})
		return nums
	}
  },
  methods: {
	  // 跳转到订单详情页面
	  toDetail(item){
		  if(item.bizSn){
			  uni.navigateTo({
			  	url: "/pagesB/procureOrder/orderDetail?purchaseSn="+item.bizSn
			  })
		  }
	  },
	  changeTab(type){
		  this.tabType = type
		  uni.setNavigationBarTitle({
		  	title: this.tabType==0?'充值交易记录':'消费交易记录'
		  })
		  this.list = []
		  this.lastMoth = ''
		  this.getRow(1)
	  },
	  // 查询列表
	  getRow (pageNo) {
	    let _this = this
	    this.status = "loading"
		// 0 充值，1 消费
		const params = {
			storeSn:this.shelfInfo.storeSn,
			bizTypeList:this.tabType==0 ? ['RECHARGE'] : ['SALES', 'REFUND'],
			accountType: ['RECHARGE','GIVE'][this.tabType]
		}
	    xprhStoreAccountFlowPage({pageNo:this.pageNo,pageSize: this.pageSize,...params}).then(res => {
	  	if (res.status == 200) {
	  	  const list = res.data&&res.data.list || []
	  	  if(_this.pageNo>1){
			  const fm = list[0] && list[0].tradeMonth
			  // 如果相等，将数据拼接到上页去
			  if(fm == _this.lastMoth){
				  let preList = _this.list[_this.list.length-1].list
				  preList = preList.concat(list[0].list)
				  _this.list[_this.list.length-1].list = preList
				  // 删除第一项
				  list[0].list = []
			  }
			  console.log(list)
	  		  _this.list = _this.list.concat(list.length?list.filter(item=>item.list.length):list)
	  	  }else{
	  		  _this.list = list
	  	  }
		  // 最后一条的月份
		  _this.lastMoth = _this.list.length>0 ? _this.list[_this.list.length-1].tradeMonth : ''
	  	  _this.total = res.data.count || 0
	  	} else {
	  	  _this.list = []
	  	  _this.total = 0
	  	  _this.noDataText = res.message
	  	}
	  	_this.status = _this.total>=_this.maxNums ? "nomore" : 'loadmore'
	    })
	  },
	  // scroll-view到底部加载更多
	  onreachBottom() {
	  	if(this.maxNums < this.total){
	  		this.pageNo += 1
	  		this.getRow()
	  	}else{
	  		this.status = "nomore"
	  	}
	  },
  }
}
</script>

<style lang="less">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  padding: 30px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  > text {
    font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0 10px;
  }
  .active{
	  color: #ff0000;
  }
}

.scroll-content {
  height: calc(100vh - 90px);
  .month-list{
	  padding: 0 15px;
  }
}

.month-card {
  margin-bottom: 15px;
  overflow: hidden;
}

.month-header {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  
  .month-title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  
  .month-total {
    font-size: 14px;
    color: #666;
  }
}

.record-list {
  padding: 0 15px;
  background-color: #fff;
  border-radius: 8px;
  .red{
	  color: #ff0000
  }
}

.record-item {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
	flex-direction: column;
  }
  
  .amount-label {
    font-size: 14px;
    color: #333;
	font-weight: bold;
  }
  
  .amount {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  
  .time {
    font-size: 12px;
    color: #999;
	margin-top: 5px;
  }
}
</style>
