import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconError from '../../images/icon-error.png'
import iconSuccess from '../../images/icon-success.png'
import iconAnalysis from '../../images/icon-analysis.png'
import { Icon } from 'vant'

// 答案解析
export default defineComponent({
  name: 'answer-analysis',
  props: {
    topic: {
      // 状态
      type: Boolean,
      default: true
    },
    userResult: {
      tyep: Boolean,
      default: false
    },
    answerAnalysis: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return () => (
      <div class={styles.answerAnalysis}>
        {props.topic ? (
          <>
            {props.userResult ? (
              <div class={[styles.analysisResult, styles.success]}>
                <Icon name={iconSuccess} class={styles.aImg} />
                回答正确
              </div>
            ) : (
              <div class={[styles.analysisResult, styles.error]}>
                <Icon name={iconError} class={styles.aImg} />
                回答错误
              </div>
            )}
          </>
        ) : (
          ''
          // <div class={[styles.analysisResult]}>
          //   正确答案: <span class={styles.success}>A</span>
          // </div>
        )}

        {props.answerAnalysis && (
          <>
            <div class={[styles.analysisResult, styles.analysisTitle]}>
              <Icon name={iconAnalysis} class={styles.aImg} />
              答案解析
            </div>
            <div class={styles.analysisMessage}>{props.answerAnalysis}</div>
          </>
        )}
      </div>
    )
  }
})