import { defineComponent } from 'vue';
import styles from './index.module.less';
import { 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}>
          <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>
      </div>
    );
  }
});
