<template>
  <div class="prizePopMaskDiv" v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <!-- <%--    弹窗--%> -->
      <div :style="styleData.listDiv" class="listDiv">
        <div :style="styleData.container" class="my-friend-container" v-if="firendList.length > 0">
          <div :style="styleData.friendInfo" class="friendInfo" v-for="(it, index) in firendList" :key="index">
            <img :style="styleData.headImage" class="friend-headImage" :src="it.userImg" alt="" />
            <span :style="styleData.friendName" class="friendName">{{ it.nickName }}</span>
          </div>
        </div>
        <div v-else class="noFriends" :style="styleData.noFriends">暂无助力好友哦</div>
        <div class="closeDiv" :style="styleData.closeDiv" @click="closeDialog()"></div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from './hdzxtbasicPop.vue';

import apis1 from '../../../util/apis1.js';
import store from '../../../store/store.js';

let { addSkuHelpFriend, bargainFriends } = apis1;

export default {
  components: {
    store,
    basicPop
  },
  props: [],
  data() {
    return {
      firendList: [],
      show: true,
      helpFriendListFlag: false,
      pop: {
        title: '我的好友',
        titlepop: ''
      }
    };
  },
  computed: {
    title() {
      return '我的好友';
    }
  },

  created() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.pop.titlepop = this.styleData.titlepop
      ? this.styleData.titlepop
      : { backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)' };
    this.pop.leftLineDiv = this.styleData.leftLineDiv;
    this.pop.rightLineDiv = this.styleData.rightLineDiv;

    this.initData();
  },
  methods: {
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    initData() {
      bargainFriends(data => {
        this.num = data.data.num;
        this.firendList = data.data.friends;
        console.log(data);
        if (this.firendList.length > 0) {
          for (var i = 0; i < this.firendList.length; i++) {
            // this.firendList[i].createTime = dateUtil.dateChangeYYYY(this.firendList[i].createTime, 1);
          }
        }

        this.publicData.$emit('friendNotifRecord', this.num);
      });
    },

    closeDialog() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.closeDiv {
  width: 1rem;
  height: 1rem;
  margin: auto;
  margin-top: 0.7rem;
}
.noFriends {
  // font-size: 0.4rem;
  // color: #339b9a;
  // text-align: center;
  // line-height: 5rem;
  height: 100%;
  font-size: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c8c8c;
}
.listDiv {
  position: relative;
  z-index: 300;
  margin-top: 0.32rem;
  height: 9.14rem;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.my-friend-container {
  display: flex;
  flex-wrap: wrap;
}
.friendInfo {
  display: flex;
  flex-direction: column;
  width: 1.5rem;
  align-items: center;
  margin-bottom: 0.2rem;
}
.friend-headImage {
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
  max-width: 68%;
  margin-bottom: 0.1rem;
}
.friendName {
  font-size: 0.12rem;
}
</style>
