import { Tag, Image } from 'vant';
import { computed, defineComponent, PropType, reactive } from 'vue';
import { AnswerType, labelOptions, QuestionType } from '../../unit';
import AnserTitle from '../anser-title';
import AnswerAnalysis from '../answer-analysis';
import UnitAudio from '../unit-audio';
import styles from './index.module.less';

// 单选题 - 多选题
export default defineComponent({
  name: 'choice-question',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    type: {
      type: String as PropType<'radio' | 'checkbox'>,
      default: 'radio'
    },
    index: {
      // 题目是第几道
      type: Number,
      default: 1
    },
    data: {
      type: Object,
      default: () => ({})
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    showRate: {
      tyep: Boolean,
      default: false
    },
    showAnalysis: {
      // 是否显示解析
      type: Boolean,
      default: false
    },
    analysis: {
      type: Object,
      default: () => ({
        message: '',
        topic: false, // 是否显示结果
        userResult: true, // 用户答题对错
        disabled: false // 是否禁用选项
      })
    }
  },
  emits: ['update:value'],
  setup(props, { emit, slots }) {
    const onSelect = (item: any) => {
      if (props.readOnly || props.analysis.disabled) return;

      const value: any = props.value || [];
      const result = {
        answerId: item.examinationQuestionAnswerId,
        answer: item.questionAnswer,
        answerExtra: item.questionExtra
      };

      if (props.type === 'checkbox') {
        const tempIndex = value.findIndex(
          (c: any) => c.answerId === item.examinationQuestionAnswerId
        );
        if (tempIndex >= 0) {
          value.splice(tempIndex, 1);
          emit('update:value', [...value]);
        } else {
          emit('update:value', [...value, result]);
        }
      } else {
        emit('update:value', [result]);
      }
    };

    const answers = computed(() => {
      const list: any = props.data.answers || [];
      const value: any = props.value || [];
      list.forEach((item: any) => {
        const tempIndex = value.findIndex(
          (c: any) => c.answerId === item.examinationQuestionAnswerId
        );
        item.checked = tempIndex !== -1 ? true : false;
      });
      return list;
    });

    return () => (
      <>
        <div class={styles.unitSubject}>
          {slots.title && slots.title()}
          {/* 标题 */}
          <AnserTitle
            index={props.index}
            name={props.data.name}
            showRate={props.showRate}
            score={props.data.totalScore}
            answerType={
              props.type === 'radio'
                ? QuestionType.RADIO
                : QuestionType.CHECKBOX
            }
            extra={{
              questionDetail: props.data.questionDetail,
              mediaUrls: props.data.mediaUrls,
              rightRate: props.data.rightRate
            }}
          />

          <div class={styles.unitAnswers}>
            {answers.value.map((item: any, index: number) => (
              <div
                class={[styles.unitAnswer, item.checked && styles.active]}
                onClick={() => onSelect(item)}>
                <div class={styles.answerContent}>
                  <span class={styles.option}>{labelOptions[index + 1]}.</span>
                  {item.questionAnswerTypeCode === AnswerType.IMAGE && (
                    <div class={styles.value}>
                      <Image
                        src={item.questionAnswer}
                        fit="contain"
                        class={'answerTitleImg'}
                      />
                    </div>
                  )}
                  {item.questionAnswerTypeCode === AnswerType.TXT && (
                    <div class={styles.value}>{item.questionAnswer}</div>
                  )}
                  {item.questionAnswerTypeCode === AnswerType.AUDIO && (
                    <div class={styles.value}>
                      <UnitAudio
                        src={item.questionAnswer}
                        class={styles.valueAudio}
                      />
                    </div>
                  )}
                </div>
                {props.showRate && (
                  <div class={styles.answerChoice}>
                    {item.selectRate || 0}%人选择
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {props.showAnalysis && (
          <AnswerAnalysis
            answerAnalysis={props.analysis.message}
            topic={props.analysis.topic}
            userResult={props.analysis.userResult}
          />
        )}
      </>
    );
  }
});
