<template>
  <div class="vip-center-index">
    <div class="inner">
      <template v-for="(component, index) in layoutData.components">
        <div v-if="component.name==='header-bar' && component.status === true"
             :key="index"
             class="header hover-wrap"
             :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }">
          <HeaderBar></HeaderBar>
          <HoverBlock :component-data="component"
                      @change="layoutChange"></HoverBlock>
        </div>
        <div v-if="component.name==='statistics' && component.status === true"
             :key="index"
             class="statistics hover-wrap"
             :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }">
          <div class="statistics-wrap">
            <StatisticsBar></StatisticsBar>
          </div>
          <HoverBlock :component-data="component"
                      @change="layoutChange"></HoverBlock>
        </div>
        <div v-if="component.name==='nav-bar' && component.status === true"
             :key="index"
             class="nav hover-wrap"
             :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }">
          <div class="nav-wrap">
            <NavBar></NavBar>
          </div>
          <HoverBlock :component-data="component"
                      @change="layoutChange"></HoverBlock>
        </div>
        <div v-if="component.name==='ad-bar' && component.status === true"
             :key="index"
             class="ad-bar hover-wrap"
             :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }">
          对接store中的数据,广告图片才会显示,此组件为公共组件.
          <div class="ad-bar-wrap">
            <AdBar></AdBar>
          </div>
          <HoverBlock :component-data="component"
                      @change="layoutChange"></HoverBlock>
        </div>
        <div v-if="component.name==='multi-nav' && component.status === true"
             :key="index"
             class="app-list hover-wrap"
             :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }">
          <div class="app-list-wrap">
            <MultiNav></MultiNav>
          </div>
          <HoverBlock :component-data="component"
                      @change="layoutChange"></HoverBlock>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

/**
* @author: 过飞
* @createData: 2020年09月16日 11:18:25
* @version：v1.0
*
* @desc: 功能描述
*/
import HeaderBar from './components/HeaderBar'
import StatisticsBar from './components/StatisticsBar'
import NavBar from './components/NavBar'
import AdBar from '@/mobile-views/common/AdBar'
import MultiNav from './components/MultiNav'
import HoverBlock from '@/mobile-views/common/HoverBlock'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('app-index')
export default {
  name: '',

  components: {
    HoverBlock,
    HeaderBar,
    StatisticsBar,
    NavBar,
    AdBar, MultiNav
  },

  mixins: [],

  props: {},

  data() {
    return {

    }
  },

  computed: {
    ...mapGetters({ layoutData: 'getLayout' })
  },

  watch: {},

  created() {
    const { type, module_id: id } = this.$route.query
    this.initLayoutData({ type, id }) // 这是异步的,所以正式对接需要await
    // 在等待init完毕后,通知表格初始化数据.
    setTimeout(() => {
      this.$bus.$emit('TABLE_LOADING--bus', false)
      this.$bus.$emit('INIT_TABLE--bus')
    }, 2000)
  },

  mounted() { },

  methods: {
    ...mapActions({
      updateLayout: 'updateLayout',
      updateComponent: 'updateComponent',
      initLayoutData: 'initLayoutData'
    }),
    changeSort() { },
    layoutChange(newLayout) {
      console.log('事件触发')
      this.updateLayout(newLayout)
    },
    componentChange(newData) {
      this.updateComponent(newData)
    }
  }
}
</script>
<style lang="scss" scoped >
.inner {
  background-color: #eee;
  .nav-wrap {
    margin-top: 10px;
  }
}
</style>
