<template>
  <div class="zui-cell" :class="classRender" @click="onClick">
    <div v-if="$slots.icon || icon" class="zui-cell__left-icon">
      <slot v-if="$slots.icon" name="icon"></slot>
      <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
    </div>
    <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">
        <span>{{ label }}</span>
      </div>
    </div>
    <div v-else-if="title" class="zui-cell__title">
      <span>{{ title }}</span>
      <div v-if="$slots.label" class="zui-cell__label">
        <slot name="label"></slot>
      </div>
      <div v-else-if="label" class="zui-cell__label">
        <span>{{ label }}</span>
      </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 || rightIcon" class="zui-cell__right-icon">
      <slot v-if="$slots.right" name="right"></slot>
      <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cell',
  props: {
    icon: String,
    title: String,
    value: String,
    label: String,
    isLink: Boolean,
    rightIcon: {
      type: String,
      default: 'enter',
    },
  },
  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>
