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: '#1CACF1'
        },
        {
          text: '未答',
          color: '#EAEAEA'
        }
      ]
    },
    // 结果
    answerResult: {
      type: Array,
      default: () => []
    },
    /** 是否加载完 */
    isFinish: {
      type: Boolean,
      default: true
    }
  },
  emits: ['select', 'loadMore'],
  setup(props, { emit }) {
    /**
     * @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 === 'PRACTICE' && item.showAnalysis
                      ? item.analysis.userResult
                        ? styles.yes
                        : styles.no
                      : ''
                  ]}>
                  {index + 1}
                </span>
              </GridItem>
            ))}
            {!props.isFinish && (
              <GridItem onClick={() => emit('loadMore')}>
                {/* 判断是否答题了 */}
                <span class={[styles.answered, styles.more]}>更多</span>
              </GridItem>
            )}
          </Grid>
        </div>
      </div>
    );
  }
});
