import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NButton, NImage, NPopover, NSpace, NTooltip } from 'naive-ui';
// import iconEdit from '../../images/icon-courseware-edit.png';
// import iconDelete from '../../images/icon-courseware-delete.png';
// import iconEditName from '../../images/icon-edit-name.png';

export default defineComponent({
  name: 'courseware-type',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    /** 是否鼠标滑动时显示显示添加按钮 */
    isHoverShowAdd: {
      type: Boolean,
      default: true
    },
    /** 是否显示添加按钮 */
    isShowAdd: {
      type: Boolean,
      default: false
    },
    /** 是否支持编辑名称 */
    isEditName: {
      type: Boolean,
      default: false
    },
    /** 是否显示操作按钮 */
    operate: {
      type: Boolean,
      default: false
    },
    /** 是否显示预览按钮 */
    isShowPreviewBtn: {
      type: Boolean,
      default: false
    },
    isShowOpenFlag: {
      type: Boolean,
      default: true
    }
  },
  /** add */
  emits: [
    'add',
    'editName',
    'edit',
    'delete',
    'startClass',
    'click',
    'work',
    'look'
  ],
  setup(props, { emit }) {
    return () => (
      <div
        class={[
          styles.coursewareType,
          props.isHoverShowAdd
            ? styles.coursewareTypeHover
            : styles.coursewareTypeHocoursewareTypeShow
        ]}>
        <div
          class={[
            styles.cover,
            props.isShowPreviewBtn && styles.hideP,
            props.isShowAdd && styles.isShowAdd
          ]}
          onClick={() => emit('click')}>
          {props.item.openFlag && props.isShowOpenFlag && (
            <span class={styles.status}>公开</span>
          )}
          <NImage
            objectFit="cover"
            previewDisabled
            src={props.item.coverImg}
            class={!props.item.coverImg && styles.noCoverImg}
          />

          <i class={styles.defaultLook}></i>

          {props.isShowPreviewBtn && (
            <div class={styles.preview}>
              <NButton strong secondary class={styles.previewBtn}>
                使用课件
              </NButton>
            </div>
          )}

          {/* 是否布置作业 */}
          {props.item.isNotWork && <i class={styles.iconNoWork}></i>}
          {/* 是否有添加逻辑 */}
          {props.isShowAdd && (
            <div class={styles.function}>
              <NTooltip showArrow={false} duration={30} animated={false}>
                {{
                  trigger: () => (
                    <i class={styles.iconLook} onClick={() => emit('look')}></i>
                  ),
                  default: () => '预览课件'
                }}
              </NTooltip>
              <NTooltip showArrow={false} duration={30} animated={false}>
                {{
                  trigger: () => (
                    <i class={styles.iconAdd} onClick={() => emit('add')}></i>
                  ),
                  default: () => '添加到我的课件'
                }}
              </NTooltip>
            </div>
          )}
        </div>
        <div class={styles.operationBottom}>
          <div class={styles.coursewareText}>
            <div class={[styles.name]}>
              <span>{props.item.name}</span>
              {/* , props.isEditName && styles.editName <i
                class={styles.iconEditName}
                onClick={() => emit('editName')}></i> */}
            </div>
            <div class={styles.subjectName}>{props.item.instrumentNames}</div>
          </div>

          {props.operate && (
            <div class={styles.footer}>
              <div
                class={styles.actionClass}
                onClick={() => emit('startClass')}>
                开始上课
              </div>

              <NSpace>
                <div
                  class={[styles.actionClass, styles.actionWork]}
                  onClick={() => emit('work')}>
                  作业
                </div>
                <NPopover
                  trigger="hover"
                  showArrow={false}
                  to={false}
                  duration={50}>
                  {{
                    trigger: () => <div class={[styles.menu]}></div>,
                    default: () => (
                      <div class={styles.popoverList}>
                        <div
                          class={styles.popoverItem}
                          onClick={() => emit('edit')}>
                          <i class={styles.iconEdit}></i>
                          <span>编辑课件</span>
                        </div>
                        <div
                          class={styles.popoverItem}
                          onClick={() => emit('delete')}>
                          <i class={styles.iconDelete}></i>
                          <span>删除课件</span>
                        </div>
                      </div>
                    )
                  }}
                </NPopover>
              </NSpace>
            </div>
          )}
        </div>
      </div>
    );
  }
});
