import {
  NButton,
  NLegacyTransfer,
  NSpace,
  useMessage,
  NPopselect,
  NImage,
  NDropdown
} from 'naive-ui';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '../index.module.less';
import smallArrow from '../images/smallArrow.png';
import { getCLassStudent, classGroupList } from '../api';
export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ id: '' })
    }
  },
  name: 'resetStudent',
  emits: ['close'],
  setup(props, { emit }) {
    const message = useMessage();
    const data = reactive({
      uploading: false
    });
    const options = ref([] as any);
    const currentStudnetList = ref([] as any);
    const chioseOptions = ref([] as any);
    const formRef = ref();
    const handleSubmit = async () => {
      data.uploading = true;
    };
    const classList = ref([] as any);
    console.log(props.activeRow, 'activeRow');
    const targetClass = reactive({
      name: '',
      id: ''
    });
    //

    /**
     * 这里干3件事  1.获取当前班的学生
     * 2.查询所有的班级列表  并且排查当前班级
     * 3.默认选择第一个班级 并且查出此班的学生
     */
    const chioseStudnet = (val: any) => {
      console.log(val);
    };
    const getAllClassList = async () => {
      try {
        const res = await classGroupList({ page: 1, rows: 9999 });
        classList.value = res.data.rows.map((item: any) => {
          return {
            label: item.name,
            key: item.id,
            disabled: item.id == props.activeRow.id
          };
        });
        if (classList.value[0].disabled) {
          targetClass.name = classList.value[1].label;
          targetClass.id = classList.value[1].id;
        } else {
          targetClass.name = classList.value[0].label;
          targetClass.id = classList.value[0].id;
        }

        console.log(classList.value, ' classList.value');
      } catch (e) {
        console.log(e);
      }
    };
    const getCLassStudentList = async (id: string | number) => {
      return await getCLassStudent({
        page: 1,
        rows: 999,
        classGroupId: id
      });
    };
    const chioseClass = async (val: any) => {
      classList.value.forEach((item: any) => {
        if (item.key == val) {
          targetClass.name = item.label;
          targetClass.id = item.key;
        }
      });
      console.log(targetClass);
      const res = await getCLassStudentList(val);
      chioseOptions.value = res.data.rows.map((item: any) => {
        return item.id;
      });
      console.log(chioseOptions.value, 'chioseOptions.value');
    };
    onMounted(async () => {
      console.log('onMounted');
      getAllClassList();
      const res = await getCLassStudentList(props.activeRow.id as string);
      currentStudnetList.value = res.data.rows.map((item: any) => {
        return {
          label: item.nickname + '（' + item.id + '）',
          value: item.id
        };
      });
    });
    return () => (
      <div class={[styles.container, styles.resetStudentWrap]}>
        <div class={styles.studentTransfer}>
          <NDropdown
            key="111"
            v-model:value={targetClass.id}
            options={classList.value}
            onSelect={(value: any) => {
              chioseClass(value);
            }}
            scrollable>
            <NImage
              class={styles.smallArrow}
              src={smallArrow}
              previewDisabled></NImage>
          </NDropdown>
          <NLegacyTransfer
            source-title={props.activeRow.name}
            target-title={targetClass.name}
            size="large"
            ref={formRef}
            options={currentStudnetList.value}
            source-filter-placeholder="请输入学生姓名"
            target-filter-placeholder="请输入学生姓名"
            v-model:value={chioseOptions.value}
            virtual-scroll
            onUpdate:value={(val: any) => {
              chioseStudnet(val);
            }}
            filterable></NLegacyTransfer>
          <div class={styles.studentTransferBottom}>
            <div class={[styles.bottomLeft, styles.bottom]}>
              <div class={styles.bottomWrap}>共0名学生</div>
            </div>
            <div class={[styles.bottomRight, styles.bottom]}>
              <div class={styles.bottomWrap}>共0名学生</div>
            </div>
          </div>
        </div>

        <NSpace class={styles.btnGroup} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton
            round
            loading={data.uploading}
            type="primary"
            // onClick={() => handleSave()}
          >
            保存
          </NButton>
        </NSpace>
      </div>
    );
  }
});
