<template>
  <div class="modelRef">
    <a-modal
      v-bind="getBindValue"
      :bodyStyle="{ background: '#233741', color: '#fff' }"
      destroyOnClose
      :width="860"
      wrapClassName="cu-map-modal"
      :getContainer="getContainer"
    >
      <template #closeIcon>
        <img
          class="w-22px h-22px inline text-0"
          src="../../assets/images/model-close-icon.png"
          alt=""
          srcset=""
        />
      </template>
      <div class="w-full mt-30px">
        <DXCY v-if="leftType == 'DXCY'" width="810px" height="600px" />
        <DXLX v-if="leftType == 'DXLX'" width="810px" height="600px" />
        <DZWZ v-if="leftType == 'DZWZ'" width="810px" height="600px" />
        <DXJGWEEK v-if="leftType == 'DXJG'" width="810px" height="600px" />
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { Modal } from 'ant-design-vue'
  import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
  import DXCY from './components/DXCY.vue'
  import DXLX from './components/DXLX.vue'
  import DZWZ from './components/DZWZ.vue'
  import DXJGWEEK from './components/DXJGWEEK.vue'
  export default defineComponent({
    components: {
      [Modal.name]: Modal,
      DXCY,
      DZWZ,
      DXLX,
      DXJGWEEK,
    },
    props: {
      visible: {
        type: Boolean,
      },
      type: {
        type: String,
        default: '',
      },
    },
    setup(props, { attrs }) {
      const modelVisible = ref(false)

      const leftType = computed(() => props.type)

      const getContainer = () => {
        if (document.body.clientWidth < 3000) return document.body
        return document.body.querySelector(`.modelRef`)
      }

      const getBindValue = computed(() => {
        const attr = {
          ...attrs,
          ...unref(props),
          visible: unref(modelVisible),
          maskClosable: false,
        }
        return attr
      })

      watchEffect(() => {
        modelVisible.value = !!props.visible
      })

      return {
        leftType,
        getContainer,
        getBindValue,
        modelVisible,
      }
    },
  })
</script>

<style lang="less">
  .cu-map-modal {
    .ant-modal {
      top: 30px;
    }
  }
</style>
