<template>
  <view class="zui-cell" hover-class="active" hover-start-time="0" hover-stay-time="200" :class="classRender" @click="onClick">
    <view 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>
    </view>
    <view v-if="$slots.title" class="zui-cell__title">
      <slot name="title"></slot>
      <view v-if="$slots.label" class="zui-cell__label">
        <slot name="label"></slot>
      </view>
      <view v-else-if="label" class="zui-cell__label">
        <text>{{ label }}</text>
      </view>
    </view>
    <view v-else-if="title" class="zui-cell__title">
      <text>{{ title }}</text>
      <view v-if="$slots.label" class="zui-cell__label">
        <slot name="label"></slot>
      </view>
      <view v-else-if="label" class="zui-cell__label">
        <text>{{ label }}</text>
      </view>
    </view>
    <view v-if="$slots.default" class="zui-cell__value">
      <slot></slot>
    </view>
    <view v-else-if="value" class="zui-cell__value">{{ value }}</view>
    <view v-if="$slots.right || (rightIcon && isLink)" class="zui-cell__right-icon">
      <slot v-if="$slots.right" name="right"></slot>
      <zui-icon v-else-if="rightIcon && isLink" :name="rightIcon"></zui-icon>
    </view>
  </view>
</template>

<script>
import ZuiIcon from '../icon/index.vue';

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

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