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

const activeNumber = ref<number>(0)

defineExpose({
  activeNumber
})
</script>

<template>
  <div class="import-doc-steps">
    <div :class="{ active: activeNumber >= 0 }" class="import-doc-step">
      <div class="import-doc-step-number">1</div>
      <div class="import-doc-step-title">选择文档</div>
    </div>
    <div :class="{ 'active-progress': activeNumber > 0 }" class="progress"></div>
    <div :class="{ active: activeNumber > 0 }" class="import-doc-step">
      <div class="import-doc-step-number">2</div>
      <div class="import-doc-step-title">分段预览</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.import-doc-steps {
  width: 60%;
  margin: 20px auto 30px;
  display: flex;
  flex-direction: row;
  align-items: center;

  .progress {
    flex: 1;
    height: 6px;
    background: #eee;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 4px;
  }
}

.import-doc-step {
  display: flex;
  align-items: center;

  &-number {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: #eee;
    text-align: center;
    border-radius: 12px;
    margin-right: 10px;
  }

  &-title {
    color: #999;
  }
}

.active {
  .import-doc-step-number {
    background: #3067ef;
    color: white;
  }

  .import-doc-step-title {
    color: #3067ef;
  }
}

.active-progress {
  background: #3067ef !important;
}
</style>
