<script>
import NOptions from '@uif/next/lib/components/options'
import NOptionsChildrenPaster from './options-children-paster'
import {Paster, prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-options-children',
  extends: NOptions,
  props: {
    // 父选项
    parents: prop.array(),
    // 自动获取最后一级作为 options
    constructed: prop.boolean()
  },
  methods: {
    onParentClick (parent) {
      this.$set(this.state, 'parent', parent)
      this.$set(this.state, 'parentValue', parent.value)
      this.$emit('parent-click', parent, this.state)
      return this.state._doSearch?.()
    },
    // 展开选项
    updatePaster () {
      this.paster = this.paster || new Paster({
        reference: this.$el,
        ctor: {
          creator: this,
          component: NOptionsChildrenPaster,
          props: {
            builders: this.builders,
            multiple: this.multiple,
            state: this.state,
            parents: this.parents,
            options: this.options,
            constructed: this.constructed
          },
          scopedSlots: this.$scopedSlots,
          nativeOn: {
            mouseenter: this.onMouseenter,
            mouseleave: this.onMouseleave
          },
          on: {
            'parent-click': this.onParentClick,
            'option-click': this.onOptionClick,
            'select-all': (options, value) => this.$emit('select-all', options, value),
            'on-confirm': () => this.$emit('on-confirm')
          }
        },
        options: {
          placement: 'bottom-start',
          offset: [0, 4],
          styles: {
            width: this.width + 'px'
          },
          ...this.pasterOptions
        },
        autoDestroy: this.autoDestroy,
        onStateChange: (value) => this.setNValue(value)
      })
      this.nValue ? this.paster.show() : this.paster.hidden()
    }
  }
}
</script>
