<template>
  <LayoutApp :show-back="true">
    <div class="body" ref="body">
      <div v-for="item in tabList" :key="item.name">
        <tab-item v-if="item.name === 'board'" :data="item" noLine titleBold titleSmall small grey>
          <scroll></scroll>
        </tab-item>
        <order v-else-if="item.name === 'order'"></order>
        <tab-item v-else-if="item.name === 'sale'" :data="item" noLine titleBold></tab-item>
        <tab-item v-else :data="item"></tab-item>
      </div>
    </div>
  </LayoutApp>
</template>

<script>
import tabItem from './components/tabItem';
import order from './components/order';
import scroll from './components/scroll';

import { createNamespacedHelpers } from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('home/mine');
export default {
    data() {
      return {
        tabList: [
          {name: 'board', title: '公告栏'},
          {name:'sale', title: '出售中', num: 1},
          {name: 'order'},
          {name: 'income', title: '交易收入', num: 1},
          {name: 'buyOrder', title: '我购买的订单', num: 1},
          {name: 'buy', title: '我的求购', num: 1},
          {name: 'collect', title: '我的收藏', num: 1}
        ]
      }
    },
    computed:{
        ...mapState([
          'favoriteNum',
          'buyNum'
        ])
    },
    created() {
      this.fetchResource()
      this.fetchFavoriteNum()
      this.fetchOrderSummary().then(data => {
        console.log(data)
      })
      this.fetchSellerOrder()
      this.fetchAssets().then(data => {
        console.log(data)
      })
    },
    methods: {
      ...mapActions(['fetchFavoriteNum','fetchResource','fetchSellerOrder','fetchOrderSummary', 'fetchAssets'])
    },
    components: {
      tabItem,
      order,
      scroll
    }
};
</script>

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