<template>
  <div class="step-line-container">
    <div
      v-if="isComplete"
      :style="`border-color: ${show ? themeColor : 'transparent'}`"
      class="step-line step-line-complete"
    ></div>
    <div
      :style="`border-color: ${show ? '#eeeeee' : 'transparent'}`"
      v-else
      class="step-line"
    ></div>
  </div>
</template>
<script lang="ts">
export default {
  name: "SetpLine",
};
</script>

<script lang="ts" setup>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-09-13 17:14:32
 */
interface Props {
  isComplete: boolean;
  themeColor: string;
  show: boolean;
}
withDefaults(defineProps<Props>(), {
  isComplete: false,
  themeColor: "var(--wl-primary-color)",
  show: true,
});
</script>

<style lang="scss">
.steps-container[data-weiling-mobile-ui-wl-steps] {
  .step-line-container {
    flex: 1;

    .step-line {
      border-top: j(2) dashed #eeeeee;
      flex-shrink: 0;
    }

    .step-line-complete {
      border-style: solid;
    }
  }
}
</style>
