<template>
  <div :style="styleData.rankingC">
    <div :style="styleData.rankContent">
      <div v-for="(item, i) in rankListTitle" :style="styleData['rankTitle'+i]" :key="i">
        {{ item }}
      </div>
    </div>
    <div
      :style="styleData.rankContent"
      v-for="(item, i) in leaderBroadList"
      :key="i"
    >
      <div>{{i+1}}</div>
      <div :style="styleData.nickName"><img :style="styleData.imgSty" :src="item.userImg">{{item.nickName}}</div>
      <div :style="styleData.invitationCount">{{item.invitationCount}}</div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { getLeaderBroad } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      rankListTitle: ["排行", "用户名称", "邀请数量"],
      leaderBroadList: [],
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },

  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) {
      } else {
        getLeaderBroad((initdatas) => {
          this.leaderBroadList = initdatas.data;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.rankingC {
}
</style>
