import request from '@/helpers/request'
import { useAsyncState } from '@vueuse/core'
import { defineComponent, reactive, Ref, ref, watch } from 'vue'
import { state as appState } from '@/state'
import { Button } from 'vant'
import SelectTagsChild from './select-tags-child'
import styles from './select.module.less'

export default defineComponent({
  name: 'SelectTag',
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    rowSingle: {
      type: Boolean,
      default: false
    },
    needAllButton: {
      type: Boolean,
      default: true
    }
  },
  emits: ['cancel', 'confirm'],
  setup({ defaultValue, ...restProps }, { emit, expose }) {
    const prefix =
      appState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    const { isLoading, state } = useAsyncState(
      request(prefix + '/MusicTag/tree'),
      null
    )
    const resetTags = () => {
      tags.value = {}
      // for (const key in tags) {
      //   if (Object.prototype.hasOwnProperty.call(tags, key)) {
      //     // delete tags[key]
      //   }
      // }
      emit('cancel')
    }

    const defaultTags = (defaultValue || '').split(',').map(id => Number(id))
    const tags: Ref<{ [key in string]: number[] }> = ref({})
    const names = {}
    watch(state, () => {
      if (state.value) {
        const list = (state.value && state.value.data) || []
        for (const item of list) {
          const allids = item.children.map(c => {
            names[c.id] = c.name
            return c.id
          })
          tags.value[item.id] = defaultTags.filter(id => {
            return allids.includes(Number(id))
          })
        }
      }
    })

    expose({
      resetTags
    })

    return () => {
      const list = (state.value && state.value.data) || []
      return (
        <div class={styles.select}>
          <h4 class={styles.title}>全部标签</h4>
          <div class={styles.content}>
            {list.map(item => {
              if (!item.children || item.children.length <= 0) {
                return null
              }
              return (
                <div class={styles.list} key={item.id}>
                  <div class={styles.tit}>{item.name}</div>
                  <SelectTagsChild
                    key={item.id}
                    // @ts-ignore
                    selected={tags.value[item.id] || []}
                    child={item.children || []}
                    onSelect={val => {
                      tags.value[item.id] = val
                    }}
                    {...restProps}
                  />
                </div>
              )
            })}
          </div>
          <footer class="van-safe-area-bottom van-hairline--top">
            <Button class={styles.btn} round onClick={resetTags}>
              重置
            </Button>
            <Button
              class={styles.btn}
              type="primary"
              round
              onClick={() => emit('confirm', tags.value, names)}
            >
              确认
            </Button>
          </footer>
        </div>
      )
    }
  }
})
