<template>
  <LayoutApp :show-back="true" title="收入明细">
    <div class="body" ref="body">
      
      <Scroll
          ref="scroll"
          :data="walletData.list"
          :options="options"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp">
          <incomeFilter></incomeFilter>
          <div v-if="walletData.list.length > 0">
            <template v-for="(item,index) in walletData.list">
              <incomeItem :data="item" :key="index"></incomeItem>
            </template> 
          </div>
          <UfoNoItem class="noData" :tip="`暂无明细数据`" v-else></UfoNoItem>
      <template v-if="customPullDown" slot="pulldown" slot-scope="props">
        <pullDown :propsData="props" :pullDownRefreshThreshold="pullDownRefreshThreshold"></pullDown>
      </template>
      </Scroll>
    </div>
  </LayoutApp>
</template>
<script>

import incomeItem from './components/incomeItem';
import incomeFilter from './components/filter';
import pullDown from './components/pullDown';
import { createNamespacedHelpers } from 'vuex';
import {Style, Scroll} from 'cube-ui';
import scrollMixin from '../../../mixins/scroll';
import UfoNoItem from '../../../components/ufo-no-item'
const {mapState, mapActions} = createNamespacedHelpers('home/mine');
import moment from 'moment';
export default {
    mixins: [scrollMixin],
    data() {
      return {
       
      }
    },
    computed:{
        ...mapState({
          incomeSum:(state) => {
            return {
              totalIncome: state.assetData.totalIncome
              }
          },
          walletData: (state) => state.walletData
        }),
        
    },
    watch: {
      "walletData.list": function(val) {
        if(val.length === 0) {
          this.$refs.scroll.disable()
        } else {
          this.$refs.scroll.enable()
        }
      }
    },
    created() {
      let startDay = moment().format('YYYY-MM') + '-01';
      let startTime = moment(startDay).startOf('d').unix();
      let endTime = moment(Date.now()).unix();
      this.fetchWallet({isRefresh:true, startTime, endTime})
    },
    methods: {
      ...mapActions(['fetchWallet']),
      onPullingDown() {
        this.fetchWallet({isRefresh:true})
      },
      onPullingUp() {
        if(!this.walletData.endReached) {
          this.fetchWallet({isRefresh:false})
        } else {
          this.$refs.scroll.forceUpdate()
        }
      }
    },
    components: {
      incomeItem,
      incomeFilter,
      pullDown,
      Style,
      Scroll,
      UfoNoItem
    }
};
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  overflow-y: auto;
  background-color: white;
  color: #999;
}
.noData {
  margin: 90px 0;
}
</style>