<template>
  <div class="tab-card px-4 py-2.5 bg-white rounded flex items-center" @click="$emit('click')">
    <div class="flex-1 overflow-hidden">
      <div class="">{{ tag.label }}</div>
      <div class="mt-1.5 whitespace-nowrap">
        <div v-if="tag.tags.length < 1" class="text-text-secondary text-sm">
          暂无标签
        </div>
        <template v-if="tag.tags.length > 3">
          <c-tag
            v-for="(item, index) in tag.tags.slice(0,3)"
            :key="index"
            :label="item"
            :color="tag.color"
            class="mr-1.5"
          />
          <span class="text-text-secondary">...</span>
        </template>
        <template v-else>
          <c-tag
            v-for="(item, index) in tag.tags"
            :key="index"
            :label="item"
            :color="tag.color"
            class="mr-1.5"
          />
        </template>
      </div>
    </div>
    <app-icon
      icon-name="dot"
      class-name="w-1 h-5 flex-shrink-0 ml-2"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'TagCard',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue')
  },
  props: {
    tag: Object,
    default() {
      return {}
    }
  },
  data() {
    return {}
  }
})
</script>

<style lang="less">

</style>
