import { PropType, defineComponent, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NEllipsis,
  NSpace,
  NImage,
  NTag,
  NModal,
  NProgress
} from 'naive-ui';
import pTag from './images/p-tag.png';
import eTag from './images/e-tag.png';
import pEdit from './images/p-edit.png';
import eEdit from './images/e-edit.png';
import pDelete from './images/p-delete.svg';
import eDelete from './images/e-delete.svg';
import iconDelete from './images/icon-delete.png';
import { useUserStore } from '/src/store/modules/users';
import CardPreview from '/src/components/card-preview';
type ItemType = {
  id: string | number;
  trainingType: 'PRACTICE' | 'EVALUATION';
  musicId: string | number;
  coverImg: string;
  musicName: string;
  typeList: string[];
  allTimes?: number;
  trainingTimes?: number;
};

export default defineComponent({
  name: 'train-type',
  props: {
    type: {
      type: String as PropType<'prepare' | 'homework'>,
      default: 'homework'
    },
    item: {
      type: Object as PropType<ItemType>,
      default: () => ({})
    },
    isDelete: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    /** 是否下架 */
    offShelf: {
      type: Boolean,
      default: false
    },
    isCLassWork: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click', 'delete', 'edit', 'offShelf'],
  setup(props, { emit }) {
    const userStore = useUserStore();

    const removeVisiable = ref(false);
    const previewShow = ref(false);
    const onDetail = () => {
      // const origin = /(localhost|192)/.test(location.host)
      //   ? 'https://dev.kt.colexiu.com'
      //   : location.origin;
      // const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.item.musicId}&Authorization=${userStore.getToken}`;
      // window.open(src, '_blank');
      // console.log(props.item, 'item');
      previewShow.value = true;
    };

    return () => (
      <div
        class={[
          styles.trainType,
          props.item.trainingType === 'EVALUATION' ? styles.evaluationType : ''
        ]}
        onClick={() => emit('click', props.item)}>
        {props.isDelete && <div class={styles.overflowBg}></div>}
        <div class={styles['train-header']}>
          <div class={styles.title}>
            <img
              src={props.item.trainingType === 'EVALUATION' ? eTag : pTag}
              class={styles['title-tag']}
            />
            <NEllipsis class={styles['title-text']} tooltip={false}>
              {props.item.musicName}
            </NEllipsis>
          </div>

          {props.isDelete ? (
            <NButton
              class={styles.iconDelete}
              quaternary
              round
              onClick={(e: MouseEvent) => {
                e.stopPropagation();
                emit('delete', props.item);
              }}>
              <img src={iconDelete} />
            </NButton>
          ) : (
            <NButton
              class={styles.btn}
              round
              onClick={() => {
                if (props.isDisabled) {
                  return;
                }
                onDetail;
              }}>
              {props.item.trainingType === 'EVALUATION'
                ? '评测模式'
                : '练习模式'}
            </NButton>
          )}
        </div>
        <div class={styles['train-content']}>
          <NImage src={props.item.coverImg} previewDisabled objectFit="cover" />
          {props.isDisabled && !props.isCLassWork ? (
            <div class={styles.disPreview}>
              <NProgress
                percentage={
                  props.item.trainingType === 'EVALUATION'
                    ? (Number(props.item.trainingTimes) /
                        Number(props.item.allTimes)) *
                      100
                    : (Number(props.item.trainingTimes) /
                        60 /
                        Number(props.item.allTimes)) *
                      100
                }
                offset-degree={180}
                type="circle"
                rail-color={'8b8b8b'}
                color={
                  props.item.trainingType === 'EVALUATION'
                    ? '#FF7E65'
                    : '#44B3FF'
                }
                style="width: 120px; margin: 0  0 10px;">
                <div class={styles.BProgress}>
                  {props.item.trainingType === 'EVALUATION' ? (
                    <h4>
                      {props.item.trainingTimes}

                      <span>分</span>
                    </h4>
                  ) : (
                    <h4>
                      {props.item.trainingTimes
                        ? parseInt(props.item.trainingTimes / 60 + '')
                        : 0}
                      <span>分钟</span>
                    </h4>
                  )}

                  <p>
                    {' '}
                    {props.item.trainingType === 'EVALUATION'
                      ? '学生分数'
                      : '实际练习'}{' '}
                  </p>
                </div>
              </NProgress>
              <p class={styles.disPreviewDivide}>
                {props.item.trainingType === 'EVALUATION'
                  ? '合格分数'
                  : '练习时长要求'}
                {props.item.allTimes}
                {props.item.trainingType === 'EVALUATION' ? '分' : '分钟'}
              </p>
            </div>
          ) : (
            <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>
          {props.isDisabled ? null : (
            <NSpace size={6}>
              <n-button
                quaternary
                disabled={props.isDelete}
                class={styles.operation}
                onClick={(e: MouseEvent) => {
                  e.stopPropagation();
                  emit('edit', props.item);
                }}>
                <img
                  src={props.item.trainingType === 'EVALUATION' ? eEdit : pEdit}
                />
              </n-button>
              {props.type === 'homework' && (
                <n-button
                  quaternary
                  disabled={props.isDelete}
                  class={styles.operation}
                  onClick={(e: MouseEvent) => {
                    e.stopPropagation();
                    // onDelete();
                    removeVisiable.value = true;
                  }}>
                  <img
                    src={
                      props.item.trainingType === 'EVALUATION'
                        ? eDelete
                        : pDelete
                    }
                  />
                </n-button>
              )}
            </NSpace>
          )}
        </div>

        {/* 判断是否下架 */}
        {props.offShelf && (
          <div class={styles.offShelfBg}>
            <p class={styles.offShelfTips}>该资源已被下架</p>
            <NButton
              type="primary"
              class={styles.offShelfBtn}
              onClick={() => emit('offShelf')}>
              确认
            </NButton>
          </div>
        )}

        <NModal
          v-model:show={removeVisiable.value}
          preset="card"
          class={['modalTitle', styles.removeVisiable]}
          title={'提示'}>
          <div class={styles.studentRemove}>
            <p>您确定是否删除？</p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton
                round
                type="primary"
                onClick={() => {
                  emit('delete', props.item);
                }}>
                确定
              </NButton>
              <NButton round onClick={() => (removeVisiable.value = false)}>
                取消
              </NButton>
            </NSpace>
          </div>
        </NModal>

        <CardPreview
          v-model:show={previewShow.value}
          item={{
            type: 'MUSIC',
            content: props.item.musicId,
            title: props.item.musicName
          }}
        />
      </div>
    );
  }
});
