<template>
  <LayoutApp :show-back="true">
    <div class="body" ref="body">
      <h1>我的收入</h1>
      <incomeHeader :data="incomeSum"></incomeHeader>
      <incomeDetail></incomeDetail>
    </div>
  </LayoutApp>
</template>

<script>
import incomeHeader from './components/incomeHeader';
import incomeDetail from './components/incomeDetail';
import { createNamespacedHelpers } from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('home/mine');
export default {
    data() {
      return {
       
      }
    },
    computed:{
        ...mapState({
          incomeSum:(state) => {
            return {
              goodsIncome: state.assetData.goodsIncome,
              totalIncome: state.assetData.totalIncome,
              compensateIncome: state.assetData.compensateIncome
              }
          },
          incomeData: (state) => state.assetData
        }),
        
    },
    created() {
      this.fetchAssets().then(data => {
        console.log(data)
      })
    },
    methods: {
      ...mapActions(['fetchAssets'])
    },
    components: {
      incomeHeader,
      incomeDetail
    }
};
</script>

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