<template>
  <div class="mobile-container">
    <template v-for="(component, index) in layoutData.moduleList">
      <div
        v-if="component.name === 'search-bar' && component.status === true"
        :key="index"
        class="search-bar hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <div class="search-bar-warp">
          <SearchBarView :component-data="component"></SearchBarView>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'nav-bar' && component.status === true"
        :key="index"
        class="nav-bar hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <NavBar :component-data="component"></NavBar>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'slider-bar' && component.status === true"
        :key="index"
        class="slider-bar hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <div class="slider-bar-wrap">
          <SliderBar :component-data="component"></SliderBar>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'multi-bar' && component.status === true"
        :key="index"
        class="multi-bar hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <div class="multi-bar-warp">
          <MultiBar :component-data="component"></MultiBar>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'notice-bar' && component.status === true"
        :key="index"
        class="notice-bar hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <div class="notice-bar-wrap">
          <NoticeBar :component-data="component"></NoticeBar>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'ad-bar-1' && component.status === true"
        :key="index"
        class="ad-bar-1 hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <AdBar :component-data="component"></AdBar>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'ad-bar-2' && component.status === true"
        :key="index"
        class="ad-bar-2 hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <AdBar :component-data="component"></AdBar>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'sub-nav' && component.status === true"
        :key="index"
        class="sub-nav hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0,
          paddingLeft: component.marginLRStatus ? component.marginLR : 0,
          paddingRight: component.marginLRStatus ? component.marginLR : 0
        }"
      >
        <div class="tabs-bar">
          <TabsBar :component-data="component"></TabsBar>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
      <div
        v-if="component.name === 'goods-list' && component.status === true"
        :key="index"
        class="goods-list hover-wrap"
        :style="{
          marginTop: component.marginTopStatus ? component.marginTop : 0
        }"
      >
        <div class="tab-list-wrap">
          <TabList :component-data="component"></TabList>
        </div>
        <HoverBlock
          :component-data="component"
          @change="layoutChange"
        ></HoverBlock>
      </div>
    </template>
  </div>
</template>

<script>
/**
 * @author: 过飞
 * @createData: 2020年09月09日 15:48:20
 * @version：v1.0
 *
 * @desc: 功能描述
 */
import HoverBlock from '@/mobile-views/common/HoverBlock'
import { createNamespacedHelpers } from 'vuex'
import SearchBarView from './components/SearchBarView'
import NavBar from './components/NavBar'
import SliderBar from './components/SliderBar'
import MultiBar from './components/MultiBar'
import NoticeBar from './components/NoticeBar'
import AdBar from '@/mobile-views/common/AdBar'
import TabsBar from './components/TabsBar'
import TabList from './components/TabList'
const { mapGetters, mapActions } = createNamespacedHelpers('app-index')
export default {
  name: 'MobileIndex',

  components: {
    HoverBlock,
    SearchBarView,
    NavBar,
    SliderBar,
    MultiBar,
    NoticeBar,
    AdBar,
    TabsBar,
    TabList
  },

  mixins: [],

  props: {},

  data() {
    return {}
  },

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

  watch: {},

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