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

export default defineComponent({
  name: 'result-mode',
  props: {
    confirmButtonText: {
      type: String,
      default: '去练习'
    },
    cancelButtonText: {
      type: String,
      default: '我知道了'
    },
    status: {
      type: String as PropType<'SUCCESS' | 'FAIL' | 'PRACTICE'>,
      default: 'SUCCESS'
    },
    result: {
      type: Object,
      default: () => ({
        tips: '恭喜你，测验通过！',
        score: 0,
        examName: ''
      })
    }
  },
  emits: ['close', 'conform'],
  setup(props, { slots, emit }) {
    return () => (
      <div
        class={[
          styles.finishResult,
          props.status === 'FAIL' && styles.finishFail,
          props.status === 'PRACTICE' && styles.finishPractice
        ]}
      >
        <div class={styles.finishContainer}>
          <div class={styles.finishContent}>
            {slots.content ? (
              slots.content()
            ) : (
              <>
                <div class={styles.scoreNums}>
                  {props.result.score}
                  <span>分</span>
                </div>
                <div class={styles.scoreName}>{props.result.examName}</div>
                <div class={styles.scoreResult}>{props.result.tips}</div>
              </>
            )}
          </div>
        </div>
        <div class={styles.finishBtnGroup}>
          <div class={styles.finishLeft} onClick={() => emit('close')}>
            {props.cancelButtonText}
          </div>
          <div class={styles.finishRight} onClick={() => emit('conform')}>
            {props.confirmButtonText}
          </div>
        </div>
      </div>
    )
  }
})