<template>
  <div class="zui-cell" :class="bindClass" v-on="bindEvents">
    <div class="zui-cell__content" :class="bindContentClass">
      <!-- 左侧图标 -->
      <template v-if="$slots['icon'] || icon">
        <div class="zui-cell__icon">
          <slot v-if="$slots.icon" name="icon"></slot>
          <zui-icon v-else-if="icon" v-bind="bindIcon"></zui-icon>
        </div>
      </template>
      <!-- 标题 -->
      <div class="zui-cell__title">
        <slot v-if="$slots['title']" name="title"></slot>
        <span v-else>{{ title }}</span>
        <template v-if="$slots['label'] || label">
          <div class="zui-cell__label">
            <slot v-if="$slots['label']" name="label"></slot>
            <span v-else>{{ label }}</span>
          </div>
        </template>
      </div>
      <!-- 内容 -->
      <div class="zui-cell__value">
        <slot v-if="$slots['default']"></slot>
        <span v-else>{{ value }}</span>
      </div>
      <!-- 右侧图标 -->
      <template v-if="$slots['right-icon'] || isLink || rightIcon">
        <div class="zui-cell__right-icon">
          <slot v-if="$slots['right-icon']" name="right-icon"></slot>
          <zui-icon v-else :name="rightIcon || 'enter'"></zui-icon>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import MIX_BUTTON from '../mixins/button';

export default {
  name: 'Cell',
  mixins: [MIX_BUTTON],
  props: {
    title: String,
    label: String,
    value: [String, Number],
    icon: [String, Object],
    rightIcon: String,
    size: String,
    border: {
      type: Boolean,
      default: true,
    },
    solid: Boolean,
    long: Boolean,
    short: Boolean,
    isLink: {
      type: Boolean,
      default: undefined,
    },
    clickable: {
      type: Boolean,
      default: undefined,
    },
    hoverClass: {
      type: String,
      default: 'zui-cell--hover',
    },
    center: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    isClickable() {
      if (this.isLink) {
        return this.clickable !== false;
      }
      return this.clickable;
    },
    bindIcon() {
      if (typeof this.icon === 'object' && this.icon instanceof Object) {
        return this.icon;
      }
      return { name: this.icon };
    },
    bindClass() {
      return {
        'zui-cell--border-long': this.long,
        'zui-cell--border-short': this.short,
        'zui-cell--clickable': this.isClickable,
        'zui-cell--center': this.center,
        [this.hoverClass]: this.hover,
        [this.size]: !!this.size,
      };
    },
    bindContentClass() {
      const borderClass = `zui-cell--border${this.solid ? '-solid' : ''}`;
      return {
        [borderClass]: this.border,
      };
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>
