import { Tag, Image, Icon } from 'vant';
import { computed, defineComponent } from 'vue';
import { QuestionType, QuestionTypeName } from '../../unit';
import styles from './index.module.less';
import iconPassCheck from '../../images/icon-pass-check.png';
import UnitAudio from '../unit-audio';

export default defineComponent({
  name: 'answer-title',
  props: {
    index: {
      type: Number,
      default: 1
    },
    name: {
      // 题目名称
      type: String,
      default: ''
    },
    score: {
      type: Number,
      default: 0
    },
    answerType: {
      // 类型
      type: String,
      default: ''
    },
    extra: {
      type: Object,
      default: () => ({})
    },
    showRate: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const answerTypeName = computed(() => {
      if (props.answerType === QuestionType.CHECKBOX) {
        return QuestionTypeName.CHECKBOX;
      } else if (props.answerType === QuestionType.LINK) {
        return QuestionTypeName.LINK;
      } else if (props.answerType === QuestionType.SORT) {
        return QuestionTypeName.SORT;
      } else if (props.answerType === QuestionType.PLAY) {
        return QuestionTypeName.PLAY;
      }
      return QuestionTypeName.RADIO;
    });

    const mediaUrls = computed(() =>
      props.extra.mediaUrls ? props.extra.mediaUrls.split(',') : ''
    );
    return () => (
      <>
        <div class={styles.unitSubjectTitle}>
          {props.index}、{props.name}
          {/* <span class={styles.unitScore}>（{props.score || 0}分）</span> */}
          <Tag
            type="primary"
            style={{
              marginLeft: '8px',
              lineHeight: '20px'
            }}>
            {answerTypeName.value}
          </Tag>
        </div>
        {props.showRate && (
          <div class={styles.unitTitleRate}>
            <Icon name={iconPassCheck} class={styles.icon} />
            正确率：
            <span class={styles.rate}>{props.extra.rightRate || 0}%</span>
          </div>
        )}
        {props.extra.questionDetail || mediaUrls.value ? (
          <div class={styles.unitDetail}>
            <div v-html={props.extra.questionDetail}></div>
            {mediaUrls.value &&
              mediaUrls.value.map(
                (url: any) =>
                  url && (
                    <>
                      {url.substr(-3) === 'mp3' ? (
                        <UnitAudio src={url} class={styles.valueAudio} />
                      ) : (
                        <Image
                          class={[styles.unitTitleImg, 'answerTitleImg']}
                          src={url}
                        />
                      )}
                    </>
                  )
              )}
          </div>
        ) : (
          ''
        )}
      </>
    );
  }
});