import { defineComponent } 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: '我知道了'
    },
    answerAnalysis: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'conform'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.popupResult}>
        <div class={styles.resultTitle}>
          <Image src={iconError} class={styles.titleImg} />
          回答错误！
        </div>

        {/* <div class={styles.result}>
          正确答案: <span class={styles.yes}>A</span>
          您选择: <span class={styles.no}>B</span>
        </div> */}

        <div class={styles.resultContent}>
          <span>答案解析：</span>
          {props.answerAnalysis}
        </div>

        <Button
          type="primary"
          round
          class={styles.btn}
          block
          onClick={() => {
            emit('conform')
            emit('close')
          }}
        >
          {props.confirmButtonText}
        </Button>
      </div>
    )
  }
})