<template>
  <div id="title" ref="title">
    <span class="moment date">{{$moment().format('LL')}}</span>
    <span class="moment time">{{time}}</span>
    <img :src="bgImg" draggable="false"/>
    <img class="arrow" :src="arrowImg" draggable="false"/>
    <p><slot /></p>
  </div>
</template>

<script>
const titleBg = require('@/assets/images/title-bg.png')
const titleArrow = require('@/assets/images/title-arrow.png')
export default {
  name: 'ThemeTitle',
  data() {
    return {
      bgImg: titleBg,
      arrowImg: titleArrow,
      timer: null,
      time: null,
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="stylus" scoped>
#title
  display flex
  align-items center
  justify-content center
  position relative
  background-size cover
  background-position center
  font-family $font-pang
  .moment
    position absolute
    font-size 1.2rem
    color #fff
    &.date
      left 20%
      top 34%
    &.time
      right 20%
      top 34%
  >img
    position absolute
    width 100%
    height 130%
    top 0
    left 0
    &.arrow
      width 3rem
      height 2rem
      left 0
      right 0
      margin auto
      top 120%
  >p
    font-size 2.8rem
    margin-top 1rem
    text-shadow 0 0.2rem 0.4rem #25e7f6
    background-clip text
    -webkit-background-clip text
    color #25e7f6
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #fff, #25e7f6)
</style>
