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: []
    },
    answerList: {
      type: Array,
      default: () => []
    },
    statusList: {
      type: Array,
      default: () => [
        {
          text: '已答',
          color: '#FF8057'
        },
        {
          text: '未答',
          color: '#EAEAEA'
        }
      ]
    }
  },
  emits: ['select', 'update:value'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.anserList}>
        <div class={styles.status}>
          {props.statusList.map((item: any) => (
            <span>
              <i style={{ backgroundColor: item.color }}></i>
              {item.text}
            </span>
          ))}
        </div>

        <Grid class={styles.aList} columnNum={6} border={false}>
          {[1, 2, 3, 4, 5, 6, 6, 7, 8, 9, 9, 0, 10].map((item: any) => {
            // console.log(props.keys)
            return (
              <GridItem onClick={() => emit('select', item)}>
                <span class={props.value.includes(item) && styles.active}>{item}</span>
              </GridItem>
            )
          })}
        </Grid>
      </div>
    )
  }
})
