<template>
  <n-options-virtual-list class="n-options" v-bind="{visible, state, _options, virtual, multiple, builders, maxHeight}"
                          :has-search="state.isFilter && state.searching">
    <template #option="{option}">
      <div class="n-options-line" :class="getOptionClass(option, state.value, state.cursorValue)" @click="onOptionLineClick(option)">
        <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>
        </template>
      </div>
    </template>
    <template #footer>
      <div class="n-options-footer" v-if="state.isFilter && multiple">
        <n-checkbox-icon :value="isSelectedAll" :indeterminate="isIndeterminate" @click.native="onSelectAll"></n-checkbox-icon>
        <n-button size="small" type="primary" @click="$emit('on-confirm')">确定</n-button>
      </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 {prop, isSameFormValueArray} from '@uif/next/lib/utils/tools'
import {getOptionClass, hasOptionChildren, isOptionAvailable} from '_common/formUtils'

export default {
  name: 'n-options-paster',
  components: {
    NOptionsVirtualList,
    NBuilder,
    NCheckboxIcon
  },
  props: {
    // SearchState
    state: prop.object(),
    // 选项
    options: prop.array(),
    // 开启虚拟滚动
    virtual: prop.boolean(),
    // 是否多选
    multiple: prop.boolean(),
    // 自定义渲染
    builders: prop.object(() => ({
      header: null,
      option: null,
      footer: null,
      empty: null
    })),
    // 最大高度
    maxHeight: prop.number(270)
  },
  data () {
    return {
      getOptionClass,
      isSameFormValueArray,
      hasOptionChildren,
      visible: false
    }
  },
  computed: {
    // 只有最外层，需要取state
    _options ({state, options}) {
      return state.options || options
    },
    // 当前是否全选
    isSelectedAll ({state, multiple, _options}) {
      return state.isFilter && multiple && _options.length && _options.every(option => isSameFormValueArray(option.value, state.value))
    },
    // 是否半选
    isIndeterminate ({state, multiple, _options, isSelectedAll}) {
      return state.isFilter && multiple && _options.length && !isSelectedAll && _options.some(option => isSameFormValueArray(option.value, state.value))
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    },
    // 点击选项
    onOptionLineClick (option) {
      if (isOptionAvailable(option)) {
        this.$emit('option-click', option)
      }
    },
    // 全选
    onSelectAll () {
      this.$emit('select-all', this._options, !this.isSelectedAll)
    }
  }
}
</script>
