<template>
  <div class="monitor-title">
    <!-- <span v-if="!hideDate" class="moment date" @mouseenter="openDatePicker = true" @mouseleave="openDatePicker = false">
      <DatePicker @on-change="handleDateChange" :value="curDate" :options="options" class="date-picker" :open="editable && openDatePicker" type="date">
        <span>{{curDate}}</span>
      </DatePicker>
    </span> -->
    <!-- <div class="btn back" @click="closePage" />
    <div class="btn close" @click="closePage" />
    <div class="slogan left">
      <span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span>
    </div>
    <div class="slogan right">
      <span v-for="(word, i) in slogan[1]" :key="i+word">{{word}}</span>
    </div>
    <div class="duty">
      今日值班：
      <p>{{masters[0]}}<img src="@/assets/images/phone.png" /></p>
      <p>{{masters[1]}}<img src="@/assets/images/phone.png" /></p>
    </div> -->
    <span v-if="!hideTime" class="moment time">
      <!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> -->
      {{curDate}} {{time}}
    </span>
    <img class="bg" :src="bgImg" draggable="false"/>
    <p :style="style"><slot /></p>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  name: 'MonitorTitle',
  props: {
    bgImg: {
      type: String,
    },
    hideDate: {
      type: Boolean,
      default: false,
    },
    hideTime: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
    },
    size: {
      type: String,
      default: '0.2rem',
    },
  },
  data() {
    return {
      openDatePicker: false,
      timer: null,
      time: null,
      style: {},
    }
  },
  mounted() {
    if (!this.hideTime) {
      this.timer = setInterval(() => {
        this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
      }, 1000)
    }
    // this.getWeather()
    this.style = {...this.style, 'font-size': this.size}
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  computed: {
    curDate() {
      const date = this.$store.state.curDate
      return date ? this.$moment(date).format('YYYY-MM-DD') : this.$moment().format('YYYY-MM-DD')
    },
    options() {
      return {
        disabledDate: (date) => {
          return this.$moment(date).isAfter(this.$moment())
        }
      }
    },
  },
  methods: {
    handleDateChange(date) {
      this.$store.commit('SET_CURDATE', date)
      this.openDatePicker = false
    },
    // toAli() {
    //   window.location = 'http://10.89.1.208/share/ypdp'
    // },
    closePage() {
      window.close()
    },
    // getWeather() {
    //   axios.get('https://tianqiapi.com/api?version=v6&appid=27325769&appsecret=k2G7Q7bA&city=杨浦&vue=1'
    //   ).then(res => {
    //     this.weather = res.data
    //     console.log(this.weather)
    //   })
    // },
  }
}
</script>

<style lang="stylus" scoped>
.monitor-title
  display flex
  align-items center
  justify-content center
  position relative
  background-size cover
  background-position center
  // font-family $font-pang
  font-weight bold
  // >.btn
  //   display block
  //   position absolute
  //   width .2rem
  //   height @width
  //   top .05rem
  //   cursor pointer
  //   z-index 999
  //   background-size 100% 100%
  //   transition background-image .3s ease-in-out
  //   &.back
  //     left .1rem
  //     background-image url(../../../assets/images/back.png)
  //     &:hover
  //       background-image url(../../../assets/images/back-on.png)
  //   &.close
  //     right .1rem
  //     background-image url(../../../assets/images/close.png)
  //     &:hover
  //       background-image url(../../../assets/images/close-on.png)
  // .slogan
  //   display flex
  //   justify-content space-around
  //   align-items center
  //   width 15%
  //   position absolute
  //   top .05rem
  //   z-index: 2;
  //   &.left
  //     left 20%
  //   &.right
  //     right 20%
  //   span
  //     $flex-center()
  //     width .2rem
  //     height @width
  //     background rgba(2,68,147,.8)
  //     border-radius 50%
  //     font-family $font-pang
  //     font-size .14rem
  //     font-weight normal
  // .switch
  //   color #5BD5FF
  //   margin-right .1rem
  //   cursor pointer
  //   img
  //     width .12rem
  //     vertical-align middle
  .moment
    z-index 9
    position absolute
    top .07rem
    left 3%
  .duty
    display flex
    align-items center
    z-index 9
    position absolute
    top .07rem
    right 3%
    p
      color $color-yellow
      margin 0 .05rem
    img
      width .08rem
      height @width
      margin-left .05rem
  >.bg
    position absolute
    width 100%
    height 100%
    top 0
    left 0
  >p
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #fff, #B3EBFF)
    z-index 99
    letter-spacing .05rem
</style>
