<template>
  <div class="full-height main">
    <q-layout view="lHh lpr lFf" container>
      <q-header bordered class="bg-white text-primary">
        <q-toolbar v-show="!$route.meta.navHide">
          <q-btn
            v-show="$route.meta.canBack"
            flat
            round
            dense
            icon="img:http://alading-20210318.oss-cn-shanghai.aliyuncs.com/upload/1620883976604-o1m4-back-line.png"
            @click="$router.go(-1)"
          />
          <q-toolbar-title class="text-center">
            <span>{{ $route.meta.title }}</span>
          </q-toolbar-title>
        </q-toolbar>
      </q-header>
      <q-footer
        bordered
        class="bg-white text-primary"
        v-show="!$route.meta.tabHide"
        ref="tabBar"
      >
        <q-tabs
          no-caps
          active-color="negative"
          indicator-color="transparent"
          class="text-grey"
          v-model="tab"
          align="justify"
        >
          <q-route-tab
            v-for="item of tabs"
            :key="item.name"
            :name="item.name"
            :icon="item | fmtTabIcon(tab)"
            :label="item.label"
            :to="'/' + item.name"
            exact
            :ripple="false"
          >
            <div v-if="item.name == 'contrast'">
              <q-badge v-show="pkList.length" color="negative" floating>{{
                pkList.length
              }}</q-badge>
            </div>
          </q-route-tab>
        </q-tabs>
      </q-footer>

      <q-page-container>
        <q-page>
          <router-view></router-view>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "",
  components: {},
  data() {
    return {
      // tab路由
      tab: "home",
      // tab集合
      tabs: [
        {
          name: "home",
          icon: "search",
          label: "首页"
        },
        {
          name: "contrast",
          icon: "pk",
          label: "对比"
        },
        {
          name: "website",
          icon: "website",
          label: "官网"
        },
        {
          name: "content",
          icon: "resource",
          label: "推广包"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      pkList: state => state.dinkle.pkList
    })
  },
  watch: {},
  filters: {
    fmtTabIcon(item, tab) {
      const icon = item.name == tab ? `${item.icon}-select` : item.icon;
      return `img:http://alading-20210318.oss-cn-shanghai.aliyuncs.com/assets/${icon}.png`;
    }
  },
  created() {},
  mounted() {
    window.webH = this.$refs.tabBar.$el.clientHeight;
  },
  methods: {}
};
</script>

<style scoped lang="stylus">
.main
  max-width 1080px
>>> .q-tab__icon
  width 38px
  height 38px
  margin -10px
</style>
