import { defineComponent, PropType } from 'vue';
// import iconError from '../../images/icon-error.png';
import styles from './index.module.less';

export default defineComponent({
  name: 'result-mode',
  props: {
    /** 是否显示确定按钮 */
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    /** 确认按钮内容 */
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    /** 是否显示取消按钮 */
    showCancelButton: {
      type: Boolean,
      default: false
    },
    /** 取消按钮内容 */
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    /**  默认 | 不及格 |  及格 |  优秀 |  倒计时 */
    status: {
      type: String as PropType<
        'DEFAULT' | 'FAIL' | 'PASS' | 'GOOD' | 'COUNTDOWN'
      >,
      default: 'DEFAULT'
    },
    /** 标题 */
    title: {
      type: String,
      default: '确认退出吗？'
    },
    // 内容是否显示html
    contentHtml: {
      type: Boolean,
      default: false
    },
    /** 内容 */
    content: {
      type: String,
      default: ''
    },
    /** 内容位置 */
    textAlign: {
      type: String as PropType<'flex-start' | 'center' | 'flex-end'>,
      default: 'flex-start'
    },
    /** 是否显示关闭 */
    closeable: {
      type: Boolean,
      default: true
    }
  },
  emits: ['close', 'conform'],
  setup(props, { slots, emit }) {
    return () => (
      <div
        class={[
          styles.finishResult,
          props.status === 'FAIL' && styles.finishFail,
          props.status === 'PASS' && styles.finishPass,
          props.status === 'GOOD' && styles.finishGood,
          props.status === 'COUNTDOWN' && styles.finishCountdown
        ]}>
        <div class={styles.finishContainer}>
          {props.closeable && (
            <i
              class={styles.finishClose}
              onClick={() => emit('close', true)}></i>
          )}
          <div class={styles.finishContent}>
            <div class={styles.finishTitle}>
              <span>{props.title}</span>
            </div>
            {slots.content ? (
              slots.content()
            ) : (
              <>
                {props.contentHtml ? (
                  <div
                    class={styles.scoreResult}
                    style={{ justifyContent: props.textAlign }}
                    v-html={props.content}></div>
                ) : (
                  <div class={styles.scoreResult}>{props.content}</div>
                )}
              </>
            )}
          </div>

          <div class={styles.finishBtnGroup}>
            {props.showCancelButton && (
              <div class={styles.finishLeft} onClick={() => emit('close')}>
                {props.cancelButtonText}
              </div>
            )}
            {props.showConfirmButton && (
              <div class={styles.finishRight} onClick={() => emit('conform')}>
                {props.confirmButtonText}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
});
