<template>
  <div>
    <div v-if="!$route.meta.hidden">
      <div class="mainC">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </div>
    </div>
    <div v-else>
      <div class="mains">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </div>
      <div class="foot">
        <ul class="footer">
          <router-link tag="li" active-class="active" to="/homePage">
            <van-icon name="home-o" />
            <span>首页</span>
          </router-link>
          <!-- <router-link tag="li" active-class="active" to="/backlog">
            <van-icon name="apps-o" />
            <span>待办事项</span>
          </router-link> -->
          <router-link tag="li" active-class="active" to="/home">
            <van-icon name="wap-home-o" />
            <span>工作台</span>
          </router-link>
          <router-link
            tag="li"
            active-class="active"
            to="/news"
            style="position: relative;"
          >
            <span v-if="this.num.num" class="num">{{ this.num.num }}</span>
            <van-icon name="chat-o" />
            <span>消息</span>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { baseApi } from '@/config'

import { userMessageList } from '@/api/new'
export default {
  name: 'VueCli4VantIndex',
  watch: {
    $route: {
      deep: true,
      handler (old, value) {
        console.log(old, sessionStorage.getItem('token'))
        if (
          old.params.nfccode &&
          (old.params.nfccode !== value.params.nfccode)
        ) {
          if (old.name === 'login' ||
          sessionStorage.getItem('token')) {
            this.$notify({
              type: 'danger',
              message: '请先登陆后进行打卡！',
              duration: 1500
            })
          }
        }
      }
    }
  },
  data () {
    return {
      bubble: {},
      information: '',
      tabIndex: true,
      noReadTotal: 0,
      timeIn: null
    }
  },
  computed: {
    ...mapState('login', ['user']),
    ...mapState('num', ['num'])
  },
  mounted () {
  },
  updated () {},
  beforeDestroy () {
    console.log(111)
    clearInterval(this.timeIn)
  },
  methods: {
    userMessageList () {
      userMessageList().then(({ data }) => {
        this.$store.dispatch('num/getNum', {
          num: data.noReadTotal
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tabbar {
  height: 50px !important;
}
.active {
  color: #fff !important;
  font-weight: 900;
  font-size: 30px !important;
}
.num {
  position: absolute;
  right: 28px;
  top: -5px;
  background: red;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  z-index: 9999;
}
.mains {
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.mainC {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
// .main1 {
//   width: 100%;
//   height: 100%;
// }
.foot {
  width: 100%;
  height: 60px;
  border-top: 1px solid #ccc;
  z-index: 9999;
  background: #1c4990;

  .footer {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      width: 30%;
      color: #9fbbc7;
      // width: 25%;
      display: flex;
      flex-direction: column;
      font-size: 27px;
      span {
        font-size: 10px;
      }
    }
  }
}
</style>
