<template>
  <LayoutApp :show-back="true" title="我的收入">
    <div class="body" ref="body">
      <Scroll
          ref="scroll"
          :data="incomeData.list"
          :options="options"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp">
      
      <incomeHeader :data="getAssetSummary"></incomeHeader>
      <payAccount></payAccount>
      <incomeDetail :data="incomeData">
        <template v-for="(item,index) in incomeData.list">
            <incomeItem :data="item" :key="index"></incomeItem>
          </template> 
      </incomeDetail>
      <template v-if="customPullDown" slot="pulldown" slot-scope="props">
        <pullDown :propsData="props" :pullDownRefreshThreshold="pullDownRefreshThreshold"></pullDown>
      </template>
      </Scroll>
    </div>
  </LayoutApp>
</template>

<script>
import incomeHeader from './components/incomeHeader';
import incomeDetail from './components/incomeDetail';
import incomeItem from './components/incomeItem';
import pullDown from './components/pullDown';
import payAccount from './components/payAccount';
import { createNamespacedHelpers } from 'vuex';
import {Style, Scroll} from 'cube-ui';
import scrollMixin from '../../../mixins/scroll';
const {mapState, mapGetters, mapActions} = createNamespacedHelpers('home/mine');
export default {
    mixins: [scrollMixin],
    data() {
      return {
       
      }
    },
    computed:{
      ...mapGetters(['getAssetSummary']),
        ...mapState({
          incomeData: (state) => state.assetData
        }),
        
    },
    created() {
    },
    activated() {
      this.fetchAssets(true)
    },
    watch: {
      "incomeData.list": function(val) {
        if(val.length === 0) {
          this.$refs.scroll.disable()
        } else {
          this.$refs.scroll.enable()
        }
      }
    },
    methods: {
      ...mapActions(['fetchAssets']),
      onPullingDown() {
        this.fetchAssets(true)
      },
      onPullingUp() {
        if(!this.incomeData.endReached) {
          this.fetchAssets(false)
        } else {
          this.$refs.scroll.forceUpdate()
        }
      }
    },
    components: {
      incomeHeader,
      incomeDetail,
      incomeItem,
      pullDown,
      payAccount,
      Style,
      Scroll
    }
};
</script>

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