<template>
  <div
    :style="styleObject"
    class="step-point"
  >
    <WlSvgIcon
      type="check"
      width="18"
      height="18"
      :color="themeColor"
      v-if="isComplete"
    />
    <span v-else>{{ text }}</span>
  </div>
</template>
<script lang="ts">
export default {
  name: "SetpPoint"
};
</script>
<script lang="ts" setup>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-04-28 14:34:15
 */
import { computed } from "vue";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";;

type Props = {
  isComplete?: boolean;
  isSelect?: boolean;
  text?: number | string;
  themeColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  isComplete: false,
  isSelect: true,
  text: "",
  completeIcon: "icon-mobile-ui-duigoux",
  themeColor: "var(--wl-primary-color)",
  icon: "",
});
const styleObject = computed(() => {
  if (props.isComplete) {
    return {
      border: "2px solid",
      "border-color": props.themeColor
    };
  } else if (props.isSelect) {
    return {
      "background-color": props.themeColor,
    };
  } else {
    return {
      "background-color": "#EEEEEE",
      color: "var(--wl-text-color-placeholder)",
    };
  }
});
</script>

<style lang="scss">
.steps-container[data-weiling-mobile-ui-wl-steps] {

  .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;
    cursor: pointer;

    .step-point-complete {
      font-size: j(20);
    }
  }
}</style>
