import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NAvatar, NButton, NSpace } from 'naive-ui';
import teacherIcon from '@components/layout/images/teacherIcon.png';

export default defineComponent({
  name: 'work-section',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    /** 是否显示编辑按钮 */
    hideEdit: {
      type: Boolean,
      default: false
    },
    /** 是否显示编辑按钮 */
    hideDelete: {
      type: Boolean,
      default: false
    }
  },
  emits: ['edit', 'delete', 'confirm', 'editTitle'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.workSection}>
        <div class={styles.header}>
          <div
            class={styles.headerName}
            onClick={() => {
              emit('editTitle', props.item);
            }}>
            <span>{props.item.title}</span>
            <i class={styles.iconEdit}></i>
          </div>

          <NButton
            type="primary"
            color="#02B58C"
            class={[styles.btnSize, styles.btnB]}
            onClick={() => {
              // forms.removeVisiable = true;
              emit('confirm');
            }}>
            立即布置
          </NButton>
        </div>

        <div class={styles.content}>
          <NAvatar
            class={styles.navatar}
            round
            src={props.item.teacherAvatar || teacherIcon}
          />
          <div class={styles.userInfo}>
            <h2>{props.item.teacherName}</h2>
            {props.item.pTitle && <p class={styles.p1}>{props.item.pTitle}</p>}
            {props.item.eTitle && <p class={styles.p2}>{props.item.eTitle}</p>}
          </div>
          <NSpace class={styles.btnGroup} justify="center" vertical>
            {!props.hideEdit && (
              <NButton
                type="default"
                class={[styles.btnSize]}
                onClick={() => emit('edit')}>
                编辑
              </NButton>
            )}
            {!props.hideDelete && (
              <NButton
                type="default"
                class={[styles.btnSize]}
                onClick={() => emit('delete')}>
                删除
              </NButton>
            )}
          </NSpace>
        </div>
      </div>
    );
  }
});
