import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NButton, NImage, NTooltip } from 'naive-ui';
import TheNoticeBar from '/src/components/TheNoticeBar';

export default defineComponent({
  name: 'item-modal',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['look', 'add'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.itemModal}>
        <div class={styles.itemCover}>
          <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 src={props.item.coverImg} objectFit="cover" previewDisabled />

          <div class={styles.function}>
            <NTooltip showArrow={false}>
              {{
                trigger: () => (
                  <i class={styles.iconLook} onClick={() => emit('look')}></i>
                ),
                default: () => '预览课件'
              }}
            </NTooltip>
            {/* <NTooltip showArrow={false}>
              {{
                trigger: () => (
                  <i class={styles.iconAdd} onClick={() => emit('add')}></i>
                ),
                default: () => '添加到我的课件'
              }}
            </NTooltip> */}
          </div>
        </div>

        <div class={styles.itemContent}>
          <p class={styles.itemTitle} onClick={() => emit('look')}>
            <TheNoticeBar text={props.item.name} />
          </p>

          {/* <div class={styles.itemSubject}>{props.item.instrumentNames}</div> */}

          <div class={styles.updateTime}>更新于 {props.item.updateTime}</div>
          <div class={styles.other}>
            <span>作者: {props.item.authorName}</span>
            <div class={styles.addCourseBtn} onClick={() => emit('add')}>
              添加
            </div>
          </div>
        </div>
      </div>
    );
  }
});
