<template>
  <div
    :class="list.length >5 ? 'sharpolicy' : ''"
    :style="styleData.invite"
    ref="invite"
    @click="styleClick('click', 'invite')"
    @mousemove="styleClick('mousemove', 'invite')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="xhbtitle" :style="styleData.xhbtitle"></div>

    <div class="xhbsmall" :style="styleData.xhbsmall">
      <!-- ul -->
      <div class="swiper-container"
        :class="list.length >5 ? 'assistsharpolicy1':'assistsharpolicy'">
        <div class="swiper-wrapper assistcontent">
          <div
            class="fxylxhb"
            :class="list.length > 5 ? 'fxylxhb1':''"
            :style="styleData.fxylxhb"
            v-for="(item, index) in list"
            :key="item.id"
          >
            <!-- li -->
            <div class="fxylxhbhead" :style="styleData.fxylxhbhead">
              <img :src="item.userImg" alt :style="styleData.fxylxhbimg" />
            </div>
            <div
              class="fxylxhbname"
              :style="styleData.fxylxhbname"
              v-if="item.nickName != ''"
            >
              {{ item.nickName }}
            </div>
          </div>
        </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:
            "https://img10.360buyimg.com/imgzone/jfs/t28678/77/1284487047/5414/288fa579/5cdbdf8fNab851131.png",
          name: "",
        },
        {
          id: 2,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t28678/77/1284487047/5414/288fa579/5cdbdf8fNab851131.png",
          name: "",
        },
        {
          id: 3,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t28678/77/1284487047/5414/288fa579/5cdbdf8fNab851131.png",
          name: "",
        },
        {
          id: 4,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t28678/77/1284487047/5414/288fa579/5cdbdf8fNab851131.png",
          name: "",
        },
        {
          id: 5,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t28678/77/1284487047/5414/288fa579/5cdbdf8fNab851131.png",
          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.list);
        content.data.friends.forEach((v, i) => {
          this.list.splice(i, 1, v);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.invite {
  position: relative;
}
.assistcontent {
  display: flex;
}
.sharpolicy {
  width: 5.9rem !important;
}
.assistsharpolicy {
  min-width: 5.89rem;
}
.assistsharpolicy1 {
  min-width: 6rem;
}
.fxylxhb1{
  padding: 0 .1rem;
}
.swiper-container {
  overflow: auto !important;
}
</style>