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: 'setting-popup',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (
      <PopupWraper
        ref={popupRef}
        vSlots={{
          popup: () => <Content close={popupRef.value?.close}/>
        }}
        className={styles.popup}
      >
        <span onClick={!this.disabled && popupRef.value?.open}>{this.$slots.default?.()}</span>
      </PopupWraper>
    )
  }
})
