<template>
  <div class="map-operate">
    <img class="bottom" src="@/assets/images/bottom.png" draggable="false"/>
    <div class="btn-list">
      <img
        v-for="btn in btns"
        :key="btn"
        :src="require(`@/assets/images/${btn}.png`)"
        :class="`${btn == curBtn ? 'on' : ''}`"
        @click="handleClick(btn)"
        draggable="false"
        />
    </div>
    <transition name="custom-classes-transition" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
      <SearchBar v-if="curBtn == 'search'" class="search-bar"/>
    </transition>
  </div>
</template>

<script>
import SearchBar from './search-bar'
export default {
  name: 'MapOperateBottom',
  components: {
    SearchBar,
  },
  data() {
    return {
      btns: [
        'plus',
        'minus',
        'full',
        'refresh',
        // 'search',
      ],
      curBtn: null,
    }
  },
  methods: {
    handleClick(btn) {
      if (btn == 'search') {
        this.curBtn = btn == this.curBtn ? null : btn
      }
      // TODO
    },
  }
}
</script>

<style lang="stylus" scoped>
.map-operate
  position relative
  >img
    position absolute
    width 18%
    &.bottom
      bottom 0
      left 0
      right 0
      width 100%
  .btn-list
    display flex
    justify-content space-around
    position absolute
    bottom 1rem
    width 30%
    left 0
    right 0
    margin 0 auto
    >img
      width 3rem
      cursor pointer
      transition all 0.3s
      &:hover
        transform scale(1.3)
      &.on
        transform scale(1.3)
        transform translate(0, -0.5rem)
  .search-bar
    position absolute
    bottom 80%
    width 50%
    left 0
    right 0
    margin 0 auto
</style>
