import { Tag, Image } from 'vant'
import { defineComponent, PropType, reactive } from 'vue'
import { labelOptions } from '../../unit'
import styles from './index.module.less'

export default defineComponent({
  name: 'choice-question',
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    },
    type: {
      type: String as PropType<'radio' | 'checkbox'>,
      default: 'radio'
    },
    answers: {
      type: Object,
      default: {}
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const state = reactive({
      options: [
        {
          index: 1,
          value: 'Sol'
        },
        {
          index: 2,
          value: 'Sal'
        },
        {
          index: 3,
          value: 'La'
        },
        {
          index: 4,
          value: 'Si'
        }
      ]
    })

    const onSelect = (item: any) => {
      if (props.type === 'checkbox') {
        // 判断是否已选过
        const value: any = props.value
        if (value.includes(item.index)) {
          const index = value.findIndex((v: any) => v === item.index)
          value.splice(index, 1)
          emit('update:value', [...value])
        } else {
          emit('update:value', [item.index, ...value])
        }
      } else {
        emit('update:value', item.index)
      }
    }
    return () => (
      <div class={styles.unitSubject}>
        <div class={styles.unitSubjectTitle}>
          1、选出与方框内音符时值相同的节奏阶段 <span class={styles.unitScore}>（5分）</span>
          <Tag type="primary">{props.type === 'radio' ? '单选题' : '多选题'}</Tag>
        </div>
        <Image
          class={styles.unitTitleImg}
          src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png"
        />

        <div class={styles.unitAnswers}>
          {/* styles.active */}
          {state.options.map((item: any) => (
            <div
              class={[
                styles.unitAnswer,
                props.type === 'radio' && props.value === item.index && styles.active,
                props.type === 'checkbox' &&
                  (props.value as any).includes(item.index) &&
                  styles.active
              ]}
              onClick={() => onSelect(item)}
            >
              <span class={styles.option}>{labelOptions[item.index]}.</span>
              <div class={styles.value}>{item.value}</div>
            </div>
          ))}
        </div>
      </div>
    )
  }
})
