<template>
  <LayoutApp :show-back="true">
    <div class="body" ref="body">
      <div v-for="(value, key) in getMineList" :key="key">
        <tab-item v-if="key === 'board'" :data="value" noLine titleBold titleSmall small grey>
          <scroll></scroll>
        </tab-item>
        <template v-else-if="key === 'resource1' || key === 'resource2'">
          <div v-if="value.data.template_name ==='single_image'">
            <singleImage  :data="value.data.data[0]"></singleImage>
          </div>
        </template>
        
        <order v-else-if="key === 'order'"></order>
        <tab-item v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
        <tab-item v-else :data="value"></tab-item>
      </div>
    </div>
  </LayoutApp>
</template>

<script>
import tabItem from './components/tabItem';
import order from './components/order';
import scroll from './components/scroll';
import singleImage from './components/singleImage';
import { createNamespacedHelpers } from 'vuex';

const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
export default {
    data() {
      return {
       
      }
    },
    computed:{
        ...mapGetters(['getMineList'])
    },
    created() {
      this.fetchResource()
      this.fetchFavoriteNum()
      this.fetchOrderSummary()
      this.fetchSellerOrder()
      this.fetchAssets(true)
    },
    methods: {
      ...mapActions(['fetchFavoriteNum','fetchResource','fetchSellerOrder','fetchOrderSummary', 'fetchAssets'])
    },
    components: {
      tabItem,
      order,
      scroll,
      singleImage
    }
};
</script>

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