<template>
  <div
    class="activity_info_color"
    ref="hbPrize"
    @click.stop="styleClick('click', 'hbPrize')"
    @mousemove.stop="styleClick('mousemove', 'hbPrize')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <div :style="styleData.activityBottom"></div>
    <div
      class="activity_info"
      v-if="isSuccessSaveInviterRecord && canAssist != 0"
    >
      <div class="btn" @click="hasGetHb" ref="leftBtn">
        已获得红包（&yen;{{ totalGetHbMoney }}元）
      </div>
      <div class="btn" @click="myHelper" ref="rightBtn">
        我的助力好友（{{ totalHelperCount }}）
      </div>
    </div>
    <div class="clicked_hasGetHb" v-show="clickLeftBtn">
      <!--已获得的红包-->
      <template v-if="hasGetHbList.length > 0">
        <div class="myPacket" v-for="item in hasGetHbList">
          <div class="myPacket_left_data">
            <span class="inline-block" style="font-size: 0.2rem">&yen;</span
            ><span
              class="inline-block"
              style="margin-left: 0.05rem; font-size: 0.5rem"
              >{{ item.priceInfo }}</span
            >
          </div>
          <div class="myPacket_right_data">
            <div style="font-size: 0.26rem">{{ item.prizeName }}</div>
            <div style="font-size: 0.22rem">
              {{ item.createTime }} 拆红包获得
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          style="
            font-size: 0.36rem;
            text-align: center;
            line-height: 1rem;
            color: #ffeebd;
          "
        >
          暂无记录
        </div>
      </template>
    </div>
    <div class="clicked_myHelper" v-show="clickRightBtn">
      <!--已助力好友列表-->
      <template v-if="myHelperList.length > 0">
        <div
          style="
            width: 6.12rem;
            margin: 0.3rem auto 0.3rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
          "
        >
          <div class="myHelper" v-for="item in myHelperList">
            <img
              class="myHelper_touxiang"
              :src="
                item.userImg ||
                'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg'
              "
              alt=""
            />
            <div class="myHelper_pin">{{ item.nickName }}</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          style="
            font-size: 0.36rem;
            text-align: center;
            line-height: 1rem;
            color: #ffeebd;
          "
        >
          暂无记录
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import dateUtils from "../../../util/dateUtil";
import dateUtil from "../../../util/dateUtil";
let { hbShareList, bargainFriends } = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      isSuccessSaveInviterRecord: true,
      totalGetHbMoney: 0,
      totalHelperCount: 0,
      clickLeftBtn: false,
      clickRightBtn: false,
      hasGetHbList: [
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
        // {priceInfo:12,prizeName:'jingdou',createTime:'2021-02-02'},
      ],
      myHelperList: [
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'11111'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'22'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'333'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'44'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
        // {userImg:'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg',nickName:'哈哈s哈哈'},
      ],
      isShowMore: false,
      isHideMore: false,
      canAssist: 0,
      styleDataOld: {},
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.publicData.$on("isSuccessSaveInviterRecord", (res) => {
      this.isSuccessSaveInviterRecord = res;
    });
    this.publicData.$on("hbCanAssist", (res) => {
      this.canAssist = res;
    });
    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 == true) {
        // this.$toast("活动预览，仅供查看");
        this.isSuccessSaveInviterRecord = false;
      } else {
        hbShareList((prizedata) => {
          this.isSuccessSaveInviterRecord = prizedata.data.isClick;
          this.totalGetHbMoney = prizedata.data.sum / 100;
          for (var i = 0; i < prizedata.data.prizeList.length; i++) {
            prizedata.data.prizeList[i].createTime = dateUtils.dateChangeYYYY(
              prizedata.data.prizeList[i].createTime,
              1
            );
            // 价值单位分
            if (prizedata.data.prizeList[i].priceInfo) {
              prizedata.data.prizeList[i].priceInfo =
                prizedata.data.prizeList[i].priceInfo / 100;
            }
          }
          this.hasGetHbList = prizedata.data.prizeList;
        });
        bargainFriends((data) => {
          this.totalHelperCount = data.data.num;
          this.myHelperList = data.data.friends;
        });
      }
    },
    hasGetHb() {
      this.clickLeftBtn = true;
      this.clickRightBtn = false;
      this.$refs.leftBtn.classList.add("clickBtn");
      this.$refs.rightBtn.classList.remove("clickBtn");
      hbShareList((data) => {
        for (var i = 0; i < data.data.prizeList.length; i++) {
          data.data.prizeList[i].createTime = dateUtils.dateChangeYYYY(
            data.data.prizeList[i].createTime,
            1
          );
          // 价值单位分
          if (data.data.prizeList[i].priceInfo) {
            data.data.prizeList[i].priceInfo =
              data.data.prizeList[i].priceInfo / 100;
          }
        }
        this.totalGetHbMoney = data.data.sum / 100;
        this.hasGetHbList = data.data.prizeList;
      });
    },
    myHelper() {
      this.clickLeftBtn = false;
      this.clickRightBtn = true;
      this.$refs.rightBtn.classList.add("clickBtn");
      this.$refs.leftBtn.classList.remove("clickBtn");
    },
  },
  filters: {
    //时间转换
    dateTime(val) {
      if (val) {
        return dateUtil.formatTime(val, "yyyy-MM-dd hh:mm");
      }
      return val;
    },
    twostar: function (value) {
      if (!value) {
        return "";
      }
      return value.substr(0, 1) + "**" + value.substr(-1, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.activity_info_color {
  width: 7.5rem;
  // height: 6.52rem;
  background-color: #33a33e;
}
.activity_info {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.activity_info .btn {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/33328/8/5984/2960/5cbc7822E682b09f8/30af9751ea392495.png")
    no-repeat;
  background-size: 100%;
  width: 2.94rem;
  height: 0.87rem;
  font-size: 0.26rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.87rem;
  font-weight: bold;
}
.activity_info .clickBtn {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/30539/39/14045/2580/5cbc7822Efe7c3d01/bf7b928bdb5c0d25.png")
    no-repeat;
  background-size: 100%;
  width: 2.94rem;
  height: 0.87rem;
}
.clicked_hasGetHb,
.clicked_myHelper {
  width: 6.96rem;
  max-height: 3.1rem;
  border: 1.5px solid #ffeebd;
  margin: 0 auto;
  border-radius: 12px;
  overflow-y: scroll;
}
.myHelper {
  width: 1rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.myHelper:nth-child(n + 2) {
  margin-left: 0.28rem;
}
.myHelper:nth-child(5n + 1) {
  margin-left: 0rem;
}
.myHelper_touxiang {
  width: 0.93rem;
  height: 0.93rem;
  border-radius: 50%;
  border: solid #ffeebd 1px;
}
.myHelper_pin {
  font-size: 0.22rem;
  color: #ffeebd;
  margin-top: 0.1rem;
}
.myPacket {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/38761/29/1686/4685/5cbde2f2E5931d603/663aad6514bb661a.png")
    no-repeat;
  background-size: 100%;
  width: 6.35rem;
  height: 1.1rem;
  margin: 0.3rem auto 0.3rem;
}
.myPacket_left_data {
  width: 1.3rem;
  font-size: 0.58rem;
  color: #e00d0b;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0.2rem;
  // margin-left: -0.6rem;
}
.myPacket_right_data {
  display: inline-block;
  vertical-align: middle;
  color: #fff4d3;
  margin-top: 0.2rem;
  margin-left: 1.4rem;
}
// .activity_bottom{
//   background: url("https://img10.360buyimg.com/imgzone/jfs/t1/40283/5/1280/31726/5cbc4f0aE10725278/c800d0c300504723.png") no-repeat;
//   background-size: 100%;
//   width:100%;
//   height:2.54rem;
//   position: absolute;
//   top: 13.7rem;
// }
</style>
