<template>
  <DefaultLayout>
    <div class="mini-nav-bar-layout">
      <van-nav-bar
        class="mini-nav-bar-layout__bar"
        :title="title"
        fixed
        :left-arrow="isShowBack"
        @click-left="onClickLeft"
      />
      <div class="mini-nav-bar-layout__container">
        <Nuxt />
      </div>
    </div>
  </DefaultLayout>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MiniNavbar',
  components: {
    DefaultLayout: () => import('./default')
  },
  computed: {
    ...mapGetters({ sessionList: 'lottery/sessionList' }),
    isShowBack() {
      return this.$route.path !== '/mini/list' && !this.$route.query?.only
    },
    title() {
      let title = '抽奖活动'
      switch (this.$route.path) {
        case '/mini/index':
          title = '抽奖'
          break
        case '/mini/list':
          title = '抽奖活动'
          break
      }
      return title
    }
  },
  methods: {
    onClickLeft() {
      const { uin, id, includeUrl } = this.$route.query
      this.$router.push({ path: '/mini/list', query: { uin, id, includeUrl } })
    }
  }
}
</script>

<style lang='less' scoped>
.mini-nav-bar-layout {
  width: 100%;
  height: 100%;
  &__bar {
    &:after {
      display: none;
    }
    ::v-deep .van-nav-bar__title {
      font-size: 14px;
      color: #333;
      font-weight: 400;
    }
    ::v-deep .van-nav-bar__left {
      .van-icon {
        color: #bababa;
      }
    }
  }
  &__container {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    padding-top: 46px;
  }
  &__content {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }
}
</style>
