
<template>
  <div
    class="bx-cell"
    @click="cellClickHandler"
    :class="cellClass"
    >
    <!-- 左侧元素仅 logo 存在时显示 -->
    <div
      class="bx-cell-left"
      v-if="(logo && !logoRight) || icon"
      >
      <div class="bx-cell-image-wrapper">
        <img
          class="img-responsive"
          :src="logo"
          v-if="logo && !icon"
          >
        <bxs-icon
          :name="icon"
          :color="iconColor"
          :size="iconSize"
          :prefix="iconPrefix"
          v-if="icon"
          />
        <!-- isLink 为 false 时, 红点才会显示在左侧图片或图标右上角 -->
        <bxs-badge
          v-if="badge === true && !isLink"
          :subscript="true"
          />
        <bxs-badge
          v-if="typeof badge === 'string' && !isLink"
          :text="badge"
          :width="18"
          :subscript="true"
          />
      </div>
    </div>
    <div class="bx-cell-center-right">
      <div class="bx-cell-center">
        <div class="bx-cell-title-line">
          <span
            :class="{ 'bx-cell--one-line': titleOneLine }"
            class="bx-cell-title"
            >
            {{ title }}
          </span>
          <!-- 此处, 右侧时间文案只在有副标题时有效, 若副标题不存在, 则 value 代表《说明文案》处的文案 -->
          <span
            class="bx-cell-title-desc"
            v-if="this.subtitle && this.valueOrTime"
            >{{ valueOrTime }}</span>
        </div>
        <span
          class="bx-cell-subtitle"
          :class="{'bx-cell--one-line': subtitleOneLine}"
          v-if="subtitle || $slots.subtitle"
          >
          <slot name="subtitle">
            <span>{{ subtitle }}</span>
          </slot>
        </span>
      </div>
      <!-- 有副文案时, 不需要显示右侧的: 说明文字、点击图标、右侧红点 -->
      <div
        class="bx-cell-right"
        v-if="!subtitle && !$slots.subtitle"
        >
        <span
          @click="cellRightClickHandler"
          class="bx-cell-right-click-span"
          />
        <span
          class="bx-cell-right-value"
          v-if="value"
          >{{ value }}</span>
        <!-- isLink 为 true 时, 红点显示在右侧 -->
        <bxs-badge v-if="badge === true && isLink" />
        <bxs-badge
          v-if="typeof badge === 'string' && isLink"
          :text="badge"
          :width="18"
          />
        <bxs-icon
          name="arrow-right"
          v-if="isLink"
          />
      </div>
      <!-- logoRight 为 true 时, 图片在右侧展示 -->
      <div
        class="bx-cell-right-logo"
        v-if="logo && logoRight"
        >
        <img
          class="img-responsive"
          :src="logo"
          v-if="logo && !icon"
          >
      </div>
    </div>
  </div>
</template>
<script>
import Icon from '../icon/index'
import Badge from '../badge/index'
import { create } from '../utils'
import { timeFormatter } from '../utils/time'

export default create({
  name: 'cell',
  props: {
    // 列表项的主、副标题
    title: {
      type: String,
      required: true,
    },
    titleOneLine: {
      type: Boolean,
      default: true,
    },
    subtitle: {
      type: String,
      default: '',
    },
    subtitleOneLine: {
      type: Boolean,
      default: false,
    },
    // 列表项的右上角文案
    value: {
      type: String | Date, // eslint-disable-line no-bitwise
      default: '',
    },
    valueFormatter: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss',
    },
    // 图标设置
    icon: {
      type: String,
      default: '',
    },
    iconPrefix: {
      type: String,
      default: 'bx-icon',
    },
    iconColor: {
      type: String,
      default: '',
    },
    iconSize: {
      type: String,
      default: '',
    },
    // 图片 url
    logo: {
      type: String,
      default: '',
    },
    // 是否展示右侧箭头
    isLink: {
      type: Boolean,
      default: false,
    },
    // 小红点数字
    //    false=不显示, true=显示但无数字
    //    数字=显示小红点且显示数字
    // isLink 为true时显示在右侧, 否则显示在左侧图标或图片右上角
    badge: {
      type: Boolean | Number, // eslint-disable-line no-bitwise
      default: false,
    },
    // 图片是否显示在右侧
    logoRight: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    [Icon.name]: Icon,
    [Badge.name]: Badge,
  },
  methods: {
    cellRightClickHandler() {
      this.$emit('click-right')
    },
    cellClickHandler() {
      this.$emit('click')
    },
  },
  computed: {
    shouldHide() {
      // moreThreshold 为 0、或点击过查看更多时, 即可确定须展示全部
      if (this.$parent.showAllCell || this.$parent.moreThreshold === 0)
        return false
      const siblingCells = this.$parent.$children.filter(
        x => x.$options.name === 'bxs-cell',
      )
      const cellIdx = siblingCells.indexOf(this)
      return cellIdx >= this.$parent.moreThreshold
    },
    cellClass() {
      return {
        'bx-cell--multi-line': this.subtitle || this.$slots.subtitle,
        'bx-cell-logo-left': (this.logo && !this.logoRight) || this.icon,
        'bx-cell-logo-right': this.logo && this.logoRight,
        'bx-cell--hide': this.shouldHide,
      }
    },
    valueOrTime() {
      if (typeof this.value === 'object' && this.value instanceof Date) {
        if (this.valueFormatter) {
          return timeFormatter(this.valueFormatter, this.value)
        }
      }
      return this.value
    },
  },
})
</script>
<style>
@import './index.css';
</style>
