<template>
  <n-options-container class="n-options-children" v-bind="{visible, builders}">
    <div class="n-options-children-main">
      <div class="n-options-tree n-options-children-sider n-small-scrollbar">
        <template v-for="parent in _parents">
          <n-options-tree-item :key="parent.value" :option="parent" :builder="builders.parent" :state="{value: state.parentValue}"
                               :constructed="constructed" @option-click="onParentClick"></n-options-tree-item>
        </template>
      </div>
      <div class="n-options-children-sider">
        <div class="n-options-children-parent" v-if="state.parent">
          <div class="n-options-label" :title="state.parent.label">{{state.parent.label}}</div>
          <div v-if="multiple && _options.length" class="n-link-primary" @click="onSelectAll">{{isSelectedAll ? '取消' : '全选'}}</div>
        </div>
        <div class="n-options-children-items n-small-scrollbar">
          <template v-for="option in _options">
            <div :key="option.value" 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>
          <div v-if="state.loading" class="n-options-loading flex-center">
            <n-loading-icon size="20" color="#128eff"></n-loading-icon>
            <div>加载中...</div>
          </div>
          <div v-else-if="!state.loading && _options.length <= 0" class="n-options-empty">
            <n-builder v-if="builders.empty" :name="builders.empty"></n-builder>
            <div v-else class="n-options-empty-default">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div class="n-options-footer" v-if="state.isFilter && multiple">
      <n-button size="small" type="primary" @click="$emit('on-confirm')">确定</n-button>
    </div>
  </n-options-container>
</template>
<script>
import NCheckboxIcon from '@uif/next/lib/components/checkbox-icon'
import NBuilder from '@uif/next/lib/components/builder'
import NLoadingIcon from '@uif/next/lib/components/loading-icon'
import NOptionsTreeItem from '../options-tree/options-tree-item'
import NOptionsContainer from '../options-virtual-list/options-container'
import {prop, isSameFormValueArray} from '@uif/next/lib/utils/tools'
import {getOptionClass, isOptionAvailable, getConstructionChildren} from '_common/formUtils'

export default {
  name: 'n-options-children-paster',
  components: {
    NCheckboxIcon,
    NBuilder,
    NLoadingIcon,
    NOptionsContainer,
    NOptionsTreeItem
  },
  props: {
    // multiple 下 value 需为 Array
    // value: {}, => state.value
    // 待选值
    // cursorValue: {}, => state.cursorValue
    // 加载中
    // loading: prop.boolean(), => state.loading
    // SearchState
    state: prop.object(),
    // 父选项
    parents: prop.array(),
    // 自动获取最后一级作为 options
    constructed: prop.boolean(),
    // 子选项
    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,
      visible: false
    }
  },
  computed: {
    _parents ({parents, constructed, options}) {
      return constructed ? options : parents
    },
    _options ({constructed, state, options}) {
      return constructed ? getConstructionChildren(state.parent) : state.options || options
    },
    // 当前是否全选
    isSelectedAll ({_options, state}) {
      return state.parent && _options.length && _options.every(option => isSameFormValueArray(option.value, state.value))
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    },
    onParentClick (parent) {
      this.$emit('parent-click', parent)
    },
    // 全选
    onSelectAll () {
      this.$emit('select-all', this._options, !this.isSelectedAll)
    },
    // 点击选项
    onOptionLineClick (option) {
      if (isOptionAvailable(option)) {
        this.$emit('option-click', option)
      }
    }
  }
}
</script>
