<template>
  <div class="avator-group">
    <div
      v-for="(item, index) in avators.slice(0, 9)"
      :key="index"
      class="avator-item"
      :style="widthStyle"
    >
      <cr-image
        class="avator-img"
        :class="{ avator: index == 0 }"
        width=""
        height=""
        :src="item.avatar"
      />
      <template v-if="item.userTag && item.userTag == '团长'">
        <div class="is-leader">
          <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
        </div>
        <div class="leader-name">
          <cr-image
            class="leader-name-icon"
            height=""
            width=""
            src="@/assets/images/leader-name.png"
          />
        </div>
        <div class="border" />
      </template>
      <div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new">
        <cr-image width="25px" src="@/assets/images/new-user.png" />
      </div>
    </div>
    <div
      v-for="n in placeholderNum"
      :key="`placeholder-${n}`"
      class="placeholder"
      :class="{ leader: avators.length == 0 }"
      :style="widthStyle"
    >
      <template v-if="avators.length == 0 && n == 1">
        <div class="is-leader">
          <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
        </div>
        <div class="leader-name">
          <cr-image
            class="leader-name-icon"
            height=""
            width=""
            src="@/assets/images/leader-name.png"
          />
        </div>
        <div class="border" />
      </template>
      <div class="content" :class="{ avator: avators.length == 0 && n == 1 }">?</div>
    </div>
    <div v-if="groupHC >= 10" class="more" :style="widthStyle" @click="showMoreAvator">
      <div class="content" />
    </div>
    <template v-if="showDialogSlot">
      <cr-dialog
        v-model="showDialogSlot"
        confirm-button-text="知道了"
        confirm-button-color="#ec1500"
      >
        <div slot="title">查看参团人员</div>
        <div
          style="width: 100%;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              "
        >
          <div
            v-for="(item, index) in avators"
            :key="index"
            class="avator-item"
            :style="widthStyle"
          >
            <cr-image
              :key="index"
              :class="{ avator: index == 0 }"
              class="avator-img"
              width=""
              height=""
              :src="item.avatar"
            />
            <div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new">
              <cr-image width="25px" src="@/assets/images/new-user.png" />
            </div>
            <div v-if="item.userTag && item.userTag == '团长'" class="is-leader">
              <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
            </div>
            <div v-if="item.userTag && item.userTag == '团长'" class="leader-name">
              <cr-image
                class="leader-name-icon"
                height=""
                width=""
                src="@/assets/images/leader-name.png"
              />
            </div>
          </div>
        </div>
      </cr-dialog>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      isLeader: true, // 标识是不是团长
      showDialogSlot: false, // 查看参团人员
      avators: [], // 头像列表
      groupHC: 0 // 团型(5人团则为5)
    };
  },
  computed: {
    placeholderNum() {
      // 问号头像展位数量
      if (this.groupHC >= 10) {
        // 用9去减是因为有个展示更多的按钮
        return 9 - this.avators.length < 0 ? 0 : 9 - this.avators.length;
      } else {
        return this.groupHC - this.avators.length < 0 ? 0 : this.groupHC - this.avators.length;
      }
    },
    widthStyle() {
      // 用于单个头像不能占一排
      return this.avators.length == 6 ? { width: '25%' } : { width: '20%' };
    }
  },
  created() {
    this.groupHC = this.groupInfo.groupBuyLimitUserCount || 0;
    this.avators = this.groupInfo.groupBuyValidUserInfoList || [];
  },
  methods: {
    showMoreAvator() {
      if (this.avators.length == 0) return;
      this.showDialogSlot = true;
    }
  }
};
</script>
<style lang="less" scoped>
.avator-item {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  width: 20%;
  height: 44px;
  margin-top: @padding-lg;
  .avator-img {
    width: 44px;
    height: 44px;
    /deep/ img {
      border-radius: 50%;
    }
  }
  .border {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url('../assets/images/leaderBorder.png');
    background-size: cover;
    z-index: 2;
    width: 44px;
    height: 100%;
  }
  .avator {
    // background: url('../assets/images/leaderBorder.png');
    // border: px solid rgba(255, 212, 0, 0.24);
    width: 44px;
    height: 44px;
    position: relative;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /deep/ img {
      width: 44px;
      height: 44px;
    }
  }
  .is-new {
    position: absolute;
    top: 0;
    z-index: 3;
    right: -@padding-unit;
  }
  .is-leader {
    position: absolute;
    right: 4px;
    top: -9px;
    z-index: 3;
    .crown {
      width: 22px;
      height: 20px;
    }
  }
  .leader-name {
    width: 35px;
    height: 17px;
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 3;
    transform: translateX(-50%);
    &-icon {
      width: 100%;
      height: 100%;
      img {
        width: 35px;
        height: 17px;
      }
    }
  }
}
.avator-group {
  position: relative;
  padding: 0 38 - @padding-sd;
  box-sizing: border-box;
  margin-bottom: @padding-md;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: @white;
  /deep/ .cr-dialog--header {
    padding-bottom: 0;
  }
  /deep/ .cr-dialog--message {
    padding-top: 0;
  }
  .placeholder.leader {
    position: relative;
    .border {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: url('../assets/images/leaderBorder.png');
      background-size: cover;
      z-index: 2;
      width: 44px;
      height: 100%;
    }
    .is-new {
      z-index: 3;
      position: absolute;
      top: 0;
      right: -@padding-unit + 2;
    }
    .is-leader {
      position: absolute;
      right: 4px;
      top: -9px;
      z-index: 3;
      .crown {
        width: 22px;
        height: 20px;
      }
    }
    .leader-name {
      z-index: 3;
      width: 35px;
      height: 17px;
      position: absolute;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%);
      &-icon {
        width: 100%;
        height: 100%;
        img {
          width: 35px;
          height: 17px;
        }
      }
    }
    .avator {
      // background: #ffe1e1 url('../assets/images/leaderBorder.png');
      // border: px solid rgba(255, 212, 0, 0.24);
      background-size: cover;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      /deep/ img {
        width: 44px;
        height: 44px;
      }
    }
  }
  .placeholder,
  .more {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 20%;
    height: 44px;
    margin-top: @padding-lg;
    color: @red;
    font-size: 18px;
    .content {
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #ffe1e1;
      box-sizing: border-box;
      border: 1px dashed #ff9393;
    }
  }
  .more {
    .content {
      border: 0;
      letter-spacing: -0.43px;
      &::after {
        content: '...';
        transform: translateY(-4px);
      }
    }
  }
}
</style>
