<template>
  <div v-if="permission !== 'n'" class="ht-map">
    <mobile-map
      v-if="isMobile"
      v-model="mapValue"
      :append-position="appendPosition"
      :location-path="locationPath"
      :show-effect="showEffect"
      :model-name="modelName"
      :name="name"
      :display-style="displayStyle"
      :width-map="widthMap"
      :height-map="heightMap"
      :permission="permission"
    ></mobile-map>
    <map-pc
      v-else
      v-model="mapValue"
      :append-position="appendPosition"
      :location-path="locationPath"
      :show-effect="showEffect"
      :width-map="widthMap"
      :model-name="modelName"
      :name="name"
      :permission="permission"
      :display-style="displayStyle"
      :height-map="heightMap"
    ></map-pc>
  </div>
</template>

<script>
  import MapPc from './Map.vue'
  import MobileMap from './MobileMap.vue'
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'HtMap',
    components: {
      MapPc,
      MobileMap,
    },
    mixins: [permission, inputName, form, mobileMode],
    props: {
      value: String,
      appendPosition: {
        type: Boolean,
        default: false,
      },
      locationPath: String,
      showEffect: String, // dialog 弹出 tile 铺开
      widthMap: String,
      heightMap: String,
    },
    data() {
      return {
        mapValue: '',
      }
    },
    watch: {
      value: {
        handler(val) {
          if (val) {
            this.mapValue = val
          }
        },
        deep: true,
        immediate: true,
      },
      mapValue(val) {
        this.$emit('input', val)
      },
    },
    mounted() {
      if (this.isMobile) {
        this.addMobileTopLabelClass('mobile-map-form-item')
      }
    },
  }
</script>

<style lang="scss" scoped></style>
