<template>
  <div v-if="topic" class="topic-wrap" @click="onClick">
    <div class="topic-icon">
      <span class="iconfont icon-tag"></span>
    </div>
    <span class="topic-text">{{topic}}</span>
  </div>
</template>

<script>
export default {
  name: 'WidgetTopic',
  props: {
    topic: String,
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style type="scss">
  .topic-wrap {
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    line-height: 44px;
    background-color: #f0f0f0;
    border-radius: 22px;
    box-sizing: border-box;

    > * {
      display: inline-block;
      vertical-align: top;
    }

    .topic-icon {
      width: 34px;
      height: 34px;
      line-height: 34px;
      border-radius: 17px;
      margin: 5px;
      text-align: center;
      background-color: #d0d0d0;

      .iconfont {
        font-size: 24px;
        color: #fff;
        display: block;
        transform: scale(0.76, 0.76);
      }
    }

    .topic-text {
      font-size: 22px;
      color: #9B9B9B;
      margin-right: 16px;
      max-width: 310px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
</style>