<template>
  <div class="mch-tool-bar tc flex-between">
    <Tooltip content="切换底图" placement="top" v-if="enableBmapSwitch">
      <div class="bmap-switch" :class="bmapType" @click="bmapChage"></div>
    </Tooltip>
    <!-- 对比模式下不支持切换到3D -->
    <div class="btn-switch flex-around" v-if="enableViewModeSwitch">
      <div class="btn-item cursor tc" :class="{active:mapViewMode===item.name}" @click="viewModeChange(item)" :title="item.name" v-for="item in viewModes" :key="item.name">
        <Icon :custom="`iconfont ${item.icon}`" size="20"/>
      </div>
    </div>
    <div class="interaction tc btn-circle flex-between">
      <Tooltip content="地图快照" placement="top">
        <div class="btn-item" @click="clickTool('screenshot')">
          <Icon custom="iconfont icon-camera" size="20"/>
        </div>
      </Tooltip>
      <Tooltip content="地图复位" placement="top">
        <div class="btn-item" @click="clickTool('reset')">
          <Icon custom="iconfont icon-fullscreen" size="20"/>
        </div>
      </Tooltip>
      <!-- <Tooltip content="地图锁定/解锁" placement="top">
        <div class="btn-item" :class="{active:locked}" @click="clickTool('lock')">
          <Icon :type="locked?'md-lock':'md-unlock'" size="20"/>
        </div>
      </Tooltip> -->
      <Tooltip content="地图放大" placement="top">
        <div class="btn-item" @click="clickTool('zoomin')">
          <Icon custom="iconfont icon-zoom_in" size="20"/>
        </div>
      </Tooltip>
      <Tooltip content="地图缩小" placement="top">
        <div class="btn-item" style="border-right: none;" @click="clickTool('zoomout')">
          <Icon custom="iconfont icon-zoom_out" size="20"/>
        </div>
      </Tooltip>
    </div>
  </div>
</template>

<script>
import {mapViewModes} from '@mapcatch/util'

export default {
  props: {
    enableBmapSwitch: {
      type: Boolean,
      default: true
    },
    bmapType: {
      type: String,
      default: 'vector_standard'
    },
    enableViewModeSwitch: {
      type: Boolean,
      default: false
    },
    mapViewMode: {
      type: String,
      default: '2d'
    }
  },
  methods: {
    bmapChage () {
      this.$emit('on-bmap')
    },
    viewModeChange(item) {
      this.$emit('on-viewmode', item.name)
    },
    clickTool(type) {
      this.$emit('on-tool', type)
    }
  },
  data() {
    return {
      viewModes: mapViewModes
    }
  }
}
</script>
