<template>
  <div :style="styleObject" class="step-point">
    <i
      v-if="isComplete"
      class="iconfont step-point-complete"
      :class="completeIcon"
      :style="`color: ${themeColor}`"
    ></i>
    <i v-else-if="icon" :class="icon" class="iconfont"></i>
    <span v-else>{{ text }}</span>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-11 15:48:59
 */
export default {
  name: "SetpPoint",
  props: {
    isComplete: {
      type: Boolean,
      default: false,
    },
    isSelect: {
      type: Boolean,
      default: true,
    },
    text: {
      type: [Number, String],
      default: "",
    },
    completeIcon: {
      type: String,
      default: "icon-mobile-ui-duigoux",
    },
    themeColor: {
      type: String,
      default: "#1C9FFF",
    },
    icon: {
      type: String,
      default: "",
    },
  },
  computed: {
    styleObject() {
      if (this.isComplete) {
        return {
          border: "2px solid" + this.themeColor,
        };
      } else if (this.isSelect) {
        return {
          "background-color": this.themeColor,
        };
      } else {
        return {
          "background-color": "#EEEEEE",
          color: "#C1C1C1",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.step-point {
  width: j(30);
  height: j(30);
  border-radius: 50%;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: j(13);
  margin: j(8);
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  font-weight: 600;
  .step-point-complete {
    font-size: j(20);
  }
}
</style>
