<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"
      />
      <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 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"
      :style="widthStyle"
    >
      <div class="content">?</div>
    </div>
    <div v-if="groupHC >= 10" class="more" :style="widthStyle" @click="showMoreAvator">
      <div class="content" />
    </div>
    <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 == '团长'" 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>
  </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%;
    }
  }
  .avator {
    background: 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;
    /deep/ img {
      width: 37px;
      height: 37px;
    }
  }
  .is-new {
    position: absolute;
    top: 0;
    right: -@padding-unit;
  }
  .is-leader {
    position: absolute;
    right: 4px;
    top: -9px;
    .crown {
      width: 22px;
      height: 20px;
    }
  }
  .leader-name {
    width: 35px;
    height: 17px;
    position: absolute;
    left: 50%;
    bottom: -6px;
    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,
  .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>
