<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>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2021-10-19 19:49:53
 */
export default {
  name: "SetpLine",
  props: {
    isComplete: {
      type: Boolean,
      default: false,
    },
    themeColor: {
      type: String,
      default: "#1C9FFF",
    },
    show: {
      type: Boolean,
      default: true,
    }
  },
};
</script>

<style lang="scss" scoped>
.step-line-container {
  flex: 1;
  .step-line {
    border-top: j(2) dashed #eeeeee;
    flex-shrink: 0;
  }
  .step-line-complete {
    border-style: solid;
  }
}
</style>
