<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  finished: {
    type: Number,
    required: false,
    default: 0,
  },
  count: {
    type: Number,
    required: false,
    default: 0,
  },
  active: Boolean,
});
</script>
<template>
  <div class="root-configued">
    已配置
    <span class="info-num">{{ props.finished }}</span>
    项,
    <span>共{{ props.count }}项</span>
    <span class="flag" :class="{ active: active }"></span>
  </div>
</template>
<style scoped lang="scss">
.root-configued {
  float: right;
  color: var(--o-text-color-secondary);
  font-weight: 500;
  .info-num {
    font-size: 14px;
    vertical-align: top;
    color: #24ab36;
  }
  .flag {
    display: inline-block;
    height: 0;
    width: 0;
    border: 4px solid transparent;
    border-top: 4px solid #8d98aa;
    border-bottom: none;
    vertical-align: middle;
    margin-left: 12px;
    margin-top: -2px;
    transform: rotate(-90deg);
    transition: all 0.3s;
  }
  .flag.active {
    transform: rotate(0);
  }
}
</style>
