<template>
  <div :name="name" :class="getBorderClass({border, disabled, isFocus, pointer: true, multiple})" @click="toFocus">
    <!-- 单选 -->
    <template v-if="!multiple">
      <!--  搜索 -->
      <n-input-lite v-if="state.searching" v-model="state.keyword" :placeholder="state.placeholder"
                    :class="getValueClass({size, disabled, ellipsis: true, rightIcon: iconProps})"
                    @u-update="onUserSearch" :focusing="true"></n-input-lite>
      <!-- 单选 picker -->
      <n-builder v-else-if="hasValue && builder" :name="builder" :option="values[0]" :values="values"></n-builder>
      <!-- 有值 / 无数据 -->
      <span v-else :class="getValueClass({size, disabled, ellipsis: true, rightIcon: iconProps, placeholder: !hasValue})">{{hasValue ? firstLabel : placeholder}}</span>
    </template>
    <!-- 多选 -->
    <template v-else>
      <template v-for="(option, index) in values">
        <div class="n-form-refer" :class="`n-form-refer-${size}`" :key="option.value">
          <n-builder v-if="builder" :name="builder" :option="option" :values="values"></n-builder>
          <span v-else class="ellipsis">{{option.label}}</span>
          <n-icon v-if="clearable" class="n-form-refer-icon" size="16" type="circle-delete" scene="light" @click="onIconIndexClick($event, index)"></n-icon>
        </div>
      </template>
      <!--  搜索 -->
      <n-input-lite v-if="state.searching" v-model="state.keyword" :placeholder="state.placeholder" class="n-form-refer-search"
                    @u-update="onUserSearch" :focusing="true"></n-input-lite>
      <!-- 无数据 -->
      <span v-else-if="!hasValue" class="n-form-refer-placeholder">{{placeholder}}</span>
    </template>
    <!-- icon -->
    <n-icon v-if="iconProps" class="n-form-icon" v-bind="iconProps" @click="onIconClick"></n-icon>
  </div>
</template>

<script>
import NIcon from '@uif/next/lib/components/icon'
import NBuilder from '@uif/next/lib/components/builder'
import NInputLite from '@uif/next/lib/components/input-lite'
import {isValueArray, prop} from '@uif/next/lib/utils/tools'
import {getBorderClass, getValueClass, getValuesFirstLabel} from '_common/formUtils'

export default {
  name: 'n-form-refer',
  components: {
    NIcon,
    NBuilder,
    NInputLite
  },
  model: {
    prop: 'isFocus',
    event: 'setFocus'
  },
  props: {
    // 激活状态
    isFocus: prop.boolean(),
    // 表单名称
    name: prop.string(),
    // 选中的option列表
    values: prop.array(),
    // 搜索选项
    state: prop.object(),
    // 多选
    multiple: prop.boolean(),
    // input 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle'),
    // input 边框形状
    border: prop.inArray(['none', 'line', 'rect'], 'rect'),
    // 禁用
    disabled: prop.boolean(),
    // 提示文本
    placeholder: prop.string('请选择'),
    // 可删除
    clearable: prop.boolean(),
    // 渲染器
    builder: prop.builder(),
    // 下拉图标
    dropIconType: prop.string('drop-down')
  },
  data () {
    return {
      getBorderClass,
      getValueClass
    }
  },
  computed: {
    // 有值
    hasValue ({values}) {
      return isValueArray(values)
    },
    // 已选值
    firstLabel ({values}) {
      return getValuesFirstLabel(values)
    },
    // 右侧icon
    iconProps ({hasValue, multiple, clearable, disabled, dropIconType}) {
      if (hasValue && !multiple && clearable && !disabled) {
        // 删除按钮
        return {type: 'circle-delete', scene: 'light', isRemove: true}
      } else if (dropIconType) {
        // 下拉按钮
        return {type: dropIconType}
      }
      return null
    }
  },
  methods: {
    // 获焦事件
    toFocus () {
      if (!this.disabled) {
        this.$emit('setFocus', true)
      }
    },
    // 用户正在输入
    onUserSearch () {
      this.state.doSearch()
    },
    // 删除全部
    onIconClick (event) {
      if (this.iconProps.isRemove) {
        event.stopPropagation()
        this.$emit('u-update', [])
      }
    },
    // 删除一个
    onIconIndexClick (event, index) {
      event.stopPropagation()
      const values = this.values.filter((v, i) => i !== index)
      this.$emit('u-update', values)
    }
  }
}
</script>
