import { defineComponent, reactive } from 'vue'
import styles from './register-show.module.less'
import { Button, CellGroup, Field, Form, Icon, Radio, RadioGroup, Tag } from 'vant'
import { forms } from '@/school/train-planning/create'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'register-show',
  setup() {
    const route = useRoute()
    const forms = reactive({
      instrumentPriceImg: route.query.instrumentPriceImg,
      name: route.query.name
    })
    return () => (
      <div class={styles.registerShow}>
        <div class={styles.title}>{forms.name}管乐团报名申请</div>

        <Form validateFirst scrollToError ref="form" class={styles.form}>
          <div class={styles['top-tips']}>
            1、为了保障乐团顺利组建，避免名额浪费；请家长与孩子以自愿为原则，在确认意向后填写相关信息；专业老师将根据家长的相关填报，确认孩子是否能够加入乐团；
            <br />
            2、自用乐器及课后练习，家长自愿选择准备方式。
          </div>
          <CellGroup inset class={styles['cell-group']}>
            <Field labelAlign="top" label="性别" name="sex">
              {{
                input: () => (
                  <RadioGroup checkedColor="#57ABF8" direction="horizontal">
                    <Tag
                      size="large"
                      type="primary"
                      color={'#57ABF8'}
                      textColor="#FFF"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={1} />
                      男生
                    </Tag>

                    <Tag
                      size="large"
                      type="primary"
                      color={'#EAEAEA'}
                      textColor="#AAA"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={0} />
                      女生
                    </Tag>
                  </RadioGroup>
                )
              }}
            </Field>
            <Field
              labelAlign="top"
              label="孩子是否有学习过的乐器(有请备注)"
              name="learningSubjectName"
              placeholder="请输入学习过的乐器"
            ></Field>

            <Field
              labelAlign="top"
              label="选报声部1"
              readonly
              name="registerSubjectId"
              placeholder="请选择选报声部1"
            >
              {{
                'right-icon': () => <Icon name="arrow" color="#323233" size="16"></Icon>
              }}
            </Field>
            <Field
              labelAlign="top"
              label="选报声部2"
              readonly
              name="standbyRegisterSubjectId"
              placeholder="请选择选报声部2"
            >
              {{
                'right-icon': () => <Icon name="arrow" color="#323233" size="16"></Icon>
              }}
            </Field>

            <Field labelAlign="top" label="是否服从调配" name="adjust">
              {{
                input: () => (
                  <div>
                    <p class={styles.otherSubject}>
                      (如果自选声部名额已满，是否愿意接受安排其他声部?)
                    </p>

                    <RadioGroup checked-color="#57ABF8" direction="horizontal">
                      <Tag
                        size="large"
                        type="primary"
                        color={'#57ABF8'}
                        textColor="#FFF"
                        class={styles['radioSection']}
                      >
                        <Radio class={styles['radioItem']} name={1} />
                        愿意
                      </Tag>
                      <Tag
                        size="large"
                        type="primary"
                        color={'#EAEAEA'}
                        textColor="#AAA"
                        class={styles['radioSection']}
                      >
                        <Radio class={styles['radioItem']} name={0} />
                        不愿意
                      </Tag>
                    </RadioGroup>
                  </div>
                )
              }}
            </Field>
          </CellGroup>

          <CellGroup inset class={styles['cell-group']}>
            <Field
              labelAlign="top"
              label="乐器参考表&Ai练习参考表"
              border={false}
              style="padding-bottom: 0;"
            >
              {{
                input: () => <img src={forms.instrumentPriceImg as any} style="width: 100%" />
              }}
            </Field>

            <Field labelAlign="top" label="乐器准备方式" name="instrumentsPrepareMode">
              {{
                input: () => (
                  <RadioGroup checked-color="#57ABF8" direction="horizontal">
                    <Tag
                      size="large"
                      type="primary"
                      color={'#57ABF8'}
                      textColor="#FFF"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={1} />
                      自行购置
                    </Tag>
                    <Tag
                      size="large"
                      type="primary"
                      color={'#EAEAEA'}
                      textColor="#AAA"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={0} />
                      希望基金会提供渠道购置
                    </Tag>
                  </RadioGroup>
                )
              }}
            </Field>

            <Field labelAlign="top" label="乐团学习系统准备方式" name="learningSystemPrepareMode">
              {{
                input: () => (
                  <RadioGroup checked-color="#57ABF8" direction="horizontal">
                    <Tag
                      size="large"
                      type="primary"
                      color={'#57ABF8'}
                      textColor="#FFF"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={1} />
                      自行购置
                    </Tag>
                    <Tag
                      size="large"
                      type="primary"
                      color={'#EAEAEA'}
                      textColor="#AAA"
                      class={styles['radioSection']}
                    >
                      <Radio class={styles['radioItem']} name={0} />
                      希望基金会提供渠道购置
                    </Tag>
                  </RadioGroup>
                )
              }}
            </Field>

            <Field
              labelAlign="top"
              type="tel"
              label="联系电话(直接监护人)"
              name="phone"
              placeholder="请输入监护人手机号码"
            ></Field>
          </CellGroup>

          <Button
            size="large"
            block
            round
            class={styles['btn-submit']}
            native-type="submit"
          ></Button>
        </Form>
      </div>
    )
  }
})
