<template>
  <tabbar :titles='["全部","充值","消费"]' @change='changeTab' :item-active-color='"#D95554"'
          :indicator-color='"#D95554"' />
  <view class='content'>
    <!--    <view class='c-flex-row'>-->
    <!--      <text>选择日期</text>-->
    <!--      <picker mode='date' @change='changeDate'>-->
    <!--        <view class='current-date c-flex-row'>-->
    <!--          <text>{{ tradeDate }}</text>-->
    <!--          <image :src='assetsUrl("ic_triangle_down.png")' />-->
    <!--        </view>-->
    <!--      </picker>-->
    <!--    </view>-->

    <u-list @scrolltolower='loadMore'>
      <trade-item v-for='(item,index) in tradeList' :key='index' :item='item' />
      <u-loadmore v-if='tradeList.length>0' :status='loadingStatus' />
      <u-empty v-if='tradeList.length === 0' text='暂无数据' margin-top='100' />
    </u-list>
  </view>
</template>

<script lang='ts' setup>
import TradeItem from './components/trade-item.vue';
import { getTradeList } from '@/api/user';
import dayjs from 'dayjs';

const tradeList = ref([]);
const tradeType = ref('');
const tradeDate = ref();
const currentPageNum = ref(1);
const loadingStatus = ref('loading');

onLoad((e) => {
  tradeDate.value = dayjs(Date.now()).format('YYYY-MM-DD');
  fetchData();
});

const changeDate = (e: any) => {
  tradeDate.value = e.detail.value;
  fetchData();
};

const changeTab = (index: number) => {
  switch (index) {
    case 0:
      tradeType.value = '';
      break;
    case 1:
      tradeType.value = '会员充值';
      break;
    case 2:
      tradeType.value = '余额消费';
      break;
  }
  fetchData();
};

const fetchData = async (refresh: boolean = true) => {
  currentPageNum.value = refresh ? 1 : currentPageNum.value + 1;
  loadingStatus.value = 'loading';
  const { list } = await getTradeList({
    // startDate: tradeDate.value,
    // endDate: dayjs(tradeDate.value).add(1, 'day').format('YYYY-MM-DD'),
    name: tradeType.value,
    pageNum: currentPageNum.value,
    pageSize: 20
  });
  if(refresh) {
    tradeList.value = list;
  } else {
    tradeList.value = tradeList.value.concat(list);
  }
  loadingStatus.value = 'no';
};

const loadMore = () => {
  fetchData(false);
};
</script>

<style lang='scss' scoped>
.content {
  padding: 20rpx 24rpx;
}

.current-date {
  height: 50rpx;
  background: #FFFFFF;
  border-radius: 5rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  padding: 0 20rpx;
  margin-left: 10rpx;

  image {
    width: 19rpx;
    height: 11rpx;
    margin-left: 15rpx;
  }
}
</style>
