<template>
  <div :name="name" :class="getFilterBorderClass({disabled, isFocus, pointer: true})" @click="toFocus">
    <!-- label -->
    <span v-if="label" :class="getFilterValueClass({disabled, label: true})">{{label}}</span>
    <!-- 有值 / 无数据 -->
    <span v-if="hasValue" :class="getFilterValueClass({disabled})">
      <template v-for="text in textList">
        <span class="n-date-filter-refer-text" :key="text">{{text}}</span>
      </template>
    </span>
    <!-- icon -->
    <n-icon v-if="iconProps" class="n-filter-icon" v-bind="iconProps" @click="onIconClick"></n-icon>
  </div>
</template>

<script>
import NIcon from '@uif/next/lib/components/icon'
import {isValueArray, prop} from '@uif/next/lib/utils/tools'
import {getFilterBorderClass, getFilterValueClass} from '_common/formUtils'

export default {
  name: 'n-date-picker-refer',
  components: {
    NIcon
  },
  model: {
    prop: 'isFocus',
    event: 'setFocus'
  },
  props: {
    // 激活状态
    isFocus: prop.boolean(),
    // 表单名称
    name: prop.string(),
    // 表单label
    label: prop.string(),
    // 可显示的内容
    labels: prop.array(),
    // 禁用
    disabled: prop.boolean(),
    // 提示文本
    placeholder: prop.string('请选择'),
    // 可删除
    clearable: prop.boolean()
  },
  data () {
    return {
      getFilterBorderClass,
      getFilterValueClass
    }
  },
  computed: {
    // 有值
    hasValue ({labels}) {
      return isValueArray(labels)
    },
    // 展示的值
    textList ({labels, placeholder}) {
      return isValueArray(labels) ? labels : [placeholder]
    },
    // 右侧icon
    iconProps ({hasValue, clearable, disabled}) {
      if (hasValue && clearable && !disabled) {
        return {type: 'circle-delete', scene: 'light', isRemove: true}
      }
      return {type: 'calendar-empty'}
    }
  },
  methods: {
    // 获焦事件
    toFocus () {
      if (!this.disabled) {
        this.$emit('setFocus', true)
      }
    },
    // 删除全部
    onIconClick (event) {
      if (this.iconProps.isRemove) {
        event.stopPropagation()
        this.$emit('u-update', [])
      }
    }
  }
}
</script>
