<template>
  <div
    v-if="otherAttribute.length > 0 && otherAttribute[0].value && otherAttribute[0].operation"
    class="flex"
  >
    <template v-for="(item, index) in otherAttribute" :key="item.value">
      <div class="flex" v-if="item?.value && item?.attribute">
        <div class="text mr-2" style="color: #305680">{{ item.attribute }}</div>
        {{ item.operation }}
        <div class="text ml-2" style="color: #ff8c68">{{ item.value }}</div>
        <span v-if="otherAttribute[index + 1]">和</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { watch, inject } from 'vue';
  defineProps({
    otherAttribute: {
      type: Array,
      default: () => [],
    },
  });
  const emit = defineEmits(['resetFilter']);
  const operationType = inject('operationType');
  watch(operationType, () => {
    emit('resetFilter');
  });
</script>

<style scoped>
  .text {
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    padding: 0 5px;
    margin: 0 5px;
  }
</style>