<template>
  <section class="screen flex home-container" >
    <view-header></view-header>
    <section class="flex-1 row container">
      <article class="flex-1 content-container">
        <tab :data="tabData" v-model:value="value">
          <template
              v-for="(item,index) in tabData"
              v-slot:[item.slot]
          >
            <component
                :key="'tab-component-'+index"
                :is="item.component"
            ></component>
          </template>

        </tab>
      </article>
      <view-menu></view-menu>

    </section>
    <view-footer></view-footer>
  </section>
</template>

<script>
import {
  tab
} from '$components';
import {
  viewHeader,
  viewFooter,
  viewMenu,
  viewPlayWith,
  viewTalking
} from '$views';

import mixins from '../mixins';

import tabData from "../data/tabData";

import socket from '$utils/socket';
import {NoticeType} from "../../../utils/socket/const";

export default {
  name: "home",
  data(){
    return {
      tabData,
      value:0
    }
  },


  created() {
    // // 针对不同的选择默认不同的选项
    let select = this.$params.select === 1 ?1:0;
    if (this.value !== this.$params.select) {
      this.value = select;
    }
    //
    socket.on('home',(data)=>{
      if (data) {
        let select = data.select === 1 ? 1:0;
        if(select !== this.value) {
          this.value = select;
        }
      }
    },NoticeType.home)

  },

  beforeUnmount() {
    socket.off('home',NoticeType.home)
  },

  components:{
    viewHeader,
    viewFooter,
    tab,
    viewMenu,
    viewPlayWith,
    viewTalking
  },
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
