<template>
  <div class="zui-cell" :class="classRender" @click="onClick">
    <div v-if="$slots.icon" class="zui-cell__left-icon">
      <slot name="icon"></slot>
    </div>
    <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
    <div v-if="$slots.title" class="zui-cell__title">
      <slot name="title"></slot>
      <div v-if="$slots.label" class="zui-cell__label">
        <slot name="label"></slot>
      </div>
      <div v-else-if="label" class="zui-cell__label">
        {{ label }}
      </div>
    </div>
    <div v-else-if="title" class="zui-cell__title">
      {{ title }}
      <div v-if="$slots.label" class="zui-cell__label">
        <slot name="label"></slot>
      </div>
      <div v-else-if="label" class="zui-cell__label">
        {{ label }}
      </div>
    </div>
    <div v-if="$slots.default" class="zui-cell__value">
      <slot></slot>
    </div>
    <div v-else-if="value" class="zui-cell__value">{{ value }}</div>
    <div v-if="$slots.right" class="zui-cell__right-icon">
      <slot name="right"></slot>
    </div>
    <div v-else-if="rightIcon" class="zui-cell__right-icon"></div>
  </div>
</template>

<script>
export default {
  name: 'Cell',
  props: {
    icon: String,
    title: String,
    value: String,
    label: String,
    isLink: Boolean,
    rightIcon: String,
  },
  computed: {
    classRender: function() {
      return {
        'zui-cell--clickable': this.isLink
      }
    }
  },
  methods: {
    onClick: function() {
      if (this.$listeners['click']) {
        this.$emit('click');
      }
    }
  }
}
</script>

<style>
@import "./index.css";
</style>