import { defineComponent } from 'vue'
import { Tag, CheckboxGroup, Checkbox, RadioGroup, Radio } from 'vant'
import styles from './select.module.less'
import classNames from 'classnames'

export default defineComponent({
  name: 'SelectTagChild',
  props: {
    child: {
      type: Array,
      default: () => []
    },
    onSelect: {
      type: Function,
      default: () => {}
    },
    rowSingle: {
      type: Boolean,
      default: false
    },
    needAllButton: {
      type: Boolean,
      default: true
    }
  },
  setup({ child, onSelect, needAllButton, rowSingle }, { attrs }) {
    return () => {
      const selected = attrs.selected as number[]
      return (
        <CheckboxGroup
          class={classNames(styles.childContent, styles['radio-group'])}
          modelValue={selected}
          onUpdate:modelValue={val => {
            onSelect(val)
          }}
        >
          {needAllButton && (
            <Checkbox
              name={0}
              class={styles.radio}
              onClick={() => onSelect([])}
            >
              <Tag
                class={classNames(styles.item, 'van-ellipsis')}
                type="primary"
                plain={selected.length !== 0}
                round
                size="large"
              >
                全部
              </Tag>
            </Checkbox>
          )}
          {child.map((item: any) => (
            <Checkbox
              key={item.id}
              name={item.id}
              class={styles.radio}
              onClick={() => {
                rowSingle && onSelect([item.id])
              }}
            >
              <Tag
                class={classNames(styles.item, 'van-ellipsis')}
                plain={!selected.includes(item.id)}
                type="primary"
                round
                size="large"
              >
                {item.name}
              </Tag>
            </Checkbox>
          ))}
        </CheckboxGroup>
      )
    }
  }
})
