import { defineComponent, ref } from 'vue'
import { Popup, Tabs, Tab } from 'vant'
import styles from './index.module.less'

export const show = ref(false)

export default defineComponent({
  name: 'HelperPopup',
  setup() {
    return () => {
      return (
        <Popup
          show={show.value}
          position="right"
          round
          teleport="body"
          onClickOverlay={() => (show.value = false)}
          style={{ height: '100vh', width: '40vw', overflow: 'hidden' }}
        >
          <Tabs class={styles.tabs}>
            <Tab title="投屏">
              <iframe src={location.origin + '/orchestra-student/#/guide'} />
            </Tab>
            <Tab title="帮助">
              <iframe src={location.origin + '/orchestra-student/#/help-center?source=music'} />
            </Tab>
          </Tabs>
        </Popup>
      )
    }
  },
})