import { defineComponent } from 'vue'
import styles from '../index.module.less'
import signinTips from '../images/signin-tips.png'
import { Button, CellGroup, Field } from 'vant'

export default defineComponent({
  name: 'pre-register',
  emits: ['tabChange'],
  setup(props, { emit }) {
    const onSubmit = () => {
      emit('tabChange', 2)
    }
    return () => (
      <div class={styles['per-register-active']}>
        <div class={styles.flowPath}>
          <i class={styles.flowPathTitle}></i>
          <div class={styles.flowPathContent}>
            一、请所有家长进行<span>签到</span>
            <br />
            二、<span>观看</span>管乐团家长会议
            <br />
            1、学校领导讲话（5分钟）
            <br />
            2、基金会老师介绍乐团事项（20分钟）
            <br />
            <p
              style={{
                'padding-left': '1em'
              }}
            >
              *乐团组建背景及政策
              <br />
              *乐团发展规划与乐器知识讲解
              <br />
              *学校/基金会/家长各方职责与投入
              <br />
              *入团流程讲解
            </p>
            三、请
            <span>“有意向”</span>让孩子加入乐团的家长点击
            <span>“乐团报名”</span>完成信息填报
          </div>
        </div>

        <div class={styles.signin}>
          <div class={styles.tips}>
            <img src={signinTips} class={styles.signinTips} />
            <p>
              请先进行<span>签到</span>，再观看<span>管乐团家长会视频</span>
            </p>
          </div>

          <CellGroup class={styles.cellGroup} border={false}>
            <Field
              label="学生姓名"
              labelAlign="top"
              placeholder="请输入学生姓名"
              autocomplete="off"
            />
            <Field
              label="年级"
              labelAlign="top"
              placeholder="请选择年级"
              isLink
              readonly
              clickable={false}
            />
            <Field
              label="班级"
              labelAlign="top"
              placeholder="请选择班级"
              isLink
              readonly
              clickable={false}
            />

            <Button class={styles.submitBtn} onClick={onSubmit}></Button>
          </CellGroup>
        </div>
      </div>
    )
  }
})
