<template>
  <div
    class="helpFriendDivAll"
    v-if="!isHelpShare && shareUserList.length > 0"
    ref="helpFriend"
    @click="styleClick('click', 'helpFriend')"
    @mousemove="styleClick('mousemove', 'helpFriend')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="tit" :style="styleData.tit">给力小伙伴</div>
    <div class="friendList">
      <div class="item" v-for="(item, index) in shareUserList">
        <div class="avatarDiv"><img :src="item.userImg" /></div>
        <div :style="styleData.cont">{{ item.nickName1 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../../util/apis1.js";
let { getFudai } = apis;
import store from "../../../store/store.js";
export default {
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "templateData",
    "isWebClick",
  ],
  data() {
    return {
      shareUserList: [],
      isHelpShare: false, //是否是助力人
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    //获取助力好友
    this.isHelpShare = store.state.shareUserId ? true : false;
    if (this.isTemplate) {
      let initdatas = {
        shareUserList: [
          {
            nickName: "测试数据1",
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          },
          {
            nickName: "测试数据2",
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
          },
        ],
      };
      for (var i = 0; i < initdatas.shareUserList.length; i++) {
        initdatas.shareUserList[i].nickName1 =
          initdatas.shareUserList[i].nickName.substr(0, 1) +
          "***" +
          initdatas.shareUserList[i].nickName.substr(-1, 1);
      }
      this.shareUserList = initdatas.shareUserList;

     this.publicData.$on("clickPointsHelpFriend", (isCustomSwitching, refName) =>{
      this.isCustomSwitching = isCustomSwitching;
      if(isCustomSwitching == "2") {
         this.shareUserList = [];
       }else{
         this.shareUserList = initdatas.shareUserList;
       }
    })



    } else {
      getFudai((initdatas) => {
        for (var i = 0; i < initdatas.data.shareUserList.length; i++) {
          initdatas.data.shareUserList[i].nickName1 =
            initdatas.data.shareUserList[i].nickName.substr(0, 1) +
            "***" +
            initdatas.data.shareUserList[i].nickName.substr(-1, 1);
        }
        this.shareUserList = initdatas.data.shareUserList;
      });
    }
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
  },
};
</script>

<style lang="scss">
.helpFriendDivAll {
  position: relative;
  width: 6rem;
  display: inline-block;
  font-size: 0.28rem;
  color: #fff;
  margin-top: 0.8rem;
  .tit {
    border-bottom: 1px dashed #fff;
    padding-bottom: 0.24rem;
  }

  .friendList {
    .item {
      float: left;
      width: 1.2rem;
      // height: 1.2rem;
      margin-bottom: 0.2rem;
      margin-top: 0.2rem;
      overflow: hidden;
      .avatarDiv {
        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 100%;
        }
      }
    }
  }
}
</style>
