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: ''
    },
    questionTypeCode: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'conform'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.popupResult}>
        <div class={styles.resultTitle}>
          <Image src={iconError} class={styles.titleImg} />

          {props.questionTypeCode === 'PLAY' ? '不合格！' : '回答错误！'}
        </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>
    );
  }
});
