<template>
  <div class="logo-or-dot">
    <div class="logo-wrap" v-if="point === 'icon'">
      <p class="logo">
        <WlPic :src="icon_url" />
      </p>
    </div>
    <div class="dot-wrap" v-if="point === 'dot'">
      <p class="dot"></p>
    </div>
  </div>
</template>

<script>
/**
 * @description 步骤组件
 * @param {string} point
 * 节点类型（icon|dot），icon表示显示图标，dot表示显示点
 * @param {string} photo_url
 * 图标在线地址
 * @param {boolean} need_arrow
 * 是否需要箭头
 */
import WlPic from "weiling-mobile-ui/lib/WlPic";
export default {
  name: 'LogoOrDot',
  components: { WlPic },
  props: {
    point: {
      type: String,
      default: 'dot',
    },
    icon_url: {
      type: String,
      default: '',
    }
  },
}
</script>

<style lang="scss" scoped>
.logo-or-dot {
  padding-right: j(5);
  @extend %flex-direction-column;

  .logo-wrap {
    @extend %logo-wrap;
  }

  .dot-wrap {
    padding-right: j(3);
    @extend %flex-middle-center;

    .dot {
      background-color: var(--wl-success-color, #70cda1);
      width: j(10);
      height: j(10);
      border-radius: 50%;
    }
  }
}
</style>
