<template>
  <div
    class="weui_cell"
    :class="classes"
    @click="onClick"
  >
    <div class="weui_cell_hd">
      <slot name="icon" />
    </div>
    <div
      class="weui_cell_bd"
      :class="bdClasses"
    >
      <div>
        {{ title }}
        <slot name="after-title" />
      </div>
      <inline-desc>{{ inlineDesc }}</inline-desc>
    </div>
    <div
      class="weui_cell_ft"
      :class="{'weui_cell_primary':primary==='content'}"
    >
      {{ value }}
      <slot name="value" />
      <slot />
    </div>
    <div :class="{'with_arrow': isLink || !!link}" />
    <slot name="child" />
  </div>
</template>

<script>
import InlineDesc from '../inline-desc'
import { go } from '../../libs/router'

export default {
  components: {
    InlineDesc
  },
  props: {
    bdStart: {
      type: Boolean,
      default: false
    },
    title: String,
    value: [String, Number],
    isLink: Boolean,
    inlineDesc: [String, Number],
    primary: {
      type: String,
      default: 'title'
    },
    link: {
      type: [String, Object]
    }
  },
  computed: {
    bdClasses () {
      return {
        'weui_cell_primary': this.primary === 'title'
      }
    },
    classes () {
      return {
        'vux-tap-active': this.isLink || !!this.link,
        'weui_cell_bd__start': this.bdStart
      }
    }
  },
  methods: {
    onClick () {
      go(this.link, this.$router)
    }
  }

}
</script>
