<template>
  <div class="my-title">
    <img :src="bgImg" class="bg" />
    <div class="date">{{ date }} {{ time }}</div>
    <img
      src="@/assets/images/filter.png"
      class="filter"
      draggable="false"
      @click.prevent.stop="handleClick"
    />
    <h1><slot /></h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, PropType, ref } from 'vue'
import { getDate, getTime } from '../util'
import bgImg from '@/assets/images/title-bg.png'

export default defineComponent({
  name: 'MyTitle',
  displayName: 'm-title',
  props: {
    /** 背景图片 默认为title-bg.png */
    bgImg: {
      type: String as PropType<string>,
      default: bgImg,
    },
  },
  emits: ['touch'],
  setup(_, ctx) {
    const date = ref(getDate())
    const time = ref('')
    const timer = ref<NodeJS.Timer | null>(null)
    timer.value = setInterval(() => {
      time.value = getTime()
    })
    onBeforeUnmount(() => {
      clearInterval(Number(timer))
      timer.value = null
    })
    const handleClick = () => ctx.emit('touch')
    return {
      date,
      time,
      timer,
      handleClick,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-title
  $full()
  $center()
  position relative
  background-size cover
  background-position center
  height .4rem
  .date
    z-index 2
    position absolute
    top .12rem
    right 1%
    color #45F7EF
  .filter
    z-index 2
    position absolute
    top .08rem
    left 1%
    width .24rem
    height @width
    cursor pointer
    opacity .8
    transition opacity .2s ease-in-out
    &:hover
      opacity 1
  .bg
    position absolute
    $full()
    top 0
    left 0
  h1
    z-index 2
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #fff 40%, #0064d3)
    font-size .2rem
    letter-spacing .05rem
    font-family $font-pang
    font-weight normal
</style>
