<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: 0,
      list: [
        // {name: '浦东新区'},
        {name: '南码头街道'},
        {name: '临沂二村'},
        {name: '申江豪城'},
        {name: '陆家嘴街道'},
        {name: '潍坊新村街道'},
        {name: '周家渡街道'},
        {name: '塘桥街道'},
        {name: '上港新村街道'},
        {name: '沪东新村街道'},
        {name: '金杨新村街道'},
        // {name: '洋泾街道'},
      ]
    }
  },
  mounted() {
    const {name} = this.$route
    if (name === 'linyiercun') {
      this.curIndex = 1
    } else if (name === 'shenjianghaocheng') {
      this.curIndex = 2
    }
  },
  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 #fff
  // font-weight bold
  background $cardBg
  left 26%
  top 6rem
  border 0.1rem solid $color-map()
  .edge
    position absolute
    width 1.4rem
    height 1.4rem
    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 rgba(0,0,0,0.5)
      >p
        margin-left 0
        img
          display inline-block
          width 1.2rem
          margin-right .8rem
    >p
      margin-left 2rem
      img
        display none
</style>

