<template>
  <div
    class="mv-map-menu-container"
    :class="menuConfig.className ? menuConfig.className : ''"
  >
    <!-- 地图顶部图标 -->
    <div class="icon-top-box">
      <mv-map-icon
        v-for="(item, index) in menuConfig.topConfig"
        :key="index"
        :ref="item.type || item"
        @layer-click="layerClick"
        @point-click="pointClick"
        @load-layer="loadLayer"
        @query-callback="queryCallback"
        :iconConfig="
          item.constructor === String
            ? { tooltipPostiton: 'bottom', type: item }
            : { tooltipPostiton: 'bottom', ...item }
        "
      ></mv-map-icon>
    </div>
    <!-- 图标菜单 -->
    <div v-if="menuShow" class="menu-box">
      <div
        class="menu"
        :style="{
          width: menuConfig.menuWidth || '2.5vw',
          height: menuConfig.menuHeight || '2.5vw',
        }"
      >
        <img
          v-if="menuImg"
          :src="show ? menuImg[0] : menuImg[1]"
          @click="show = !show"
        />
        <!-- 地图左侧图标 -->
        <div class="icon-left-box" v-show="show">
          <mv-map-icon
            v-for="(item, index) in menuConfig.leftConfig"
            :key="index"
            :ref="item.type || item"
            @layer-click="layerClick"
            @point-click="pointClick"
            @load-layer="loadLayer"
            @query-callback="queryCallback"
            :iconConfig="item"
          ></mv-map-icon>
        </div>
        <!-- 地图底部图标 -->
        <div class="icon-bottom-box" v-show="show">
          <mv-map-icon
            v-for="(item, index) in menuConfig.bottomConfig"
            :key="index"
            :ref="item.type || item"
            @layer-click="layerClick"
            @point-click="pointClick"
            @load-layer="loadLayer"
            @query-callback="queryCallback"
            :iconConfig="item"
          ></mv-map-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defaultMenuConfig } from "../lib/config/business-config"
import { getThemeConfig } from '../lib/theme/index'
/**
* 业务组件 - 图标菜单
* @author 朱琦（1972662943@qq.com）
* @date   时间：2022/1/24
*/
export default {
  name: 'MvMapMenu',
  props: {
    menuConfig: {
      type: Object,
      default: () => { return defaultMenuConfig }
    }
  },
  data () {
    return {
      show: true,
      menuImg: null
    }
  },
  inject: ['mapConfigure'],
  watch: {
    'mapConfigure.mapLoadFinish': {
      handler(v) {
        v && this.init()
      },
      deep: true
    },
    'mapConfigure.theme': {
      handler(v) {
        v && this.setTheme(v)
      },
      deep: true
    }
  },
  computed: {
    menuShow () {
      return (this.menuConfig.leftConfig && this.menuConfig.leftConfig.length) || (this.menuConfig.bottomConfig && this.menuConfig.bottomConfig.length)
    },
  },
  created () {

  },
  methods: {
    /**
     * 初始化
     */
    init () {
      this.getMenuImg(this.mapConfigure.theme)
    },
    /**
     * 修改主题
     */
    setTheme (theme) {
      this.getMenuImg(theme)
    },
    getMenuImg (theme) {
      this.menuImg = getThemeConfig(theme).menuImg
    },
    /**
     * 地图point图层点击事件
     */
    layerClick (config, checked) {
      this.$emit('layer-click', config, checked)
    },

    /**
     * 图层接口调用状态回调
     * @param {String} status 
     */
    loadLayer (status, config) {
      this.$emit('load-layer', status, config)
    },

    /**
     * 地图点位 点击事件回调
     */
    pointClick (e, item, config) {
      this.$emit('point-click', e, item, config)
    },

    /**
     * 图层无model配置回调 
     */
    queryCallback (res, config) {
      this.$emit('query-callback', res, config)
    },
  }
}
</script>

<style scoped>
.mv-map-menu-container {
  position: absolute;
  height: 100%;
  width: 0;
  left: 0;
}
.mv-map-icon-container {
  margin-right: 12px;
}
.menu-box {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.menu-box .menu {
  position: relative;
  z-index: 111;
}
.menu-box .menu img {
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.icon-top-box {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
}

.icon-left-box {
  position: absolute;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
}
.icon-left-box .mv-map-icon-container {
  margin-bottom: 12px;
}
.icon-bottom-box {
  position: absolute;
  display: flex;
  align-items: center;
  left: 100%;
  bottom: 0;
  margin-left: 12px;
}
</style>
