<template>
  <LayoutApp :show-back="true">
    <div class="body" ref="body">
      <Scroll
          ref="scroll"
          :data="incomeData.list"
          :options="options"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp">
      
      <incomeHeader :data="incomeSum"></incomeHeader>
      <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 { 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 {
              goodsIncome: state.assetData.goodsIncome,
              totalIncome: state.assetData.totalIncome,
              compensateIncome: state.assetData.compensateIncome
              }
          },
          incomeData: (state) => state.assetData
        }),
        
    },
    created() {
      
    },
    activated() {
      this.fetchAssets(true)
    },
    watch: {
      "incomeData.list": function(val) {
        console.log('www')
        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,
      Style,
      Scroll
    }
};
</script>

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