import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NInput, NScrollbar, NSelect, NThing } from 'naive-ui';
import iconSearch from '../../images/icon-search.png';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'attend-class',
  emits: ['close'],
  setup(props, { emit }) {
    const router = useRouter();
    const onAttendClass = (i: any) => {
      emit('close');

      const { href } = router.resolve({
        path: '/attend-class'
      });
      window.open(href, +new Date() + '');
    };
    return () => (
      <div class={styles.attendClass}>
        <div class={styles.attendClassSearch}>
          <NInput placeholder="请输入班级名称" clearable>
            {{
              prefix: () => <span class="icon-search-input"></span>
            }}
          </NInput>
          <NSelect
            placeholder="年级"
            clearable
            options={[
              {
                label: '一年级',
                value: '1'
              },
              {
                label: '二年级',
                value: '2'
              },
              {
                label: '三年级',
                value: '3'
              },
              {
                label: '四年级',
                value: '4'
              },
              {
                label: '五年级',
                value: '5'
              },
              {
                label: '六年级',
                value: '6'
              }
            ]}
          />
          <NSelect
            placeholder="班级"
            clearable
            options={[
              {
                label: '一班',
                value: '1'
              },
              {
                label: '二班',
                value: '2'
              },
              {
                label: '三班',
                value: '3'
              },
              {
                label: '四班',
                value: '4'
              },
              {
                label: '五班',
                value: '5'
              }
            ]}
          />
        </div>
        <NScrollbar class={styles.classList}>
          {[1, 2, 3, 4, 5, 6, 7].map(i => (
            <div onClick={() => onAttendClass(i)}>
              <NThing class={styles.thingItem}>
                {{
                  header: () => (
                    <div class={styles.title}>一年级{i}班 23人</div>
                  ),
                  default: () => (
                    <div class={styles.content}>
                      人教版二年级上册 | 第一单元 |【歌表演】我和我的祖国
                    </div>
                  )
                }}
              </NThing>
            </div>
          ))}
        </NScrollbar>
      </div>
    );
  }
});
