<template>
  <div class="n-options-tree-item">
    <div class="n-options-line" :class="getOptionClass(option, state.value, state.cursorValue)">
      <n-icon size="16" class="n-options-tree-arrow" type="drop-right" scene="gray" :style="styles" @click="onOptionArrowClick"></n-icon>
      <n-checkbox-icon v-if="multiple" class="n-options-tree-checkbox" :value="isSameFormValueArray(option.value, state.value)" :disabled="option.disabled"
                       @click.native="onOptionClick"></n-checkbox-icon>
      <n-builder v-if="builder" :name="builder" :value="state.value" :option="option" :click="onOptionClick"></n-builder>
      <div v-else class="n-options-label" :title="option.label" :data-value="option.value" @click="onOptionClick">{{option.label}}</div>
      <div v-if="multiple && children.length" class="n-link-primary" @click="onOptionSelectAll">{{isSelectedAll ? '取消' : '全选'}}</div>
    </div>
    <template v-if="children.length && option._isExpand">
      <template v-for="child in children">
        <n-options-tree-item :key="child.value" v-bind="$props" :option="child" :index="index + 1" v-on="$listeners"></n-options-tree-item>
      </template>
    </template>
  </div>
</template>
<script>
import NBuilder from '@uif/next/lib/components/builder'
import NCheckboxIcon from '@uif/next/lib/components/checkbox-icon'
import NIcon from '@uif/next/lib/components/icon'
import { prop, getOptionChildren, isSameFormValueArray } from '@uif/next/lib/utils/tools'
import {getOptionClass, isOptionAvailable, hasOptionChildren, getOptionChildrenDeep} from '_common/formUtils'

export default {
  name: 'n-options-tree-item',
  components: {
    NBuilder,
    NIcon,
    NCheckboxIcon
  },
  props: {
    option: prop.object(),
    // SearchState
    state: prop.object(),
    // 自定义渲染
    builder: prop.builder(),
    // 是否多选
    multiple: prop.boolean(),
    index: prop.number(),
    // 自动获取最后一级作为 options
    constructed: prop.boolean()
  },
  data () {
    return {
      getOptionClass,
      isSameFormValueArray,
      visible: false
    }
  },
  computed: {
    children ({option, constructed}) {
      return constructed ? getOptionChildren(option).filter(option => hasOptionChildren(option)) : getOptionChildren(option)
    },
    // 当前是否全选
    isSelectedAll ({multiple, constructed, children, state, option}) {
      return multiple && children.length && getOptionChildrenDeep(option, constructed).every(option => isSameFormValueArray(option.value, state.value))
    },
    // 偏移样式
    styles ({option, index, children}) {
      return {
        marginLeft: index * 16 + 8 + 'px',
        visibility: !children.length ? 'hidden' : '',
        transform: option._isExpand ? 'rotate(-90deg)' : ''
      }
    }
  },
  methods: {
    // 点击箭头
    onOptionArrowClick () {
      this.$set(this.option, '_isExpand', !this.option._isExpand)
    },
    // 点击行文本
    onOptionClick () {
      if (isOptionAvailable(this.option)) {
        this.$emit('option-click', this.option)
      }
    },
    // 点击全选
    onOptionSelectAll () {
      const options = getOptionChildrenDeep(this.option, this.constructed)
      this.$emit('select-all', options, !this.isSelectedAll)
    }
  }
}
</script>
