import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NInputGroup,
  NInputGroupLabel,
  NInputNumber,
  NSpace
} from 'naive-ui';

export default defineComponent({
  name: 'train-update',
  emits: ['close'],
  setup(props, { emit }) {
    // 'practice' | 'evaluation'
    const forms = reactive({
      type: 'practice',
      minScore: null,
      maxScore: null,
      difficulty: '1'
    });
    return () => (
      <div class={styles.trainUpdate}>
        <NForm labelAlign="left" labelPlacement="left">
          <NFormItem label="训练方式" path="type">
            <NSpace>
              <NButton
                secondary
                class={[
                  styles.switch,
                  forms.type === 'practice' ? styles.active : ''
                ]}
                onClick={() => (forms.type = 'practice')}>
                练习
              </NButton>
              <NButton
                secondary
                class={[
                  styles.switch,
                  forms.type === 'evaluation' ? styles.active : ''
                ]}
                onClick={() => (forms.type = 'evaluation')}>
                评测
              </NButton>
            </NSpace>
          </NFormItem>
          {forms.type === 'practice' && (
            <>
              <NFormItem label="练习小节" path="minScore">
                <NInputNumber
                  v-model:value={forms.minScore}
                  showButton={false}
                  min={0}
                  max={99}
                  placeholder="最小练习小节"
                  onUpdate:value={() => {
                    forms.maxScore = null;
                  }}
                  style={{ width: '46%' }}
                />
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    lineHeight: '1',
                    marginTop: '-2px',
                    margin: '-2px 4% 0 4%'
                  }}>
                  -
                </div>
                <NInputNumber
                  v-model:value={forms.maxScore}
                  showButton={false}
                  min={forms.minScore || 0}
                  max={99}
                  placeholder="最大练习小节"
                  style={{ width: '46%' }}
                />
              </NFormItem>
              <NFormItem label="练习速度">
                <NInputNumber
                  min={0}
                  showButton={false}
                  style={{ width: '100%' }}
                />
              </NFormItem>
              <NFormItem label="练习时长">
                <NInputGroup>
                  <NInput />
                  <NInputGroupLabel>分钟</NInputGroupLabel>
                </NInputGroup>
              </NFormItem>
            </>
          )}

          {forms.type === 'evaluation' && (
            <>
              <NFormItem label="评测难度" path="type">
                <NSpace>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === '1' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = '1')}>
                    入门级
                  </NButton>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === '2' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = '2')}>
                    进阶级
                  </NButton>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === '3' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = '3')}>
                    大师级
                  </NButton>
                </NSpace>
              </NFormItem>
              <NFormItem label="评测速度">
                <NInputGroup>
                  <NInput />
                  <NInputGroupLabel>分钟</NInputGroupLabel>
                </NInputGroup>
              </NFormItem>
              <NFormItem label="合格分数">
                <NInputGroup>
                  <NInput />
                  <NInputGroupLabel>分</NInputGroupLabel>
                </NInputGroup>
              </NFormItem>
            </>
          )}

          <NSpace class={styles.updateBtnGroup}>
            <NButton strong type="default" round onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton strong type="primary" round onClick={() => emit('close')}>
              确认
            </NButton>
          </NSpace>
        </NForm>
      </div>
    );
  }
});
