import { Tag, Image } from 'vant'
import { computed, defineComponent, PropType, reactive } from 'vue'
import { AnswerType, labelOptions } from '../../unit'
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
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const onSelect = (item: any) => {
      if (props.readOnly) return
      const value: any = props.value || []
      const result = {
        answerId: item.examinationQuestionAnswerId,
        answer: item.questionAnswer,
        extra: 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
    })
    const mediaUrls = computed(() => (props.data.mediaUrls ? props.data.mediaUrls.split(',') : ''))

    return () => (
      <div class={styles.unitSubject}>
        <div class={styles.unitSubjectTitle}>
          {props.index}、{props.data.name}{' '}
          <span class={styles.unitScore}>（{props.data.totalScore || 0}分）</span>
          <Tag type="primary">{props.type === 'radio' ? '单选题' : '多选题'}</Tag>
        </div>
        <div class={styles.unitDetail}>
          <div v-html={props.data.questionDetail}></div>
          {mediaUrls.value &&
            mediaUrls.value.map((url: any) => <Image class={styles.unitTitleImg} src={url} />)}
        </div>

        <div class={styles.unitAnswers}>
          {/* styles.active */}
          {answers.value.map((item: any, index: number) => (
            <div
              class={[styles.unitAnswer, item.checked && styles.active]}
              onClick={() => onSelect(item)}
            >
              <span class={styles.option}>{labelOptions[index + 1]}.</span>
              {item.questionAnswerTypeCode === AnswerType.IMAGE && (
                <div class={styles.value}>
                  <Image src={item.questionAnswer} />
                </div>
              )}
              {item.questionAnswerTypeCode === AnswerType.TXT && (
                <div class={styles.value}>{item.questionAnswer}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    )
  }
})