import { Ref, defineComponent, ref, watch } from 'vue'
import {
  Tag,
  CheckboxGroup,
  Checkbox,
  RadioGroup,
  Radio,
  Button,
  Toast
} from 'vant'
import styles from './index.module.less'
import classNames from 'classnames'

export default defineComponent({
  name: 'SelectTag',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    tagList: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { attrs, emit }) {
    const tagList: Ref<Array<any | number>> = ref([...props.defaultValue])

    const onSelect = val => {
      setTimeout(() => {
        val.forEach(i => {
          if (!tagList.value.includes(i)) {
            tagList.value.push(i)
          }
        })
      }, 100)
    }

    watch(
      () => props.show,
      () => {
        if (!props.show) {
          resetTags()
        } else {
          tagList.value = [...props.defaultValue]
        }
      }
    )

    const resetTags = () => {
      tagList.value = []
      // emit('close')
    }
    return () => {
      return (
        <div class={styles.select}>
          <h4 class={styles.title}>曲目标签</h4>
          <div class={styles.content}>
            <CheckboxGroup
              class={classNames(styles.childContent, styles['radio-group'])}
              modelValue={tagList.value}
              max={3}
              onUpdate:modelValue={val => {
                onSelect!(val)
              }}
            >
              {props.tagList.map((item: any, index: number) => (
                <Checkbox
                  key={item.id}
                  name={item.id}
                  class={styles.radio}
                  onClick={() => {
                    if (tagList.value.includes(item.id)) {
                      const index = tagList.value.findIndex(
                        tag => tag === item.id
                      )
                      tagList.value.splice(index, 1)
                    } else {
                      if (tagList.value.length >= 3) {
                        Toast('最多只能选3个标签')
                        return
                      }
                      onSelect!([item.id])
                    }
                  }}
                >
                  <Tag
                    class={classNames(styles.item, 'van-ellipsis')}
                    plain
                    type={
                      !tagList.value.includes(item.id) ? 'default' : 'primary'
                    }
                    round
                    size="large"
                  >
                    {item.name}
                  </Tag>
                </Checkbox>
              ))}
            </CheckboxGroup>
          </div>
          <footer class="van-safe-area-bottom van-hairline--top">
            <Button
              class={[styles.btn, styles.btnCancel]}
              round
              onClick={resetTags}
            >
              重置
            </Button>
            <Button
              class={styles.btn}
              type="primary"
              round
              onClick={() => emit('confirm', tagList.value)}
            >
              确认
            </Button>
          </footer>
        </div>
      )
    }
  }
})
