<comment>
    # 组件注释
</comment>
<template>
    <div class="gameHall">
      <!--头-->
      <keep-alive>
        <component  @showToast="showTextToast" class="topTab" :is=" topTab "></component>
      </keep-alive>

      <!--尾-->
      <component class="menuBar" @clickItem="clickItem" ref="menuBar" :is=" menuBar "></component>

      <md-popup
        v-model="isPopupShow[7]"
        transition="md-zoom"
      >
        <div class="md-example-popup md-example-popup-center">
          尽请期待
        </div>
      </md-popup>
    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    import {Popup, Button} from 'mand-mobile'
    export default {
        name: 'gameHall',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
          topTab: () => import('./topTab'),
          menuBar: () => import('./menuBar'),
          my: () => import('./my'),
          [Popup.name]: Popup,
        },
        data() {
            return {
              topTab : "topTab",
              menuBar : "menuBar",
              my : "my",

              tabLayout : ["topTab","","","my"],

              isPopupShow: [],

            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {

          clickItem(index){
            console.log("菜单栏点击了什么",index);
            if (index==1 ||index==2) {
              this.showTextToast()
            }else{
              this.topTab = this.tabLayout[index]
            }

          },
          showTextToast() {
            // this.$toast.info('提示') // 全量引入
            this.showPopUp(7)

          },
          showPopUp(type) {
            this.$set(this.isPopupShow, type, true)
          },
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
.topTab{
  width: 100%;
  /*height: 20vh;*/
}
.menuBar{
  width:100%;
  position:fixed;
  bottom:0;
  left:0;
}

.md-example-popup{
  position :relative;
  font-size :20px;
  font-family :DINAlternate-Bold;
  font-weight :500;
  box-sizing :border-box;
  text-align :center;
  background-color :#FFF;
}

.md-example-popup-center{
  padding-right: 2rem;
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius :radius-normal;
}

</style>
