
<template>
  <div
    class="bx-cell-group"
    >
    <div
      v-if="title"
      class="bx-cell-group-title-line bx-hairline--bottom"
      >
      <span class="bx-cell-group-title">
        {{ title }}
      </span>
      <span
        @click="clickHandler"
        v-if="isLink || linkText || $slots.right"
        class="bx-cell-group-link"
        >
        <slot
          name="right"
          >
          <span
            class="bx-cell-group-link-btn"
            />
          <span
            class="bx-cell-group-link-text"
            v-if="linkText"
            >
            {{ linkText }}
          </span>
          <bxs-icon
            class="bx-cell-group-link-icon"
            v-if="isLink"
            name="arrow-right"
            />
        </slot>
      </span>
    </div>
    <div
      class="bx-cell-group-cells"
      >
      <slot />
    </div>
    <div
      @click="showAllCell = true"
      class="bx-cell-group-more-line bx-hairline--top"
      v-if="moreThreshold > 0 && !showAllCell"
      >
      <span class="bx-cell-group-more-text">
        {{ moreText }}
      </span>
      <bxs-icon
        class="bx-cell-group-more-icon"
        name="arrow-down"
        />
    </div>
  </div>
</template>
<script>
import { create } from '../utils'

export default create({
  name: 'cell-group',
  props: {
    // 分组标题
    title: {
      type: String,
      default: '',
    },
    // 分组右上角文案, eg: '更多'
    linkText: {
      type: String,
      default: '',
    },
    // 是否展示右侧箭头并开启点击反馈
    isLink: {
      type: Boolean,
      default: false,
    },
    // 点击后跳转的url (有值则 click 事件不会被触发)
    linkUrl: {
      type: String,
      default: '',
    },
    // isLink=true 且 linkUrl 有值时生效, true 代表替换浏览器历史
    replace: {
      type: Boolean,
      default: false,
    },
    // 展示《查看更多》的列表阀值(正整数)
    //    0 代表永不展示《查看更多》
    //    2 代表超过两个时展示《查看更多》
    moreThreshold: {
      type: Number,
      default: 0,
      validator: val => val >= 0 && String(val).indexOf('.') === -1,
    },
    // 底部《查看更多》的文案
    moreText: {
      type: String,
      default: '查看更多',
    },
  },
  data() {
    return {
      showAllCell: false,
    }
  },
  created() {
    this.validDefaultSlots()
  },
  methods: {
    validDefaultSlots() {
      if (
        this.$slots.default.some(
          slot =>
            (slot.componentOptions &&
              slot.componentOptions.tag !== 'bxs-cell') ||
            (!slot.componentOptions && slot.tag) ||
            (slot.tag === undefined && slot.text.trim() !== ''),
        )
      ) {
        throw new Error('bxs-cell-group 组件的默认 slot 中支持 bxs-cell 组件')
      }
    },
    clickHandler() {
      if (this.linkUrl) {
        if (this.replace) {
          window.location.replace(this.linkUrl)
        } else {
          window.location.href = this.linkUrl
        }
      } else {
        this.$emit('click')
      }
    },
  },
})
</script>
<style>
@import './index.css';
</style>
