import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NBadge, 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
    },
    background: {
      type: String,
      default: '#F4F7FD'
    }
  },
  /** add */
  emits: [
    'add',
    'editName',
    'edit',
    'delete',
    'startClass',
    'click',
    'work',
    'look'
  ],
  setup(props, { emit }) {
    return () => (
      <div
        class={[
          styles.coursewareType,
          props.isHoverShowAdd
            ? styles.coursewareTypeHover
            : styles.coursewareTypeHocoursewareTypeShow
        ]}
        style={{ background: props.background }}>
        <div
          class={[
            styles.cover,
            props.isShowPreviewBtn && styles.hideP,
            props.isShowAdd && styles.isShowAdd
          ]}
          onClick={() => emit('click')}>
          <div class={styles.statusCon}>
            {props.item.chapterLessonCoursewareTagName ? (
              <div
                class={styles.status}
                style={{
                  background: props.item.chapterLessonCoursewareTagColor
                }}>
                {/* {props.item.coursewareType === 'PPT' ? 'PPT' : '数字化'} */}
                {props.item.chapterLessonCoursewareTagName}
              </div>
            ) : (
              ''
            )}
          </div>

          <NImage
            objectFit="cover"
            previewDisabled
            src={props.item.coverImg}
            class={!props.item.coverImg && styles.noCoverImg}
          />

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

          {props.isShowOpenFlag && props.item.openFlag && (
            <div class={styles.iconOpenFlag}>公开</div>
          )}

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

          {/* 是否有添加逻辑 */}
          {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
              class={[
                styles.itemOperation,
                props.isShowAdd ? styles.itemOperationAdd : ''
              ]}>
              <div>更新时间：{props.item.updateTime}</div>
              {props.item.authorName ? (
                <div class={styles.authorName}>
                  <span>作者：{props.item.authorName}</span>

                  {props.isShowAdd && (
                    <div
                      class={styles.addCourseBtn}
                      onClick={() => emit('add')}>
                      添加
                    </div>
                  )}
                </div>
              ) : (
                ''
              )}
            </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')}>
                  {props.item.isNotWork ? <i class={styles.dot}></i> : ''}
                  {/* 是否布置作业 */}
                  作业
                </div>
                <NPopover
                  trigger="hover"
                  showArrow={false}
                  to={false}
                  duration={50}>
                  {{
                    trigger: () => <div class={[styles.menu]}></div>,
                    default: () => (
                      <div class={styles.popoverList}>
                        {props.item.coursewareType === 'PPT' ? (
                          <>
                            <div
                              class={styles.popoverItem}
                              onClick={() => emit('edit', 'PPT')}>
                              <i class={styles.iconEdit}></i>
                              <span>编辑PPT</span>
                            </div>
                            <div
                              class={styles.popoverItem}
                              onClick={() => emit('edit')}>
                              <i class={styles.iconSetup}></i>
                              <span>课件设置</span>
                            </div>
                          </>
                        ) : (
                          <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>
    );
  }
});
