import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import styles from '../index2.module.less';
import { NButton, NForm, NFormItem, NSelect, NSpace } from 'naive-ui';

export default defineComponent({
  name: 'select-class',
  props: {
    gradeList: {
      type: Array,
      default: () => []
    },
    useDetail: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const forms = reactive({
      id: null as any,
      uploading: false,
      classList: [] as any,
      currentGradeNum: props.useDetail.currentGradeNum || null,
      classGroupId: props.useDetail.classGroupId || null
    });
    const formsRef = ref();

    const getClassList = async () => {
      try {
        props.gradeList.forEach((item: any) => {
          if (item.value === forms.currentGradeNum) {
            forms.classList = item.childrens;
          }
        });
      } catch {
        //
      }
    };
    const onSubmit = async () => {
      formsRef.value?.validate(async (err: any) => {
        if (err) {
          return;
        }
        forms.uploading = true;
        try {
          let gradeName = '';
          props.gradeList.forEach((item: any) => {
            if (forms.currentGradeNum === item.value) {
              gradeName = item.label;
            }
          });

          let className = '';
          let lastStudy = '';
          forms.classList.forEach((item: any) => {
            if (item.value === forms.classGroupId) {
              className = item.label;
              lastStudy = item.lastStudy;
            }
          });
          emit('confirm', {
            currentGradeNum: forms.currentGradeNum, // 年级
            classGroupId: forms.classGroupId, // 班级
            name: gradeName + className,
            lastStudy
          });
          emit('close');
        } catch {
          //
        }
        forms.uploading = false;
      });
    };

    watch(
      () => props.useDetail,
      () => {
        forms.currentGradeNum = props.useDetail.currentGradeNum;
        forms.classGroupId = props.useDetail.classGroupId;
      }
    );

    onMounted(() => {
      getClassList();
    });
    return () => (
      <div class={styles.assignHomeworkContainer}>
        <NForm
          ref={formsRef}
          model={forms}
          labelAlign="right"
          labelWidth={'auto'}
          labelPlacement="left">
          <NFormItem
            label="年级"
            path="currentGradeNum"
            rule={[
              {
                required: true,
                message: '请选择年级',
                trigger: 'change',
                type: 'number'
              }
            ]}>
            <NSelect
              v-model:value={forms.currentGradeNum}
              placeholder="请选择年级"
              options={props.gradeList as any}
              clearable
              onUpdate:value={() => {
                forms.classGroupId = null;
                getClassList();
              }}
            />
          </NFormItem>
          <NFormItem
            label="班级"
            path="classGroupId"
            rule={[
              { required: true, message: '请选择班级', trigger: 'change' }
            ]}>
            <NSelect
              v-model:value={forms.classGroupId}
              placeholder="请选择班级"
              clearable
              options={forms.classList}
              disabled={!forms.currentGradeNum}
            />
          </NFormItem>

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