import { defineComponent, reactive } from 'vue';
import styles from '../index.module.less';
import { NButton, NForm, NFormItem, NSelect, NSpace } from 'naive-ui';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'train-update',
  emits: ['close'],
  setup(props, { emit }) {
    // 'practice' | 'evaluation'
    const forms = reactive({
      version: null,
      classId: null,
      category: null,
      chapter: null
    });
    const router = useRouter();
    const gotoClassPage = () => {
      const { href } = router.resolve({
        path: '/attend-class'
      });
      window.open(href, +new Date() + '');
    };
    return () => (
      <div class={styles.trainUpdate}>
        <NForm labelAlign="left" labelPlacement="left">
          <NFormItem path="classId">
            <NSelect
              {...({
                options: [
                  {
                    label: '三年级2班',
                    value: 'song0'
                  },
                  {
                    label: '二年级1班',
                    value: 'song1'
                  }
                ],
                placeholder: '选择班级',
                clearable: true
              } as any)}
              v-model:value={forms.classId}></NSelect>
          </NFormItem>
          <NFormItem path="version">
            <NSelect
              {...({
                options: [
                  {
                    label: '人教版',
                    value: 'song0'
                  },
                  {
                    label: '人音版',
                    value: 'song1'
                  }
                ],
                placeholder: '选择教材版本',
                clearable: true
              } as any)}
              v-model:value={forms.version}></NSelect>
          </NFormItem>
          <NFormItem path="category">
            <NSelect
              {...({
                options: [
                  {
                    label: '一年级上册',
                    value: 'song0'
                  },
                  {
                    label: '一年级下册',
                    value: 'song1'
                  }
                ],
                placeholder: '选择册别',
                clearable: true
              } as any)}
              v-model:value={forms.category}></NSelect>
          </NFormItem>
          <NFormItem path="chapter">
            <NSelect
              {...({
                options: [
                  {
                    label: '第一单元|第一章',
                    value: 'song0'
                  },
                  {
                    label: '第一单元|第二章',
                    value: 'song1'
                  }
                ],
                placeholder: '选择章节',
                clearable: true
              } as any)}
              v-model:value={forms.chapter}></NSelect>
          </NFormItem>
          <NSpace class={styles.updateBtnGroup}>
            <NButton strong type="default" round onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
              strong
              type="primary"
              round
              onClick={() => gotoClassPage()}>
              确认
            </NButton>
          </NSpace>
        </NForm>
      </div>
    );
  }
});
