import { Grid, GridItem } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'answer-list',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 0
    },
    lookType: {
      type: String as PropType<'ANSWER' | 'RESULT' | 'CLICK' | 'PRACTICE'>,
      default: 'ANSWER'
    },
    statusList: {
      type: Array,
      default: () => [
        {
          text: '已答',
          color: '#FF8057'
        },
        {
          text: '未答',
          color: '#EAEAEA'
        }
      ]
    },
    // 结果
    answerResult: {
      type: Array,
      default: () => []
    }
  },
  emits: ['select'],
  setup(props, { emit }) {
    console.log(props.lookType, 'lookType')
    /**
     * @description 检查用户是否答对
     * @returns Boolean
     */
    const formatUserResult = (id: string) => {
      let result = false
      props.answerResult.forEach((item: any) => {
        if (item.questionId === id) {
          result = item.rightFlag
        }
      })
      return result
    }

    return () => (
      <div class={styles.anserList}>
        {props.statusList.length > 0 && (
          <div class={styles.status}>
            {props.statusList.map((item: any) => (
              <span>
                <i style={{ backgroundColor: item.color }}></i>
                {item.text}
              </span>
            ))}
          </div>
        )}

        <div
          style={{
            maxHeight: '40vh',
            minHeight: '20vh',
            overflowX: 'auto'
          }}
        >
          <Grid class={styles.aList} columnNum={6} border={false}>
            {props.value.map((item: any, index: number) => (
              <GridItem onClick={() => emit('select', index)}>
                {/* 判断是否答题了 */}
                <span
                  class={[
                    props.lookType === 'ANSWER' &&
                      item.userAnswer &&
                      item.userAnswer.length > 0 &&
                      styles.answered,
                    props.lookType === 'RESULT' &&
                      (formatUserResult(item.id) ? styles.yes : styles.no),
                    props.lookType === 'CLICK' && index === props.index && styles.answered,
                    props.lookType !== 'CLICK' && item.showAnalysis
                      ? item.analysis.userResult
                        ? styles.yes
                        : styles.no
                      : ''
                  ]}
                >
                  {index + 1}
                </span>
              </GridItem>
            ))}
          </Grid>
        </div>
      </div>
    )
  }
})