import { defineComponent } from 'vue'
import { Popup } from 'vant'

export default defineComponent({
  name: 'PopupWraper',
  props: ['className', 'overlayClass', 'rootClassName'],
  data() {
    return {
      show: false,
      opened: false
    }
  },
  methods: {
    open() {
      this.show = true
      this.opened = true
    },
    close() {
      this.show = false
    },
    closed() {
      this.opened = false
    }
  },
  render() {
    return (
      <>
        {this.$slots.default?.()}
        <Popup
          class={this.className}
          overlayClass={this.overlayClass}
          show={this.show}
          closeable
          style="background-color: transparent;"
          onClosed={this.closed}
          teleport="body"
          onClickCloseIcon={this.close}
          vSlots={{
            default: () => {
              return this.opened ? (
                <div class={this.rootClassName}>{this.$slots.more?.()}{this.$slots.popup?.()}</div>
              ) : null
            }
          }}
        >
        </Popup>
      </>
    )
  }
})
