<template>
<m-trans enter="fadeIn" leave="fadeOut">
  <div class="map-operate">
    <img class="top-left" src="@/assets/images/top-left.png" draggable="false"/>
    <img class="top-right" src="@/assets/images/top-right.png" draggable="false"/>
    <div class="map-menu">
      <img class="menu-btn" src="@/assets/images/list-btn.png" draggable="false"/>
      <div class="menu">
        <div
          v-for="item in mapTypes"
          :key="item"
          :class="`${item == curMapType ? 'on' : ''}`"
          @click="choiceMapType(item)"
          >
          {{item}}
        </div>
      </div>
    </div>
  </div>
</m-trans>
</template>

<script>
export default {
  name: 'MapOperateTop',
  data() {
    return {
      mapTypes: ['暗色地图', '政务地图', '航空影像', '2.5维地图', '简易地形图'],
      curMapType: '暗色地图',
    }
  },
  methods: {
    choiceMapType(type) {
      this.curMapType = type
    },
  }
}
</script>

<style lang="stylus" scoped>
$theme-selected()
  content ''
  display block
  position absolute
  top 1rem
  transform rotate(45deg)
  width 0
  height 0
  border 0.5rem solid $edgeColor
.map-operate
  position relative
  height 0
  .map-menu
    position absolute
    top 1rem
    right 1rem
    &:hover
      >.menu
        display block
    .menu-btn
      width 2rem
      cursor pointer
      position absolute
      right 0
      padding-bottom 1rem
    .menu
      position absolute
      top 2rem
      right 0
      width 10rem
      padding 0.5rem
      border 0.1rem solid $color-map(0.5)
      margin-top 0.5rem
      background $color-map(0.2)
      display none
      >div
        cursor pointer
        color #fff
        text-align center
        line-height 2rem
        &:hover
          background $color-map()
        &.on
          background $color-map()
          color $edgeColor
  >img
    position absolute
    width 18%
    &.top-left
      top 0
      left 0
    &.top-right
      top 0
      right 0
</style>
