<template>
  <LayoutApp :show-back="true">
    <div class="body" ref="body">
      <incomeFilter></incomeFilter>
      <Scroll
          ref="scroll"
          :data="walletData.list"
          :options="options"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp">
        <template v-for="(item,index) in walletData.list">
            <incomeItem :data="item" :key="index"></incomeItem>
          </template> 
      <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';

const {mapState, mapActions} = createNamespacedHelpers('home/mine');
export default {
    mixins: [scrollMixin],
    data() {
      return {
       
      }
    },
    computed:{
        ...mapState({
          incomeSum:(state) => {
            return {
              totalIncome: state.assetData.totalIncome
              }
          },
          walletData: (state) => state.walletData
        }),
        
    },
    created() {
      this.fetchWallet(true)
    },
    methods: {
      ...mapActions(['fetchWallet']),
      onPullingDown() {
        this.fetchWallet(true)
      },
      onPullingUp() {
        if(!this.walletData.endReached) {
          this.fetchWallet(false)
        } else {
          this.$refs.scroll.forceUpdate()
        }
      }
    },
    components: {
      incomeItem,
      incomeFilter,
      pullDown,
      Style,
      Scroll
    }
};
</script>

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