<template>
  <a class="co-tab-item theme-border-color"
    @click="$parent.$emit('input', id)"
    :class="{ 'is-selected theme-color': $parent.value === id }">
    <div class="co-tab-item-icon"><slot name="icon"></slot></div>
    <div class="co-tab-item-label"><slot></slot></div>
  </a>
</template>

<script>
/**
 * co-tab-item
 * @module components/tab-item
 * @desc 搭配 tabbar 或 navbar 使用
 * @param {*} id - 选中后的返回值，任意类型
 * @param {slot} [icon] - icon 图标
 * @param {slot} - 文字
 *
 * @example
 * <co-tab-item>
 *   <img slot="icon" src="http://placehold.it/100x100">
 *   订单
 * </co-tab-item>
 */
export default {
  name: 'co-tab-item',

  props: ['id']
};
</script>

<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component tab-item {
      display: block;
      padding: 0.20rem 0;
      flex: 1;
      text-decoration: none;
      color: #777;

      @descendent icon {
        size: 1.2rem;
        margin: 0 auto 0.25rem;

        &:empty {
          display: none;
        }

        & > * {
          display: block;
          size: 100%;
        }
        & > .coicon {
          font-size: 24px;
        }
      }

      @descendent label {
        color: inherit;
        font-size: $tab-item-font-size;
        line-height: 1;
      }
    }
  }
</style>
