import { defineComponent } from 'vue';
import styles from './index.module.less';
import { Button, CellGroup, Form, showToast } from 'vant';
import icon_logo from '../../images/logo.png';
import icon_success from '../../images/icon_success.png';
import icon_pcTeacher from '../../images/icon_pcTeacher.png';
import icon_url from '../../images/icon_url.png';

export default defineComponent({
  name: 'SchoolRegister',
  setup() {
    const url = `${location.origin}/classroom`;
    const copyTo = () => {
      const input = document.createElement('input');
      input.value = url;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      showToast('复制成功');
    };
    return () => (
      <div class={styles.container}>
        <img class={styles.titleIcon} src={icon_logo} />
        <img
          class={styles.titleIcon}
          style={{ margin: '36Px auto', height: '68Px' }}
          src={icon_success}
        />
        <div class={styles.teacherIcon}>
          <img src={icon_pcTeacher} />
        </div>

        <div class={styles.contentWrap}>
          <div class={styles.content}>
            <Form>
              <CellGroup class={styles.group} border={false}>
                <div class={styles.title}>
                  <img src={icon_url} />
                </div>
                <div class={styles.url}>{url}</div>
                <div class={styles.submit}>
                  <Button block onClick={copyTo}>
                    复制链接
                  </Button>
                </div>
              </CellGroup>
            </Form>
          </div>
        </div>
      </div>
    );
  }
});
