import { ref, defineComponent } from 'vue'
import { Popup } from 'vant'
import Content from './content'

export const visible = ref(false)
export const survive = ref(false)

export const open = () => {
  visible.value = true
  survive.value = true
}

export const close = () => {
  visible.value = false
}

export const closed = () => {
  survive.value = false
}

export default defineComponent({
  name: 'MusicList',
  setup(props) {
    return () => {
      return (
        <Popup
          show={visible.value}
          onClickOverlay={close}
          onClosed={closed}
          position="right"
          teleport="body"
          style={{ height: '100vh', width: '55vw', borderRadius: '5px 0 0 5px', overflow: 'hidden' }}
        >
          {survive.value && <Content {...props} />}
        </Popup>
      )
    }
  },
})
