<template>
  <LayoutApp :show-back="true" title="我的收入">
    <div class="body" ref="body">
      <LayoutScroll
        ref="scroll"
        :loading="loadingOptions"
        @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> -->
      </LayoutScroll>
    </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 {
        page: 0,
        totalPage: 0
      }
    },
    computed:{
      ...mapGetters(['getAssetSummary']),
      ...mapState({
        incomeData: (state) => state.assetData
      }),
      loadingOptions() {
        return {
          hide: !this.totalPage,
          noMore: this.page >= this.totalPage
        };
      }
    },
    created() {
    },
    activated() {
      this.fetchAssetsAsync(true)
    },
    watch: {
      "incomeData.list": function(val) {
        if(val.length === 0) {
          this.options.pullUpLoad.txt.noMore = ''
          // this.$refs.scroll.disable()
        } else {
          this.options.pullUpLoad.txt.noMore = '到底啦~'
          // this.$refs.scroll.enable()
        }
      }
    },
    methods: {
      ...mapActions(['fetchAssets']),
      onPullingUp() {
        if(!this.incomeData.endReached) {
          this.fetchAssetsAsync(false)
        } else {
          this.$refs.scroll.forceUpdate()
        }
      },
      fetchAssetsAsync(reFetch) {
        return this.fetchAssets(reFetch).then(res => {
          if (res.code === 200) {
            let { page, pagetotal } = res.data || {};

            this.page = page || 0;
            this.totalPage = pagetotal || 0;
          }
        });
      }
    },
    components: {
      incomeHeader,
      incomeDetail,
      incomeItem,
      pullDown,
      payAccount,
      Style
    }
};
</script>

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