<template>
<m-animate enter="fadeInDown" leave="fadeOutUp">
  <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 in themeList"
      :key="theme.url"
      :class="`${theme.name == curTheme ? 'on' : ''}`"
      @click="handleThemeSelect(theme)">
      {{theme.name}}
    </p>
  </div>
</m-animate>
</template>

<script>
export default {
  name: 'MonitorMenu',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    themes: {
      type: Array,
      default() {
        return []
      }
    },
  },
  computed: {
    curTheme() {
      return document.title
    },
    defaultThemes() {
      let base = 'http://962121.net/hmfmstest'
      if (window.location.origin.indexOf('sh.gov') >= 0) {
        base = 'http://962121.fgj.sh.gov.cn/wyweb'
      }
      return [
        {name: '长桥四村智慧感知事件监控', url: null},
        {name: '物业督查实时专题图', url: base + '/shanghaiwuye/web/dataV/propertyinspector/#/'},
        {name: '新冠疫情隔离监控', url: base + '/shanghaiwuye/web/dataV/publicsafety/#/'},
      ]
    },
    themeList() {
      if (this.themes && this.themes.length > 0) return this.themes
      return this.defaultThemes
    }
  },
  methods: {
    closeMenu() {
      this.$emit('input', false)
    },
    handleThemeSelect({name, url}) {
      if (name == this.curTheme) return
      window.open(url, '_blank')
      this.closeMenu()
    }
  },
}
</script>

<style lang="stylus" scoped>
$theme-selected()
  position absolute
  display block
  content ''
  width 0
  height 0
  border 0.5rem solid $edgeColor
  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 $color-map(0.1)
  left 0
  right 0
  bottom 6rem
  margin auto
  border 0.1rem solid $color-map()
  >p
    font-size 1.2rem
    line-height 3rem
    cursor pointer
    position relative
    overflow hidden
    &:hover
      color $edgeColor
    &.on
      font-size 1.4rem
      color $edgeColor
      background $color-map(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 $edgeColor
    &.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>

