import { defineComponent, ref } from 'vue'
import PopupWraper from '/src/components/popup-wraper'
import Content from './content'

import styles from './index.module.less'

const popupRef = ref()

export default defineComponent({
  name: 'player-popup',
  props: {
    btnClass: {
      type: String,
    },
    popupClass: {
      type: String,
    },
  },
  render() {
    return (
      <PopupWraper
        ref={popupRef}
        vSlots={{
          popup: () => <Content close={popupRef.value?.close} className={this.popupClass} {...this.$attrs} />,
        }}
        className={styles.popup}
      >
        <div onClick={popupRef.value?.open}>
          {this.$slots.default?.()}
        </div>
      </PopupWraper>
    )
  },
})
