<template>
<m-animate enter="fadeInUp" leave="fadeOutDown">
  <div class="theme-menu" v-show="value" @mouseleave="closeMenu">
    <div class="edge top-left" />
    <div class="edge top-right" />
    <div class="edge bottom-left" />
    <div class="edge bottom-right" />
    <p
      v-for="(theme, i) in themeList"
      :key="i"
      :class="`${i == curTheme ? 'on' : ''}`"
      @click="handleThemeSelect(i)">
      {{theme.name}}
    </p>
  </div>
</m-animate>
</template>

<script>
export default {
  name: 'MonitorMenu',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    themes: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {
      curTheme: 0,
    }
  },
  computed: {
    defaultThemes() {
      return [
        {name: '防汛防台'},
        {name: '突发公共卫生事件'},
        {name: '自然灾害'},
        {name: '火灾、爆炸'},
      ]
    },
    themeList() {
      if (this.themes && this.themes.length > 0) return this.themes
      return this.defaultThemes
    }
  },
  methods: {
    closeMenu() {
      this.$emit('input', false)
    },
    handleThemeSelect(i) {
      this.curTheme = i
      this.closeMenu()
    }
  },
}
</script>

<style lang="stylus" scoped>
$yellow = rgba(255, 165, 0, 0.7)
$bg = rgba(150, 135, 5, 0.7)
$theme-selected()
  position absolute
  display block
  content ''
  width 0
  height 0
  border 0.5rem solid $yellow
  top 1rem
  transform rotate(45deg)
.theme-menu
  // font-family $font-din
  position absolute
  // min-height 10rem
  width 26rem
  padding 1rem
  text-align center
  color #ccc
  font-weight bold
  background rgba(150, 135, 5, 0.1)
  left 0
  right 0
  top 7rem
  margin auto
  border 0.1rem solid rgba(150, 135, 5, 0.3)
  >p
    font-size 1.2rem
    line-height 3rem
    cursor pointer
    position relative
    overflow hidden
    &:hover
      color gold
    &.on
      font-size 1.4rem
      color gold
      background rgba(150, 135, 5, 0.2)
      &:before
        $theme-selected()
        margin-left -0.5rem
        border-left-color transparent
        border-bottom-color transparent
      &:after
        $theme-selected()
        right 0
        margin-right -0.5rem
        border-right-color transparent
        border-top-color transparent
  .edge
    position absolute
    width 2rem
    height 2rem
    border 0.3rem solid $yellow
    &.top-left
      top -0.1rem
      left -0.1rem
      border-right none
      border-bottom none
    &.top-right
      top -0.1rem
      right -0.1rem
      border-left none
      border-bottom none
    &.bottom-left
      bottom -0.1rem
      left -0.1rem
      border-right none
      border-top none
    &.bottom-right
      bottom -0.1rem
      right -0.1rem
      border-left none
      border-top none
</style>

