<template>
  <div class="monitor-title">
    <span v-if="weather" class="weather">
      {{weather.weather}} {{weather.temperature}}℃ {{weather.winddirection}}风{{weather.windpower}}级 空气湿度:{{weather.humidity}}%
    </span>
    <span v-if="!hideDate" class="moment date" @mouseenter="returnopenDatePicker = 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>
    <span v-if="!hideTime" class="moment time">{{time}}</span>
    <img :src="bgImg" draggable="false" :style="imgStyle"/>
    <p :style="style" @click="openAdmin"><slot /></p>
  </div>
</template>

<script>
export default {
  name: 'MonitorTitle',
  props: {
    imgStyle: {},
    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: '1.9rem',
    },
  },
  data() {
    return {
      openDatePicker: false,
      timer: null,
      time: null,
      style: {},
      weather: null,
    }
  },
  mounted() {
    if (!this.hideTime) {
      this.timer = setInterval(() => {
        // this.time = `${this.$moment().format('LTS')}`
        this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
      }, 1000)
    }
    // if (this.color) {
    //   this.style = {
    //     'text-shadow': `0 0.2rem 0.4rem ${this.color}`,
    //     'color': this.color,
    //     'background-image': `linear-gradient(to bottom, #fff, ${this.color})`,
    //   }
    // }
    this.style = {'font-size': this.size}
    this.getWeather()
  },
  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: {
    openAdmin() {
      window.open('http://211.136.105.193/login')
    },
    handleDateChange(date) {
      this.$store.commit('SET_CURDATE', date)
      this.openDatePicker = false
    },
    getWeather() {
      this.$ajax.get({
        url: 'https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=d265f590c2efc5b9816c64f9ad553678',
      }).then(res => {
        this.weather = res.lives[0]
      })
    },
  }
}
</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 $hei
  .weather
    z-index 100
    position absolute
    font-size 1.2rem
    left 0
    top 10%
  .moment
    z-index 100
    position absolute
    font-size 1.4rem
    color #fff
    width 15rem
    top 10%
    &.date
      right 4%
      cursor pointer
    &.time
      right -4%
  img
    position absolute
    width 100%
    height 140%
    top 0
    left 0
    // animation shine 2.5s linear reverse infinite
  >p
    z-index 1
    font-weight bold
    padding-bottom 1rem
    // text-shadow 0 0.2rem 0.4rem #25e7f6
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    // background-image linear-gradient(to bottom, #02C4FF, #02C4FF 50%, #f5f5f5 50%, #f5f5f5 100%)
    background-image linear-gradient(to bottom, #02C4FF, #02C4FF 20%, #7DDDFA 40%, #fff 60%, #fff 100%)
    transform translateY(10%)
@keyframes shine {
  0% {
    opacity 1
  }
  50% {
    opacity 0.7
  }
  100% {
    opacity 1
  }
}
</style>
