import { defineComponent, ref } from 'vue'
import { Popup, Icon } from 'vant'
import styles from './index.module.less'
import CloseIcon from './close.svg'
import bgIcon from './setting/icons/bg-bottom.png'

export default defineComponent({
  name: 'ColexiuPopup',
  props: {
    data: {
      type: Object,
      default: () => null,
    },
    zIndex: {
      type: Number,
      default: undefined,
    },
    closeable: {
      type: Boolean,
      default: true,
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    style: {
      type: Object,
    },
  },
  setup(props, { slots, expose }) {
    const show = ref(false)
    const open = ref(false)

    const onShow = () => {
      show.value = true
      open.value = true
    }
    const onClose = () => {
      show.value = false
    }

    const onClosed = () => {
      open.value = false
    }

    const close = () => {
      show.value = false
    }

    expose({
      show,
      close,
      onShow,
      onClose,
      onClosed,
    })

    return () => (
      <Popup
        show={show.value}
        zIndex={props.zIndex}
        onClose={onClose}
        onClosed={onClosed}
        teleport="body"
        onClickOverlay={onClose}
        overlay={props.overlay}
        round
        closeable={false}
        style={{ ...props.style }}
        class={styles.bg}
        lockScroll={true}
      >
        {open.value && slots.default && slots.default(props)}
        {props.closeable && <Icon class={styles.close} name={CloseIcon} onClick={onClose} />}
      </Popup>
    )
  },
})
