import { PropType, defineComponent } from 'vue';
import styles from './index.module.less';
import { NButton, NEllipsis, NSpace, NImage, NTag, useDialog } from 'naive-ui';
import pTag from './images/p-tag.svg';
import eTag from './images/e-tag.svg';
import pEdit from './images/p-edit.svg';
import eEdit from './images/e-edit.svg';
// import iconPlay from './images/icon-play.svg';
import iconPause from './images/icon-pause.svg';
import pDelete from './images/p-delete.svg';
import eDelete from './images/e-delete.svg';
import { useUserStore } from '/src/store/modules/users';
type ItemType = {
  id: string | number;
  type: 'practice' | 'evaluation';
  src: string;
  name: string;
  typeList: string[];
};

export default defineComponent({
  name: 'train-type',
  props: {
    item: {
      type: Object as PropType<ItemType>,
      default: () => ({})
    }
  },
  emits: ['click', 'delete', 'edit'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    const dialog = useDialog();

    const onDelete = () => {
      const dialogT = dialog.warning({
        title: '提示',
        content: '您确定是否删除？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
          dialogT.loading = true;
          emit('delete', props.item);
        }
      });
    };

    const onDetail = () => {
      const src = `https://dev.kt.colexiu.com/instrument?platform=pc&modelType=practise`;
      window.open(src, '_blank');
    };
    return () => (
      <div
        class={[
          styles.trainType,
          props.item.type === 'evaluation' ? styles.evaluationType : ''
        ]}
        onClick={() => emit('click', props.item)}>
        <div class={styles['train-header']}>
          <div class={styles.title}>
            <img
              src={props.item.type === 'evaluation' ? eTag : pTag}
              class={styles['title-tag']}
            />
            <NEllipsis class={styles['title-text']}>
              {props.item.name}
            </NEllipsis>
          </div>

          <NButton class={styles.btn} round onClick={onDetail}>
            {props.item.type === 'evaluation' ? '评测模式' : '练习模式'}
            <img src={iconPause} />
          </NButton>
        </div>
        <div class={styles['train-content']}>
          <NImage src={props.item.src} previewDisabled objectFit="cover" />
          <div class={styles.preview}>
            <NButton
              strong
              secondary
              class={styles.previewBtn}
              onClick={onDetail}>
              预览
            </NButton>
          </div>
        </div>
        <div class={styles['train-footer']}>
          <NSpace class={styles.type}>
            {props.item.typeList.map((type: string) => (
              <NTag>{type}</NTag>
            ))}
          </NSpace>

          <NSpace size={6}>
            <n-button
              quaternary
              class={styles.operation}
              onClick={(e: MouseEvent) => {
                e.stopPropagation();
                emit('edit', props.item);
              }}>
              <img src={props.item.type === 'evaluation' ? eEdit : pEdit} />
            </n-button>
            <n-button
              quaternary
              class={styles.operation}
              onClick={(e: MouseEvent) => {
                e.stopPropagation();
                onDelete();
              }}>
              <img src={props.item.type === 'evaluation' ? eDelete : pDelete} />
            </n-button>
          </NSpace>
        </div>
      </div>
    );
  }
});
