<template>
  <div class="header" @click.stop>
    <div class="title">设备运维态势大屏</div>

    <div class="month-select">
      <div class="value" @click.stop="toggle">
        {{ displayMonth }}
      </div>

      <ul v-if="open" class="dropdown">
        <li
          v-for="m in monthList"
          :key="m"
          @click.stop="select(m)">
          {{ format(m) }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const now = new Date()
    const cur = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`

    return {
      open: false,
      current: cur
    }
  },
  computed: {
    monthList() {
      // 最近 12 个月
      const list = []
      const now = new Date()
      for (let i = 0; i < 12; i++) {
        const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
        list.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`)
      }
      return list
    },
    displayMonth() {
      return this.format(this.current)
    }
  },
  mounted() {
    // 默认通知父组件
    this.$emit('change', this.current)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.close)
  },
  methods: {
    toggle() {
      this.open = !this.open
    },
    select(m) {
      this.current = m
      this.open = false
      this.$emit('change', m)
    },
    format(m) {
      const [y, mo] = m.split('-')
      return `${y}年${mo}月`
    },
    close() {
      this.open = false
    }
  }
}

</script>

<style scoped>
.header {
  height: 80px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 100;

  /* 背景底座 */
  background: linear-gradient(
    180deg,
    rgba(0,160,255,0.35),
    rgba(0,160,255,0.08)
  );
  border: 1px solid rgba(79,210,255,0.6);
  border-radius: 10px;

  /* 科技感阴影 */
  box-shadow:
    inset 0 0 18px rgba(79,210,255,0.35),
    0 0 28px rgba(0,160,255,0.25);
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-size: 30px;
  font-weight: 600;
  letter-spacing: 6px;
  color: #e6f7ff;

  padding: 14px 48px;
  white-space: nowrap;

  /* 发光文字 */
  text-shadow:
    0 0 6px rgba(79,210,255,0.9),
    0 0 20px rgba(79,210,255,0.4);
}
/*.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 60%;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    #00eaff,
    transparent
  );
}*/

.month-select {
  position: absolute;
  right: 5%;
  color: #9fdfff;
  font-size: 16px;
  opacity: 0.85;
}

.month-select .value {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid rgba(79,210,255,.4);
  border-radius: 6px;
  background: rgba(0,160,255,.15);
}

.dropdown {
  position: absolute;
  right: 0;
  top: 38px;
  width: 120px;
  background: #0b284b;
  border: 1px solid rgba(79,210,255,.4);
  border-radius: 6px;
  z-index: 999;
}

.dropdown li {
  padding: 8px 12px;
  cursor: pointer;
}
.dropdown li:hover {
  background: rgba(79,210,255,.2);
}
</style>
