<template>
<m-animate enter="fadeInDown" leave="fadeOutLeft">
  <div class="street-menu" v-show="$store.state.showStreetMenu" @mouseleave="closeMenu">
    <div class="edge top-left" />
    <div class="edge top-right" />
    <div class="edge bottom-left" />
    <div class="edge bottom-right" />
    <div :class="`street-item ${curIndex == i ? 'on' : ''}`" v-for="(item, i) in list" :key="i" @click="handleSelect(i)">
      <p><img src="@/assets/images/street.png" />{{item.name}}</p>
    </div>
  </div>
</m-animate>
</template>

<script>
export default {
  name: 'StreetMenu',
  data() {
    return {
      curIndex: 1,
      list: [
        {name: '浦东新区'},
        {name: '南码头街道'},
        {name: '陆家嘴街道'},
        {name: '潍坊新村街道'},
        {name: '周家渡街道'},
        {name: '塘桥街道'},
        {name: '上港新村街道'},
        {name: '沪东新村街道'},
        {name: '金杨新村街道'},
        {name: '洋泾街道'},
      ]
    }
  },
  methods: {
    closeMenu() {
      this.$store.commit('SET_STREETMENU', false)
    },
    handleSelect(i) {
      this.curIndex = i
      this.$emit('select', this.curIndex, this.list[this.curIndex].name)
      this.closeMenu()
    }
  },
}
</script>

<style lang="stylus" scoped>
.street-menu
  font-family $font-din
  position fixed
  width 26rem
  padding 1rem
  color #ccc
  font-weight bold
  background $dark()
  left 26%
  top 4rem
  border 0.1rem solid $color-map()
  .edge
    position absolute
    width 2rem
    height 2rem
    border 0.2rem solid $color-blue
    &.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
  .street-item
    display inline-block
    width 50%
    height 3rem
    line-height @height
    text-align left
    padding 0 1rem
    cursor pointer
    &.on
      color $edgeColor
      background $color-map()
      >p
        margin-left 0
        img
          display inline-block
          width 1.2rem
          margin-right .8rem
    >p
      margin-left 2rem
      img
        display none
</style>

