import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NCheckbox,
  NCheckboxGroup,
  NGi,
  NGrid,
  NSpace
} from 'naive-ui';

export default defineComponent({
  name: 'add-courseware-item',
  props: {
    coursewareList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const selects = ref<number[]>([]);
    return () => (
      <div class={styles.addCoursewareItem}>
        <NCheckboxGroup v-model:value={selects.value}>
          <NGrid yGap={18} cols={2}>
            {props.coursewareList.map((courseware: any, index: number) => (
              <NGi>
                <NCheckbox value={index}>{courseware.name}</NCheckbox>
              </NGi>
            ))}
          </NGrid>
        </NCheckboxGroup>

        <NSpace class={styles.btnGroupModal} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton
            round
            type="primary"
            onClick={() => {
              emit('confirm', selects.value);
            }}>
            确定
          </NButton>
        </NSpace>
      </div>
    );
  }
});
