<template>
  <div
    v-show="visible"
    class="mv-map-dialog-container"
    :class="[this.theme, className]"
    :style="{
      width: dialogSize[0],
      height: dialogSize[1],
      background: dialogBackground,
    }"
  >
    <!-- top -->
    <div class="mv-map-dialog-top">
      <slot name="title">
        <p class="mv-map-dialog-title" :title="title">{{ title }}</p>
      </slot>
      <div class="mv-map-dialog-close" @click="closeDialog" v-show="showClose">
        <slot name="close">
          <svg
            class="mv-map-dialog-close-svg"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2040"
          >
            <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              p-id="2041"
            ></path>
          </svg>
        </slot>
      </div>
    </div>
    <!-- content -->
    <div class="mv-map-dialog-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { getThemeConfig } from '../lib/theme'
export default {
  /**
   * @description     地图信息窗体
   * @author          刘晖(liuh@microvideo.cn)
   * @time            2021/11/22 9:18
   */
  name: "MvMapDialog",
  props: {
    showClose: {
      type: Boolean,
      default: () => true
    },
    title: {
      type: String,
      default: '信息'
    },
    isCustom: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogSize: ['5vw', '10vh'],
      windowInfoCase: null,
      closeImg: null,
      dialogBackground: '',
      visible: false,
      className: null,
    }
  },
  inject: ['mapConfigure'],
  watch: {
    'mapConfigure.mapLoadFinish': {
      handler(v) {
        v && this.init()
      },
      deep: true
    },
    'mapConfigure.theme': {
      handler(v) {
        if (!this.mapConfigure.mapLoadFinish) return
        v && this.setTheme(v)
      },
      deep: true
    },
  },
  computed: {
    mapId () {
      return this.mapConfigure.mapId
    },
    theme () {
      return this.mapConfigure.theme || ''
    }
  },
  methods: {
    /**
     * 初始化
     */
    init () {
      this.setThemeConfig(this.theme)
    },
    /**
     * 修改主题
     */
    setTheme (theme) {
      this.setThemeConfig(theme)
    },
    /**
     * 获取主题配置
     */
    setThemeConfig (theme) {
      const styleConfig = getThemeConfig(theme).styleConfig

      this.closeImg = styleConfig.iconClose
      this.dialogBackground = styleConfig.background
    },

    /**
     * 显示弹框
     * @param lngLat 弹框显示位置 - [Float,Float]
     * @param offset 偏移量 - [Int,Int]
     * @param size 弹框尺寸 - [String,String]
     * @param className 弹框class 默认主题class
     */
    openDialog (size = ['5vw', '10vh'], lngLat, offset, className) {
      this.visible = true
      this.dialogSize = size
      this.className = className
      this.windowInfoCase = this.$mapSdk(this.mapId).createMvMapWindowInfo({
        path: lngLat,
        content: this.$el,
        offset: offset || [15, 0]
      }, true)
    },

    /**
     * 关闭弹框
     */
    closeDialog () {
      this.visible = false
      if (this.windowInfoCase)
        this.windowInfoCase.close()
      this.$emit('close')
    }
  },
}
</script>

<style scoped>
.mv-map-dialog-container {
  padding: 0.8em;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.mv-map-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8em;
  flex-shrink: 0;
}

.mv-map-dialog-title {
  margin: 0;
  padding-right: 4px;
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-map-dialog-close {
  cursor: pointer;
  fill: currentColor;
  flex-shrink: 0;
}
.mv-map-dialog-close-svg {
  width: 1em;
  height: 1em;
}
.mv-map-dialog-content {
  flex: 1;
  overflow: hidden;
}

/* 主题样式 */
.dark {
  border: 2px solid #00d2f1;
  box-shadow: 0 0 5px #00d2f1;
  color: #00d2f1;
  background: rgba(4, 1, 25, 1);
}
.dark .mv-map-dialog-title {
  background-image: linear-gradient(0deg, #0078ff 0%, #43fff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.light {
  border: 2px solid #6faefa;
  box-shadow: 0 0 5px #6faefa;
  color: #6faefa;
  background: rgb(255, 255, 255);
}
.light .mv-map-dialog-title {
  background-image: linear-gradient(0deg, #3c70ef 0%, #7fb8fd 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>
