<template>
  <div class="shareLink">
    <div class="share-wrap">
      <!-- 链路显示小于等于3条的情况 -->
      <template v-if="data.share_path.length <= 3">
        <div
          class="share-user"
          v-for="(item, index) in data.share_path"
          :key="item.user_info.head_img_url + index"
        >
          <p class="head_img_url">
            <WlPic :src="item.user_info.head_img_url" />
          </p>
          <!-- 如果是最后一级的话隐藏右箭头 -->
          <p class="arrow" v-if="index !== data.share_path.length - 1">
            <i class="iconfont icon-card-sanjiaojiantou"></i>
          </p>
        </div>
      </template>
      <!-- 链路显示大于3条的情况 -->
      <template v-if="data.share_path.length > 3">
        <div class="share-user" v-for="(item, index) in data.share_path.slice(0, 2)" :key="index">
          <p class="head_img_url">
            <WlPic :src="item.user_info.head_img_url" />
          </p>
          <!-- 如果是最后一级的话隐藏右箭头 -->
          <p class="arrow" v-if="index !== data.share_path.length - 1">
            <i class="iconfont icon-card-sanjiaojiantou"></i>
          </p>
        </div>
        <p class="dots">...</p>
        <div
          class="share-user"
          v-for="(item, index) in [data.share_path[data.share_path.length - 1]]"
          :key="item.user_info.head_img_url + index"
        >
          <!-- 如果是最后一级的话隐藏右箭头 -->
          <p class="arrow">
            <i class="iconfont icon-card-sanjiaojiantou"></i>
          </p>
          <p class="head_img_url">
            <WlPic :src="item.user_info.head_img_url" />
          </p>
        </div>
      </template>
    </div>
    <p class="shareText">分享链路</p>
    <p class="arrow-to">
      <i class="iconfont icon-card-jiantou"></i>
    </p>
  </div>
</template>

<script>
import WlPic from "weiling-mobile-ui/lib/WlPic";
export default {
  name: "SharePath",
  components: { WlPic },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.shareLink {
  color: var(--wl-text-color-placeholder, #c1c1c1);
  display: flex;
  align-items: center;
  .share-wrap {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .share-user {
    display: flex;
    align-items: center;
    .van-icon {
      display: inline-block;
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      font-weight: 800;
    }
  }
  .dots {
    margin-right: j(5);
  }
  .shareText {
    min-width: 50px;
    font-size: j(12);
    padding-left: j(3);
  }
  .arrow-to,
  .arrow {
    padding-left: j(3);
    &.arrow {
      padding-right: j(3);
    }
    .iconfont {
      color: var(--wl-line-color, #e4e9ed);
      @extend %iconfont-min;
    }
  }
  .head_img_url {
    width: j(14);
    height: j(14);
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
