import { defineComponent, reactive, ref } from 'vue';
import styles from '../index.module.less';
import {
  NImage,
  NForm,
  NFormItem,
  NInput,
  NGrid,
  NGi,
  NButton
} from 'naive-ui';
import headerD from '@/views/home/images/headerD.png';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import femaleIcon from '../images/femaleIcon.png';
import maleIcon from '../images/maleIcon.png';
export default defineComponent({
  name: 'setting-personInfo',
  setup(props, { emit, attrs }) {
    const teacherForm = reactive({
      name: '张晚意',
      phone: '18971685555',
      sex: '男'
    });
    return () => (
      <div class={styles.infoWrap}>
        <div class={styles.teacherInfoWrap}>
          <div class={styles.teacherHeadWrap}>
            <NImage
              previewDisabled
              class={styles.headerD}
              src={headerD}></NImage>
            <NImage
              previewDisabled
              class={styles.defultHeade}
              src={defultHeade}></NImage>
          </div>
          <div class={styles.headerInfo}>
            <p class={styles.headerTitle}>
              张晚意
              <NImage
                previewDisabled
                class={styles.sexIcon}
                src={maleIcon}></NImage>
            </p>
            <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
          </div>
        </div>
        <div class={styles.setInfo}>
          <NForm inline model={teacherForm}>
            <NGrid cols={3} x-gap="160">
              <NGi>
                {' '}
                <NFormItem label="姓名" path="name">
                  <NInput
                    disabled
                    placeholder="请输入老师姓名"
                    v-model:value={teacherForm.name}></NInput>
                </NFormItem>
              </NGi>
              <NGi>
                {' '}
                <NFormItem label="手机号" path="phone">
                  <NInput
                    disabled
                    placeholder="请输入老师姓名"
                    v-model:value={teacherForm.phone}></NInput>
                </NFormItem>
              </NGi>
              <NGi>
                {' '}
                <NFormItem label="性别" path="sex">
                  <NInput
                    disabled
                    placeholder="请选择性别"
                    v-model:value={teacherForm.sex}></NInput>
                </NFormItem>
              </NGi>
            </NGrid>
          </NForm>
        </div>
        <div class={styles.btnList}>
          <NButton class={styles.resetpwd} type="primary">
            修改密码
          </NButton>
          <NButton class={styles.resetInfo} type="error">
            修改信息
          </NButton>
        </div>
      </div>
    );
  }
});
