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 // 用户答题对错
      })
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const onSelect = (item: any) => {
      console.log(item, 'onSelect')
      if (props.readOnly) return
      const value: any = props.value || []
      const result = {
        answerId: item.examinationQuestionAnswerId,
        answer: item.questionAnswer,
        answerExtra: item.questionExtra
      }

      console.log(result, 'onSelect')
      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}>
          {/* 标题 */}
          <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 && (
          <div class={styles.unitSubject}>
            <AnswerAnalysis
              answerAnalysis={props.analysis.message}
              topic={props.analysis.topic}
              userResult={props.analysis.userResult}
            />
          </div>
        )}
      </>
    )
  }
})