import { defineComponent, ref, reactive, onMounted } from 'vue';
import styles from './index.module.less';
import popBox from './select_courseware_box.png';
import popClose from './selce_courseware_close.png';
import btnCancel from './btn-cancel.png';
import btnConfirm from './btn-confirm.png';

export default defineComponent({
  name: 'courseware-reload',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    kjId: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    return () => (
      <div
        class={styles.popBox}
        onClick={(e: Event) => e.stopPropagation()}
        onTouchmove={(e: TouchEvent) => e.stopPropagation()}>
        <div class={styles.popBody}>
          <img class={styles.popBg} src={popBox} />
          <img
            class={styles.popClose}
            src={popClose}
            onClick={(e: Event) => {
              emit('close');
            }}
          />

          <div class={styles.list} id="list">
            课程教材已更新，是否重新加载？
          </div>

          <div class={styles.btnGroup}>
            <img
              class={styles.btn}
              src={btnCancel}
              onClick={() => {
                emit('close');
              }}
            />
            <img
              class={styles.btn}
              src={btnConfirm}
              onClick={() => {
                emit('close');
                emit('confirm');
              }}
            />
          </div>
        </div>
      </div>
    );
  }
});
