<script setup lang="ts">
interface SearchTagItem {
  key: string | number
  text: string
  /** 左侧「热门」火焰标 */
  hot?: boolean
  /** 显示右侧删除（搜索记录） */
  removable?: boolean
}

const props = withDefaults(
  defineProps<{
    title: string
    tags: SearchTagItem[]
    /** 标题右侧「清空」 */
    showClear?: boolean
  }>(),
  {
    showClear: false,
  },
)

const emit = defineEmits<{
  select: [item: SearchTagItem]
  remove: [index: number]
  clear: []
}>()

const { t } = useI18n()
</script>

<template>
  <view v-if="tags.length > 0" class="search-tag-cloud">
    <view class="search-tag-cloud__head">
      <text class="search-tag-cloud__title">{{ title }}</text>
      <text v-if="showClear" class="search-tag-cloud__clear" @click="emit('clear')">{{ t('pages.search.clear-history') }}</text>
    </view>
    <view class="search-tag-cloud__wrap">
      <view
        v-for="(item, index) in tags"
        :key="item.key"
        class="search-tag-cloud__pill"
        @click="emit('select', item)"
      >
        <view v-if="item.hot" class="i-carbon:fire search-tag-cloud__flame shrink-0"></view>
        <text class="search-tag-cloud__text">{{ item.text }}</text>
        <view
          v-if="item.removable"
          class="search-tag-cloud__remove center shrink-0"
          @click.stop="emit('remove', index)"
        >
          <text class="search-tag-cloud__remove-x">×</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-tag-cloud {
  padding: 36rpx 24rpx 8rpx;
}

.search-tag-cloud__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28rpx;
}

.search-tag-cloud__title {
  font-size: 32rpx;
  line-height: 40rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.search-tag-cloud__clear {
  font-size: 26rpx;
  line-height: 32rpx;
  color: #999;
}

.search-tag-cloud__wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx 14rpx;
}

.search-tag-cloud__pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  padding: 14rpx 22rpx;
  background: #fff;
  border-radius: 999rpx;
  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.06);
}

.search-tag-cloud__flame {
  margin-right: 8rpx;
  font-size: 26rpx;
  color: #e02020;
}

.search-tag-cloud__text {
  font-size: 28rpx;
  line-height: 32rpx;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320rpx;
}

.search-tag-cloud__remove {
  margin-left: 10rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
}

.search-tag-cloud__remove-x {
  font-size: 32rpx;
  line-height: 32rpx;
  color: #666;
  font-weight: 300;
  margin-top: -4rpx;
}
</style>
