<template>
  <div class="tagWrapper">
    <ElTag
      hit
      :type="props.isActive ? '' : 'info'"
      :class="{ isOpen: props.isOpen, isClose: !props.isOpen }"
      >{{ props.label }}</ElTag
    >
  </div>
</template>
<script lang="ts" setup>
  const props = defineProps<{ isActive: boolean; label: string; isOpen: boolean }>();
</script>
<style scoped>
  .tagWrapper {
    margin: 10px 0;
    cursor: pointer;
  }

  .el-tag--info.isClose {
    background-color: #fafafa;
    color: #bfbfbf;
    border-color: #dadada;
  }
</style>
