import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import popBox from './select_courseware_box.png';
import popClose from './selce_courseware_close.png';

export default defineComponent({
  name: 'SelectCoursewarePop',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'select'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.popBox} onClick={(e: Event) => e.stopPropagation()}>
        <div class={styles.popBody}>
          <img class={styles.popBg} src={popBox} />
          <img class={styles.popClose} src={popClose} onClick={(e: Event) => {
            emit('close');
        }} />
          <ul class={styles.list}>
            {props.list.map((item: any, index: number) => {
              return (
                <li onClick={() => emit('select', item)}>{item.name}</li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
});