<template>
  <div class="my-title">
    <div class="date">
      <span>{{ date }}</span>
      <span>{{ time }}</span>
    </div>
    <h1><slot /></h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, ref } from 'vue'
import { getDate, getTime } from '@/components/MyComponent/util'

export default defineComponent({
  name: 'MyTitle',
  setup() {
    const date = ref(getDate())
    const time = ref('')
    const timer = ref<number | null>(null)
    timer.value = setInterval(() => {
      time.value = getTime()
    })
    onBeforeUnmount(() => {
      clearInterval(Number(timer))
      timer.value = null
    })
    return {
      date,
      time,
      timer,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.my-title
  $full()
  $center()
  justify-content flex-start
  position relative
  font-weight bold
  background url('@/assets/images/title-bg.png') center / cover no-repeat
  z-index 1
  .date
    z-index 2
    position absolute
    right 1%
    span
      display block
      text-align right
  h1
    font-family $font-pang
    width 18%
    text-align center
    z-index 2
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #fff, #00C7FF)
    font-size .22rem
    letter-spacing .05rem
    margin-top 0.5%
</style>
