<template>
  <div
    :class="[
      b({
        center,
        required,
        clickable: isLink || clickable
      }),
      { 'eye-hairline': border }
    ]"
    @click="onClick"
  >
    <slot name="icon">
      <i v-if="icon" :class="['eye-icon','eye-icon-'+icon]" />
    </slot>
    <div v-if="title || $slots.title" :class="b('title')">
      <slot name="title">
        <span v-text="title" />
        <div v-if="label" v-text="label" :class="b('label')" />
      </slot>
    </div>
    <div
      v-if="value || $slots.default"
      :class="b('value', { alone: !$slots.title && !title })"
    >
      <slot>
        <span v-text="value" />
      </slot>
    </div>
    <slot name="right-icon">
      <i v-if="isLink" :class="['eye-icon','eye-icon-right']" />
    </slot>
    <slot name="extra" />
  </div>
</template>

<script>


import { Component } from 'eye-core';
import RouterLink from 'eye-ui/src/mixins/router-link';

export default Component({
  name: 'cell',

  components: { },

  mixins: [ RouterLink ],

  props: {
    icon: String,
    title: String,
    label: String,
    center: Boolean,
    isLink: Boolean,
    required: Boolean,
    clickable: Boolean,
    value: [String, Number, Boolean, Date, Object, Array],
    border: {
      type: Boolean,
      default: true
    }
  },

  methods: {

    onClick() {
      this.$emit('click');
      this.routerLink();
    }
  }
});

</script>
