<template>
  <n-options-children ref="options" v-model="isFocus" v-bind="{disabled, state, parents, options, constructed, maxHeight, autoClose: false, builders, multiple}"
                      @click="onOptionSelect" @parent-click="onParentClick" @select-all="onSelectAll" @on-confirm="onSubmit">
    <n-filter-refer class="n-select-children-filter" v-model="isFocus" v-bind="{label, state, name, values, multiple, disabled, clearable}"
                    @u-update="onReferUpdateValues"></n-filter-refer>
  </n-options-children>
</template>
<script>
import NOptionsChildren from '@uif/next/lib/components/options-children'
import NSelectFilter from '@uif/next/lib/components/select-filter'
import {prop} from '@uif/next/lib/utils/tools'
import {parseConstructionOptions, optionsSelectAll} from '_common/formUtils'

export default {
  inheritAttrs: false,
  name: 'n-select-children-filter',
  // extends: NSelectFilter,
  extends: {...NSelectFilter, created: undefined},
  props: {
    // 父选项
    parents: prop.array(),
    // 自动获取最后一级作为 options
    constructed: prop.boolean()
  },
  components: {
    NOptionsChildren
  },
  created () {
    this.state.cacheOptions(this.values)
    const options = this.constructed ? parseConstructionOptions(this.options) : this.options
    this.state.updateOptions(options)
    this.onPropValueUpdate()
  },
  methods: {
    onParentClick (parent, state) {
      this.$emit('parent-click', parent, state)
    },
    onSelectAll (options, isSelected) {
      optionsSelectAll(this.scopeValue, options, isSelected)
      this.state.updateValuesByValue(this.scopeValues, this.scopeValue)
    }
  }
}
</script>
