<template>
  <div class="linkmodel">
    <a-modal
      v-bind="getBindValue"
      :bodyStyle="{ background: '#233741', color: '#fff' }"
      :width="1200"
      destroyOnClose
      :getContainer="getContainer"
    >
      <template #closeIcon>
        <img
          class="w-22px h-22px inline text-0"
          src="../../assets/images/model-close-icon.png"
          alt=""
          srcset=""
        />
      </template>
      <div>
        <div class="relative -mt-6px h-30px flex items-center">
          <div
            class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
          >
            {{ title1 }}
          </div>
        </div>
        <div class="bg-[#1D2D35] mt-14px p-10px">
          <slot name="content"></slot>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
  import { Modal } from 'ant-design-vue'

  export default defineComponent({
    components: {
      [Modal.name]: Modal,
    },
    props: {
      title1: {
        type: String,
      },
      visible: {
        type: Boolean,
      },
    },
    setup(props, { attrs }) {
      const modelVisible = ref(false)

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

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

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

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

<style scoped></style>
