import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColUpload from '@/components/col-upload'
import { Field } from 'vant'
import { defineComponent } from 'vue'
import styles from './cert-three.module.less'
import { teacherState } from './teacherState'

export default defineComponent({
  name: 'CertThree',
  render() {
    return (
      <div class="cert-three">
        <ColFieldGroup class={styles.items}>
          <ColField
            required
            v-slots={{
              title: () => (
                <div class={styles.title}>
                  毕业院校
                  <span style={{ fontSize: '14px', color: '#999' }}>
                    (必填)
                  </span>
                </div>
              )
            }}
          >
            <Field
              v-model={teacherState.teacherCert.graduateSchool}
              name="毕业院校"
              placeholder="请输入您的毕业院校"
            />
          </ColField>

          <ColField
            required
            v-slots={{
              title: () => (
                <div class={styles.title}>
                  专业
                  <span style={{ fontSize: '14px', color: '#999' }}>
                    (必填)
                  </span>
                </div>
              )
            }}
          >
            <Field
              v-model={teacherState.teacherCert.subject}
              name="专业"
              placeholder="请输入您的专业"
            />
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup class={styles.items}>
          <ColField
            v-slots={{
              title: () => (
                <div class={styles.title}>
                  毕业证书
                  <span style={{ fontSize: '14px', color: '#999' }}>
                    (选填)
                  </span>
                </div>
              )
            }}
            border={false}
          >
            <ColUpload
              v-model={teacherState.teacherCert.gradCertificate}
              tips="点击上传学历证书"
            />
            <span style={{ fontSize: '14px', color: '#999' }}>
              图片最大不能超过5MB
            </span>
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup class={styles.items}>
          <ColField
            v-slots={{
              title: () => (
                <div class={styles.title}>
                  学位证书
                  <span style={{ fontSize: '14px', color: '#999' }}>
                    (选填)
                  </span>
                </div>
              )
            }}
            border={false}
          >
            <ColUpload
              v-model={teacherState.teacherCert.degreeCertificate}
              tips="点击上传学位证书"
            />
            <span style={{ fontSize: '14px', color: '#999' }}>
              图片最大不能超过5MB
            </span>
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup class={styles.items}>
          <ColField
            v-slots={{
              title: () => (
                <div class={styles.title}>
                  教师资格证
                  <span style={{ fontSize: '14px', color: '#999' }}>
                    (选填)
                  </span>
                </div>
              )
            }}
            border={false}
          >
            <ColUpload
              v-model={teacherState.teacherCert.teacherCertificate}
              tips="点击上传教师资格证"
            />
            <span style={{ fontSize: '14px', color: '#999' }}>
              图片最大不能超过5MB
            </span>
          </ColField>
        </ColFieldGroup>
      </div>
    )
  }
})
