
<template>
  <li class="ibps-toolbar-item van-hairline--right">
    <van-button :type="action.type" :plain="action.plain" :disabled="action.disabled">
      <van-icon v-if="action.icon" :name="action.icon" :class-prefix="iconPrefix" class="btn_desc" />
      <van-checkbox
        v-if="action.type == 'checkbox'"
        v-model="action.checked"
        class="ibps-toolbar-chb"
      >
        {{ action.name }}
      </van-checkbox>
      <span v-else :class="action.name && action.name.length>2?'':' btn_desc'">{{ action.name|inputBtnText }}</span>
    </van-button>
  </li>
</template>

<script>
export default {
  name: 'ibps-toolbar-item',
  filters: {
    inputBtnText(value) {
      if (value && value.length > 4) {
        return value.substring(0, 4) + '...'
      }
      return value
    }
  },
  props: {
    iconPrefix: String,
    action: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .btn_desc{
    letter-spacing: 4px;
  }
</style>
