<template>
  <div class="top_header">
    <header>
      <button class="fl iconfont back_icon" @click="goBack"></button>
      <div class="fl header-title">{{navTitle}}</div>
      <div class="fr date-box date-box_time">{{date}}&nbsp;{{week}}&nbsp;{{time}}</div>
    </header>
    <ul v-if="tabShow" class="tabs">
      <li v-for="i in nav" :key="i.index">
        <router-link :to="i.url" :class="{'router-link-active': i.url === $route.path}">{{i.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Assignment',
  props: {
    tabShow: {
      type: Boolean,
      default: true
    },
    inner: {
      type: Boolean,
      default: false
    },
    navTitle: String,
    nav: Array
  },
  data () {
    return {
      timer: null,
      time: '',
      date: '',
      week: ''
    }
  },
  mounted () {
    this.timer = window.setInterval(this.updateTime, 1000)
  },
  methods: {
    goBack () {
      if (this.inner) {
        this.$emit('goIn')
      } else {
        this.$router.push('/home')
      }
    },
    updateTime () {
      let cd = new Date()
      let year = cd.getFullYear()
      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let myddy = new Date().getDay()
      let week = weekday[myddy]
      this.time = `${hh}:${mm}:${ss}`
      this.date = `${year}年${month}月${date}日`
      this.week = `${week}`
    }
  }
}
</script>

<style lang="stylus" scoped>
.top_header
  div
    color #ffffff
  button
    color #ffffff
</style>
