<template>
  <div
    class="s-chip row inline items-center"
    :class="{
      tag: tag,
      square: square,
      floating: floating,
      pointing: pointing,
      small: small || floating,
      [`pointing-${pointing}`]: pointing,
      [`bg-${color}`]: color,
      'text-white': color
    }"
    @click="__onClick"
  >
    <div
      v-if="icon || avatar"
      class="s-chip-side chip-left row flex-center"
      :class="{'chip-detail': detail}"
    >
      <s-icon v-if="icon" :name="icon"></s-icon>
      <img v-else-if="avatar" :src="avatar" />
    </div>

    <slot></slot>

    <s-icon v-if="iconRight" :name="iconRight" class="on-right"></s-icon>

    <div v-if="closable" class="s-chip-side chip-right row flex-center">
      <s-icon
        v-if="closable"
        name="cancel"
        class="cursor-pointer"
        @click.stop="$emit('close')"
      ></s-icon>
    </div>
  </div>
</template>

<script>
import { QIcon } from '../icon'

export default {
  name: 's-chip',
  components: {
    QIcon
  },
  props: {
    small: Boolean,
    tag: Boolean,
    square: Boolean,
    floating: Boolean,
    pointing: {
      type: String,
      validator: v => ['up', 'right', 'down', 'left'].includes(v)
    },
    color: String,
    icon: String,
    iconRight: String,
    avatar: String,
    closable: Boolean,
    detail: Boolean
  },
  methods: {
    __onClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
