<template>
  <div class="pieceTogether" :style="styleData.pieceTogetherStyle" ref="pieceTogether"
    @click="styleClick('click', 'pieceTogether')" @mousemove="styleClick('mousemove', 'pieceTogether')"
    @mouseout="styleClick('mouseout')">
    <div :style="styleData.prizeBoxWrap">
      <div class="prizeBox" v-for="(item, index) in prizeList" :style="styleData.prizeBox" :key="timer">
        <div class="flex-box" @click="gotoBuy(item)">
          <div :style="styleData.prizeImg">
            <img style="width: 100%;height: 100%;border-radius: 0.1rem;" :src="item.imagePath" alt="">
            <div class="flex-center" :style="styleData.teamNumFinish"><span
                :style="{ transform: isTemplate ? 'scale(0.6)' : '' }">已成团数:{{
                  item.alreadySuccessTeam }}</span></div>
          </div>
          <div class="rightinfo">
            <div :style="styleData.prizeName">{{ item.name }}</div>
            <div :style="styleData.teamNum"><span
                :style="{ transform: isTemplate ? 'scale(0.7)' : '', wordBreak: 'keep-all' }">{{
                  item.teamPersonNum }}人团</span></div>
            <div :style="styleData.prizePrice">京东价:￥{{ item.price }}</div>
            <div :style="styleData.prizePriceNew">预估券后价:￥{{ item.posCouponPrice }}</div>
            <!-- 先判断是团员还是团长 -->
            <!-- 上部分右侧下方按钮,在样式Json里配置好pieceTogetherStatusBtn0-5 -->
            <div v-if="item.status == 0" @click.stop="onShare(item)" :style="styleData.pieceTogetherStatusBtn0">
              <div v-if="actStatus == 1 || actStatus == 2" class="disable-mask"></div>
            </div>
            <div v-else-if="item.status == 1" @click.stop="onShare(item)" :style="styleData.pieceTogetherStatusBtn1">
            </div>
            <div v-else-if="item.status == 2" :style="styleData.pieceTogetherStatusBtn2"></div>
            <div v-else-if="item.status == 3" :style="styleData.pieceTogetherStatusBtn3"></div>
            <div v-else-if="item.status == 4" :style="styleData.pieceTogetherStatusBtn4"></div>
            <div v-else-if="item.status == 5" :style="styleData.pieceTogetherStatusBtn5"></div>
          </div>
        </div>
        <div class="flex-box" :style="{ marginTop: isTemplate && templateData ? '0.5rem' : '0.65rem' }">
          <div class="flex-center" :style="styleData.couponStyle">
            <div style="display: flex;align-items: flex-end;">￥
              <span class="big-font"
                :style="{ transform: isTemplate ? 'scale(0.8)' : '', bottom: isTemplate ? '-0.1rem' : '' }">{{
                  item.reducedMoney
                }}</span>
            </div>
            <div :style="{ transform: isTemplate ? 'scale(0.8)' : '' }">
              <div>满{{ item.fullMoney }}元</div>
              <div style="word-break: keep-all;">指定商品使用</div>
            </div>
          </div>
          <div>
            <!-- 状态 * 领券状态：0-邀请拼团，1-领取并下单，2-已领取，3-名额已抢光，4-拼团结束，5-已参团 -->

            <!-- 下部分右侧 -->
            <div v-if="[1, 2].includes(item.status)" style="position: relative;">
              <div :style="styleData.pieceTogetherSuccessBtn"></div>
              <div v-if="item.captionUser" class="lookMember" :style="styleData.lookMember" @click="openDialog(item)">
              </div>
            </div>
            <div v-else-if="item.status == 3" :style="styleData.pieceTogetherFailBtn1">
            </div>
            <div v-else-if="item.status == 4" :style="styleData.pieceTogetherFailBtn2">
            </div>
            <div v-else-if="[0, 5].includes(item.status)">
              <div style="display: flex;align-items: center;flex-direction: column; "
                :style="{ marginBottom: !item.captionUser ? '0.15rem' : '' }">
                <!-- 循环头像和加号div -->
                <div style="display: flex;justify-content: center;">
                  <div v-if="item.taskPieceTogetherFriendVos" style="display: flex;justify-content: center;">
                    <div v-for="(item1, index) in item.taskPieceTogetherFriendVos.slice(0, 2)"
                      :style="styleData.teamMemberBox">
                      <img style="width: 100%;height: 100%;" :src="item1.userImg" alt="">
                    </div>
                  </div>
                  <div v-else :style="styleData.teamMemberBox">
                    <img style="width: 100%;height: 100%;" :src="userImg" alt="">

                  </div>
                  <div :style="styleData.teamMember">
                  </div>
                </div>

                <!-- 查看更多按钮,团长才显示 v-if="item.captionUser"-->
                <div v-if="item.captionUser" :style="styleData.lookMember" @click="openDialog(item)">
                </div>
              </div>
              <div v-if="item.taskPieceTogetherFriendVos && item.taskPieceTogetherFriendVos.length > 0" class="tiptext">
                还差{{ item.teamPersonNum - item.taskPieceTogetherFriendVos.length }}人，优惠即可共享成功
              </div>
              <div v-else class="tiptext"
                :style="{ transform: isTemplate ? 'scale(0.8)' : '', left: isTemplate ? '-0.45rem' : '' }">成功拼团{{
                  item.teamPersonNum }}人，即可共享券后价格</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../../store/store";
import apis1 from "../../../util/apis1.js";
import { allShareGoods } from "../../../js/share.js";
import { sharePopComService10101Fly, pieceTogetherMemberListPopService } from '../../../util/hdzxtcomCreate.js';
import { newToSkuPage } from '../../../util/tools.js';
import dateUtil from "../../../util/dateUtil";
let { getActivity10101Goods, pieceTogetherOpenTeam, immediatelyDraw } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      styleDataOld: {},
      preventClick: false,
      prizeList: [],
      status: 0,
      shareUserId: "",
      userImg: '',
      isDisable: false,
      timer: Date.now(),
      actStatus: ''
    };
  },
  activated() {
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  computed: {
  },
  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() {
      console.log(this.isTemplate, '0000', this.datas)
      setTimeout(() => {
        this.actStatus = sessionStorage.getItem("actStatus")
        console.log('this.actStatus---', this.actStatus)
      }, 500);
      this.userImg = store.state.userImg ? store.state.userImg : '//img10.360buyimg.com/imgzone/jfs/t1/5442/3/21406/1209/64450fbfF64c7f59f/e504fd84140a67e5.png'
      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log(datasAll, 'datasAll', this.isWebClick);
        if (datasAll) {
          console.log('datasAll1');
          if (datasAll.pieceTogether) {
            this.prizeList = datasAll.pieceTogether.pieceTogether.map(item => {
              item.alreadySuccessTeam = 0
              item.status = 0
              item.posCouponPrice = (item.price * 100 - item.reducedMoney * 100) / 100
              return item
            });
          }
        } else {
          console.log('datasAll2', this.isWebClick);
          // if (this.isWebClick) {
          console.log('this.prizeList2----')
          this.prizeList = [
            {
              "prizeTotalNum": 20,
              "alreadySuccessTeam": 0,
              "name": "满10减1元",
              "skuName": "广博（GuangBo） 测试商品勿拍不发货语音型计算器 计算机 快速计算 大型语音款 #29",
              "posCouponPrice": "22",
              "status": 0,
              "fullMoney": "10",
              "reducedMoney": "1",
              "couponStartTime": 1694188800000,
              "couponEndTime": 1696780799000,
              "position": 1,
              "imagePath": "http://img12.360buyimg.com/n0/jfs/t1/167364/5/7520/164168/60347e8dEafe6693f/96088ea421980c60.jpg",
              "price": "23",
              "prizeInfoId": "1699989632464850945",
              "skuId": "10076684797722",
              "teamPersonNum": 4,
              "prizeTeamLimit": 5
            },
            {
              "prizeTotalNum": 6,
              "alreadySuccessTeam": 0,
              "name": "满15减1元",
              "skuName": "广博（GuangBo） 测试商品勿拍不发货语音型计算器 计算机 快速计算 小型语音款 #21",
              "posCouponPrice": "22",
              "status": 0,
              "fullMoney": "15",
              "reducedMoney": "1",
              "couponStartTime": 1694188800000,
              "couponEndTime": 1696780799000,
              "position": 2,
              "imagePath": "http://img13.360buyimg.com/n0/jfs/t1/167364/5/7520/164168/60347e8dEafe6693f/96088ea421980c60.jpg",
              "price": "23",
              "prizeInfoId": "1699989635736408066",
              "skuId": "10076684797723",
              "teamPersonNum": 2,
              "prizeTeamLimit": 3
            }
          ]
          // }
        }
      } else {
        this.shareUserId = store.state.shareUserId;
        console.log('==shareUserId==', store.state.shareUserId)
        if (this.shareUserId) {
          //分享链接进入
          const params = {
            shareUserId: this.shareUserId,
            prizeInfoId: sessionStorage.getItem('prizeInfoId')
          }
          //弹窗
          sharePopComService10101Fly.create(this.styleData, (submit) => {
            console.log('submit', submit)
            if (submit == 1) {
              //立即参与
              getActivity10101Goods(params, (initdatas) => {
                console.log('===', initdatas)
                if (initdatas.resp_code == 0) {
                  this.$toast("助力成功");
                  this.prizeList = initdatas.data
                  sharePopComService10101Fly.close();

                } else {
                  console.log('=失败==')
                  sharePopComService10101Fly.close();
                  setTimeout(() => {
                    this.getList()
                  }, 2000)

                }
              })

            } else {
              //不参与
              this.getList()
              sharePopComService10101Fly.close();
            }
          });
        } else {
          this.getList()
        }

      }
    },
    getList() {
      getActivity10101Goods({}, (initdatas) => {
        if (initdatas.data) {
          console.log('===', initdatas.data)
          this.prizeList = initdatas.data
          this.timer = Date.now();

        }
      })
    },
    onShare(item) {
      if (item.status == 0) {
        if (this.isTemplate == true) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        if (this.actStatus == 2) {
          this.$toast("活动已结束");
          return;
        }
        if (this.actStatus == 1) {
          this.$toast("活动未开始");
          return;
        }
        if (!this.isDisable) {
          this.isDisable = true
          //存储商品信息
          let params = {
            prizeInfoId: item.prizeInfoId
          }
          const params1 = {
            prizeInfoId: item.prizeInfoId,
            teamPersonNum: item.teamPersonNum
          }
          pieceTogetherOpenTeam(params1, (res) => {
            this.isDisable = false
            if (res.resp_code == 0) {
              allShareGoods(this.isTemplate, params, this, (callBackData) => {
                console.log(callBackData, 'callBackData');
              });
            }

          })
        }


      } else if (item.status == 1) {
        immediatelyDraw(item.prizeInfoId, (data) => {//调用领奖接口
          if (data.resp_code == 0) {
            this.gotoBuy(item)
            this.getList();
          } else if (data.resp_code == 60010) {
            this.$toast('抱歉，优惠券已发完~');
            setTimeout(() => {
              this.getList();
            }, 1000);
          } else if (data.resp_code == 50009) {
            this.$toast('活动已结束');
            location.reload();
            // setTimeout(() => {
            //   this.getList();
            // }, 1000);
          }
        });
      }
    },
    gotoBuy(skuId) {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      newToSkuPage(skuId);
    },
    openDialog(item) {
      //查看更多团员
      let memberList = item.taskPieceTogetherFriendVos.map(item => {
        if (!item.formatStatus) {
          item.joinTime = dateUtil.formatTime(item.joinTime, 'yyyy-MM-dd hh:mm')
          item.formatStatus = true
        }
        return item
      })
      console.log('memberList', memberList)
      pieceTogetherMemberListPopService.create(memberList, this.styleData, submit => {
        pieceTogetherMemberListPopService.close();
      });
    }
  },
};
</script>

<style lang="scss" scoped="scoped">
.prizeBox {
  overflow-y: scroll;
}

.flex-box {
  display: flex;
  width: 100%;
}

.rightinfo {
  margin-left: 0.23rem;

  div {
    text-align: left;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    word-break: keep-all;
  }
}

.tiptext {
  color: #000;
  font-size: 0.18rem;
  white-space: nowrap;
  word-break: keep-all;
  position: relative;
}

.big-font {
  font-size: 0.62rem;
  margin-right: 0.12rem;
  line-height: 1;
  position: relative;
}

.lookMember {
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
}

.disable-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba($color: #ffffff, $alpha: 0.5);
}
</style>
