<template>
  <div
    :style="styleData.invite"
    ref="inviteNew"
    @click="styleClick('click', 'inviteNew')"
    @mousemove="styleClick('mousemove', 'inviteNew')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="xhbsmall" :style="styleData.xhbsmall">
      <div :style="styleData.fxylxhb" v-for="item in list" :key="item.id">
        <img
          v-if="item.userImg"
          :src="item.userImg"
          alt
          :style="styleData.fxylxhbimg"
        />
        <!-- <div
              class="fxylxhbname"
              :style="styleData.fxylxhbname"
              v-if="item.nickName != ''"
            >
              {{ item.nickName }}
            </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import { Toast } from "vant";
import bus from "../../../util/bus.js";
let { bargainFriends } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  components: {},
  data() {
    return {
      list: [
        {
          id: 1,
          userImg: "",
          name: "",
        },
        {
          id: 2,
          userImg: "",
          name: "",
        },
        {
          id: 3,
          userImg: "",
          name: "",
        },
        {
          id: 4,
          userImg: "",
          name: "",
        },
        {
          id: 5,
          userImg: "",
          name: "",
        },
      ],
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initdata();
  },
  mounted() {},
  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);
      }
    },
    initdata() {
      //调用好友助力接口
      if (this.isTemplate == true) {
        // Toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      bus.$on("helpList", (content) => {
        console.log(content, "helpListhelpList");
        this.num = content.data.num;
        content.data.friends.forEach((v, i) => {
          this.list.splice(i, 1, v);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.xhbsmall>div:nth-of-type(1) {
  margin-left: 0 !important;
}
.invite {
  position: relative;
}
.assistcontent {
  display: flex;
}
.sharpolicy {
  width: 5.9rem !important;
}
.assistsharpolicy {
  min-width: 5.89rem;
}
.assistsharpolicy1 {
  min-width: 6rem;
}
.fxylxhb1 {
  padding: 0 0.1rem;
}
.swiper-container {
  overflow: auto !important;
}
</style>