<template>
  <div class="my-title">
    <div class="date">
      <span>{{ date }}</span>
      <span>{{ time }}</span>
    </div>
    <div v-if="curView.type === 'street'" class="btn-container">
      <div
        v-for="btn in btns"
        :key="btn.name"
        :class="{ on: btn.type === curBtn }"
        @click="handleThemeSelect(btn.type)"
      >
        <p>{{ btn.name }}</p>
      </div>
    </div>
    <h1><slot />{{ curView.name.includes('工作站') ? curView.name : '' }}</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'MyTitle',
  displayName: 'm-title',
  setup() {
    const date = ref(getDate())
    const time = ref('')
    const timer = ref<number | null>(null)
    const btns = ref([
      {
        name: '公共管理',
        type: 'manage',
      },
      {
        name: '公共服务',
        type: 'service',
      },
      {
        name: '公共安全',
        type: 'safety',
      },
    ])
    const curBtn = computed(() => store.state.curTheme)
    const curView = computed(() => store.state.curView)
    const handleThemeSelect = (type: string) => {
      if (curBtn.value === type) return
      store.commit('SET_CURRENT_THEME', type)

      // 切换主题时重置地图点位类型使其重新撒点
      store.commit('SET_POINT_TYPE', null)
      store.commit('SET_CHECKED_KEYS', null)
    }
    timer.value = setInterval(() => {
      time.value = getTime()
    })
    onBeforeUnmount(() => {
      clearInterval(Number(timer))
      timer.value = null
    })
    return {
      date,
      time,
      timer,
      btns,
      curBtn,
      curView,
      handleThemeSelect,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-title
  $full()
  $center()
  justify-content flex-start
  position relative
  font-weight bold
  background url('@/assets/images/title-bg2.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%
  .btn-container
    z-index 2
    display flex
    position absolute
    left 30%
    color #ccc
    >div
      $center()
      padding .02rem .18rem
      box-sizing border-box
      margin-left .1rem
      cursor pointer
      color $blue
      border .01rem solid @color
      transform skew(-45deg)
      opacity .6
      transition all .3s ease
      &:hover
      &.on
        color $yellow
        border-color @color
        opacity 1
      p
        transform skew(45deg)
</style>
