<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>
    <span v-if="!hideTime" class="moment time">{{time}}</span>
    <img :src="bgImg" draggable="false"/>
    <p :style="style">{{menus[curIndex].title}}</p>
    <div class="menu menu-left">
      <div @click="handleSelect(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
    </div>
    <div class="menu menu-right">
      <div @click="handleSelect(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
    </div>
  </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: '1.8rem',
    },
  },
  data() {
    return {
      openDatePicker: false,
      timer: null,
      time: null,
      style: {},
      curIndex: 0,
      menus: [
        {name: '病害防控', title: '病害防控大数据', path: '/disease'},
        {name: '质量安全', title: '水产品质量安全大数据', path: '/quality-safety'},
        {name: '稻鱼种养', title: '稻鱼综合种养分析', path: '/rice-fish'},
        {name: '海洋牧场', title: '海洋牧场分析', path: '/ocean-farm'},
        {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
        {name: '苗种'},
      ],
    }
  },
  mounted() {
    if (!this.hideTime) {
      this.timer = setInterval(() => {
        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 = {...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('LL') : this.$moment().format('LL')
    },
    options() {
      return {
        disabledDate: (date) => {
          return this.$moment(date).isAfter(this.$moment())
        }
      }
    }
  },
  methods: {
    handleDateChange(date) {
      this.$store.commit('SET_CURDATE', date)
      this.openDatePicker = false
    },
    handleSelect(item) {
      this.curIndex = this.menus.indexOf(item)
      if (item.path) {
        this.$router.push({path: item.path})
      }
    },
  },
  watch: {
    '$route': {
      handler(cur) {
        const {path} = cur
        if (path === '/') {
          this.curIndex = 0
        } else {
          this.curIndex = this.menus.findIndex(menu => path.startsWith(menu.path))
        }
      },
      immediate: true,
    }
  }
}
</script>

<style lang="stylus" scoped>
$color = #25e7f6
.monitor-title
  display flex
  align-items center
  justify-content center
  position relative
  background-size cover
  background-position center
  // font-family $font-pang
  height 4rem
  .menu
    position absolute
    display flex
    align-items center
    justify-content space-around
    color $color
    font-weight bold
    width 20%
    padding-top 1rem
    &.menu-left
      left 15%
    &.menu-right
      right 15%
    >div
      cursor pointer
      padding .3rem 1rem
      border .1rem solid transparent
      box-sizing content-box
      transform skew(30deg)
      >span
        display inline-block
        transform skew(-30deg)
      &:hover,
      &.on
        border-color $color
        background $color-map()
      &.on
        color #fff
  .moment
    z-index 100
    position absolute
    font-size 1.2rem
    color #fff
    width 15rem
    &.date
      left 20%
      top 50%
      transform translateY(-80%)
      cursor pointer
    &.time
      right 13%
      top 50%
      transform translateY(-80%)
  img
    position absolute
    width 110%
    height 100%
    top 0
    left -5%
  >p
    color $color
    z-index 9
    letter-spacing .1rem
    font-weight bold
</style>
