<template>
  <span
    class="co-badge"
    :style="{ backgroundColor: color }"
    :class="['is-' + type, 'is-size-' + size]">
    <slot></slot>
  </span>
</template>

<script>
/**
 * co-badge
 * @module components/badge
 * @desc 徽章
 * @param {string} [type=primary] 组件样式，可选 primary, error, success, warning
 * @param {string} [color] - 传入颜色值
 * @param {string} [size=normal] - 尺寸，接受 normal, small, large
 *
 * @example
 * <co-badge color="error">错误</co-badge>
 * <co-badge color="#333">30</co-badge>
 */
export default {
  name: 'co-badge',

  props: {
    color: String,
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'normal'
    }
  }
};
</script>
<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component badge {
      color: $color-white;
      text-align: center;
      display: inline-block;

      @when success {
        background-color: $success-color;
      }

      @when primary {
        background-color: $color-blue;
      }

      @when error {
        background-color: $error-color;
      }

      @when warning {
        background-color: $warning-color;
      }

      @when size-normal {
        border-radius: 0.6rem;
        font-size: 0.75rem;
        padding: 0.1rem 0.4rem;
      }

      @when size-small {
        border-radius: 0.4rem;
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
      }

      @when size-large {
        border-radius: 0.7rem;
        font-size: 0.9rem;
        padding: 0.1rem 0.5rem;
      }
    }
  }
</style>
