<template>
  <div class="monitor-title">
    <div class="info">
      <span>
        <img src="@/assets/images/temp.png"/><span>气温</span>
        28.6℃
      </span>
      <span>
        <img src="@/assets/images/humidity.png"/><span>湿度</span>
        55%
      </span>
      <span>
        <img src="@/assets/images/rain.png"/><span>降雨量</span>
        2mm
      </span>
      <span>
        <img src="@/assets/images/pm2.5.png"/><span>PM2.5</span>
        150mg/m³
      </span>
      <span class="time" v-if="!hideDate" @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 v-if="!hideTime">{{time}}</span>
      </span>
    </div>
    <img :src="bgImg" draggable="false"/>
    <p><slot /></p>
  </div>
</template>

<script>
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: '2.8rem',
    },
  },
  data() {
    return {
      openDatePicker: false,
      timer: null,
      time: null,
    }
  },
  mounted() {
    if (!this.hideTime) {
      this.timer = setInterval(() => {
        this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
      }, 1000)
    }
  },
  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
    },
  }
}
</script>

<style lang="stylus" scoped>
.monitor-title
  display flex
  align-items center
  justify-content center
  position relative
  background-size cover
  background-position center
  .info
    position absolute
    top .8rem
    right 0
    z-index 10
    display flex
    align-items center
    color #fff
    font-size .8rem
    >span
      display flex
      align-items center
      padding 0 .5rem
      font-family $font-din
      &+span
        border-left .1rem solid $light-blue
      &.time
        span
          color #fff
      img
        width 1rem
      span
        color $light-blue
        margin 0 .3rem

  >img
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    // animation shine 2.5s linear reverse infinite
  >p
    // text-shadow 0 0.2rem 0.4rem #25e7f6
    // background-clip text
    // -webkit-background-clip text
    color #fff
    z-index 10
    font-size 1.6rem
    font-weight bold
    // -webkit-text-fill-color transparent
    // background-image linear-gradient(to bottom, #fff, #25e7f6)
// @keyframes shine {
//   0% {
//     opacity 1
//   }
//   50% {
//     opacity 0.7
//   }
//   100% {
//     opacity 1
//   }
// }
</style>
