<template>
  <n-options-virtual-list class="n-options-cascader" v-bind="{visible, state, _options, virtual, multiple, builders, maxHeight, hasArrow}"
                          :has-search="index <= 1 && state.isFilter && state.searching">
    <template #option="{option}">
      <div class="n-options-line" :class="getOptionClass(option, state.value, state.cursorValue)" @click="onOptionLineClick(option)"
           @mouseenter="onLineMouseenter($event, option)" @mouseleave="onLineMouseleave">
        <n-builder v-if="builders.option" :name="builders.option" :value="state.value" :option="option"></n-builder>
        <template v-else>
          <n-checkbox-icon v-if="multiple" class="n-options-checkbox" :value="isSameFormValueArray(option.value, state.value)" :disabled="option.disabled"></n-checkbox-icon>
          <div class="n-options-label" :title="option.label" :data-value="option.value">{{option.label}}</div>
          <n-icon v-if="hasOptionChildren(option)" class="n-options-arrow" type="drop-right"></n-icon>
        </template>
      </div>
    </template>
  </n-options-virtual-list>
</template>
<script>
import NOptionsVirtualList from '@uif/next/lib/components/options-virtual-list'
import NCheckboxIcon from '@uif/next/lib/components/checkbox-icon'
import NBuilder from '@uif/next/lib/components/builder'
import NIcon from '@uif/next/lib/components/icon'
import { prop, getOptionChildren } from '@uif/next/lib/utils/tools'
import {hasOptionChildren} from '_common/formUtils'
import NOptionsPaster from '../options/options-paster'

export default {
  name: 'n-options-cascader-paster',
  extends: NOptionsPaster,
  components: {
    NOptionsVirtualList,
    NBuilder,
    NIcon,
    NCheckboxIcon
  },
  props: {
    hasArrow: prop.boolean(),
    index: prop.number()
  },
  computed: {
    // 只有最外层，需要取state
    _options ({index, state, options}) {
      return index <= 1 && 'options' in state ? state.options : options
    }
  },
  methods: {
    // 移入 option-line
    onLineMouseenter (event, option) {
      if (hasOptionChildren(option)) {
        this.$emit('enter', {instance: this, event, options: getOptionChildren(option)})
      }
    },
    // 移出 option-line
    onLineMouseleave () {
      this.$emit('leave', {instance: this})
    }
  }
}
</script>
