<template>
    <div class="shareDz0610">
        <div class="titleTop"></div>
        <!-- 奖品区域 -->
        <div class="onePrize" v-if="fissionPrizeList.length == 1">
            <div class="leftBox">
                <img :src="fissionPrizeList[0].showImg" alt="">
                <div v-if="fissionPrizeList[0].status == 3" class="successBtn"></div>
                <div v-if="fissionPrizeList[0].status == 2" class="faileBtn"></div>
                <div v-if="fissionPrizeList[0].status == 0" class="overBtn"></div>
            </div>
            <div class="rightBox">
                <div class="leftNum">奖品剩余：{{fissionPrizeList[0].leftNum}}份</div>
                <div class="prizeName">{{fissionPrizeList[0].prizeName}}</div>
                <div class="canDrawBtn" v-if="fissionPrizeList[0].status == 1" @click="prizeClick(fissionPrizeList[0])">
                </div>
                <div>
                    成功分享
                    <span style="color: #FFD84F;">{{fissionPrizeList[0].successTimes}}人</span>
                    可领奖
                </div>
            </div>
        </div>

        <div class="morePrize" :class="fissionPrizeList.length >3 ? 'moreThree':'litter'"
            v-if="fissionPrizeList.length > 1">
            <div class="prizeItem" v-for="(item, index) in fissionPrizeList" :key="index">
                <div class="leftNum">奖品剩余：{{item.leftNum}}份</div>
                <div class="imgBox">
                    <img :src="item.showImg" alt="">
                    <div v-if="item.status == 3" class="successBtn"></div>
                    <div v-if="item.status == 2" class="faileBtn"></div>
                    <div v-if="item.status == 0" class="overBtn"></div>
                </div>
                <div class="prizeName">{{item.prizeName}}</div>
                <div class="canDrawBtn" v-if="item.status == 1" @click="prizeClick(item)"></div>
                <div class="shareMsg">
                    成功分享
                    <span style="color: #FFD84F;">{{item.successTimes}}人</span>
                    可领奖
                </div>
            </div>
        </div>

        <div v-if="new Date().getTime() > endTime" class="endMsg">
            <div v-if="isShare != 1">来晚啦，活动已到期，看看其他活动吧~</div>
            <div v-else-if="isShare == 1 && friendList.length == 0">邀请失败了~下次再来吧~</div>
            <div v-else>活动结束~去看看其他活动吧~</div>
        </div>

        <!-- 好友头像 -->
        <div class="friendBox" v-if="friendList.length >= 1 && new Date().getTime() <= endTime"">
            <div class="friendTop" v-if="friendList.length <= 5">
                <div class="friendImg" v-for="item in friendList">
                    <img :src="item.userImg" alt="">
                </div>
            </div>
            <div class="friendTopMore" v-if="friendList.length > 5">
                <div class="friendImg" v-for="item in friendList">
                    <img :src="item.userImg" alt="">
                </div>
            </div>
            <div class="shareNum">
                已成功邀请
                <span style="color: #E07200;">{{friendList.length}}</span>
                名好友
            </div>
        </div>

        <!-- 继续邀请 -->
        <div class="nextShare" v-if="friendList.length > 0 && new Date().getTime() <= endTime">
            <div class="btn1" @click="jumpLink"></div>
            <div class="btn2" @click="handleshare"></div>
        </div>

        <!-- 倒计时 -->
        <div class="timeSty" >
            <van-count-down :time="endTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒">
                <template #default="timeData">
                    <span class="icon"></span>
                    <span> 距活动结束剩余：</span>
                    <span class="green">
                        <span class="block">{{
                            timeData.days >= 10 ? timeData.days : "0" + timeData.days
                            }}</span>
                        <span>天</span>
                        <span class="block">{{
                            timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
                            }}</span>
                        <span>时</span>
                        <span class="block">{{
                            timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
                            }}</span>
                        <span>分</span>
                        <span class="block">{{
                            timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
                            }}</span>
                        <span>秒</span>
                    </span>
                </template>
            </van-count-down>
        </div>

        <!-- 邀请好友 -->
        <div>
            <div v-if="friendList.length == 0 && new Date().getTime() <= endTime" class="oneShare" @click="handleshare"></div>
        </div>

        <!-- 中奖播报 -->
        <div class="winnerBox" v-if="friendList.length == 0 && winnerList.length > 0">
            <van-swipe :autoplay="3000" vertical :show-indicators="false">
                <van-swipe-item v-for="(item,index) in winnerList" :key="index">
                    <div class="noticIcon"></div>
                    {{item.nickName}}已获得福利
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 玩法说明 -->
        <div class="playMsg"  v-if="new Date().getTime() <= endTime"></div>
    </div>
</template>
<script>
    import Vue from "vue";
    import { CountDown, Swipe, SwipeItem } from "vant";
    Vue.use(CountDown);
    Vue.use(Swipe);
    Vue.use(SwipeItem);
    import {
        PrizeResultPopComService,
        NoPrizeResultPopComService,
        sharePanelPopComService
    } from "../../../util/hdzxtcomCreate.js";
    import apis1 from "../../../util/apis1.js";
    import { allShare } from "../../../js/share.js"
    import { goToShopPage } from '../../../util/tools.js';
    import store from '../../../store/store.js';
    let { setSharePrize, drawPrize, bargainFriends, getWinnerData, immediatelyDraw1 } = apis1;
    export default {
        props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
        data() {
            return {
                shareSuccessTimesList: [],
                fissionPrizeList: [],
                endTime: '',
                friendList: [],
                winnerList: [],
                link: '',
                oneClickButton: false,
                isShare:null,
            }
        },
        created() {
            this.publicData.$on("activityLoaded", (initDataAll, datas) => {
                this.endTime = initDataAll.endTime;
            });
            this.initData();
        },
        methods: {
            initData() {
                if (this.isTemplate == true) {
                    var datasAll = this.templateData;
                    console.log(datasAll, "datasAlldatasAll");

                    if (datasAll) {
                        this.fissionPrizeList = datasAll.sharePolite.draw.prizeList;
                        this.fissionPrizeList.forEach((v, i) => {
                            if (v.position == datasAll.sharePolite.prize[i].position
                            ) {
                                this.fissionPrizeList[i].successTimes = datasAll.sharePolite.prize[i].successTimes;
                                this.fissionPrizeList[i].leftNum = this.fissionPrizeList[i].totalPrizeNum;
                            }
                        });
                    } else {
                        this.endTime = new Date().getTime() + 3600 * 24 * 1000;
                        this.fissionPrizeList = [{
                            prizeName: "奖品名称",
                            showImg: "http://img13.360buyimg.com/n0/jfs/t1/234504/18/13946/52081/65e199cdF58b837c0/45b10688b0976b07.png",
                            successTimes: 1,
                            leftNum: 10
                        }]
                    }
                } else {
                    setSharePrize((res) => {
                        this.link = res.data.link
                        this.isShare = res.data.isShare
                        this.shareSuccessTimesList = res.data.shareSuccessTimesList
                        setTimeout(() => {
                                if (res.data.status == 0) {
                                    //判断助力状态
                                    this.$toast("已成功帮好友助力");
                                }
                                if (res.data.status == 1) {
                                    this.$toast("已助力");
                                }
                                if (res.data.status == 2) {
                                    this.$toast("助力失败");
                                }
                                if (res.data.status == 3) {
                                    this.$toast("自己不能给自己助力！");
                                }
                        }, 500);
                        drawPrize((initdatas) => {
                            this.fissionPrizeList = initdatas.data.prizeInfo;
                            this.fissionPrizeList.forEach((v, i) => {
                                if (v.prizeInfoId == this.shareSuccessTimesList[i].id
                                ) {
                                    this.fissionPrizeList[i].status = this.shareSuccessTimesList[i].status;
                                    this.fissionPrizeList[i].prizeInfoId = this.shareSuccessTimesList[i].prizeInfoId;
                                    this.fissionPrizeList[i].successTimes = this.shareSuccessTimesList[i].successTimes;
                                }
                            });
                        })
                    })
                    this.getFriends()
                    this.getWinnerFun()
                }
            },
            getFriends() {
                bargainFriends((res) => {
                    this.friendList = res.data.friends
                });
            },
            getWinnerFun() {
                getWinnerData(res => {
                    this.winnerList = res.data
                })
            },
            jumpLink() {
                if (this.link) {
                    window.location.href = this.link
                } else {
                    let shopId = store.state.shopId;
                    goToShopPage(shopId);
                }
            },
            handleshare() {
                console.log('okokoko');
                
                if (this.isTemplate == true) {
                    // Toast("活动预览，仅供查看");
                    return;
                } else {
                    let actStatus = sessionStorage.getItem("actStatus");
                    if (actStatus == 2) {
                        this.$toast("活动已结束");
                        return;
                    }
                    if (actStatus == 1) {
                        this.$toast("活动尚未开始");
                        return;
                    }
                    if (store.state.clientType == "02") {
                        // 微信环境
                        allShare(this.isTemplate, this, (callBackData) => { });
                    }else{
                        sharePanelPopComService.create(
                                    this.styleData,
                                    (submit) => {
                                        sharePanelPopComService.close();
                                    }
                                );
                    }
                }
            },
            prizeClick(data) {
                let actStatus = sessionStorage.getItem("actStatus");
                if (actStatus == 2) {
                    this.$toast("活动已结束");
                    return;
                }
                if (actStatus == 1) {
                    this.$toast("活动未开始");
                    return;
                }
                if (this.oneClickButton) {
                    return;
                }
                this.oneClickButton = true;
                console.log(data, "itemdata");
                if (this.friendList.length >= data.successTimes) {
                    immediatelyDraw1(data.id, (drawData) => {
                        this.oneClickButton = false;
                        if (drawData.resp_code == 0) {
                            if (drawData.data.status == 1) {
                                var obj = {
                                    datas: {},
                                    keyData: {
                                        prizeUrl: "showImg",
                                        prizeName: "prizeName",
                                        prizeType: "prizeType",
                                        priceInfo: "priceInfo",
                                        discountType: "discountType",
                                        couponType: "couponType",
                                    },
                                };
                                obj.datas = data
                                PrizeResultPopComService.create(obj, drawData.data, this.styleData, (submit) => {
                                    PrizeResultPopComService.close();
                                });
                                this.$toast("领奖成功");
                            } else {
                                NoPrizeResultPopComService.create(
                                    this.styleData,
                                    (submit) => {
                                        NoPrizeResultPopComService.close();
                                    }
                                );
                            }
                        } else if (drawData.resp_code == 60010) {
                            this.$toast("奖品已发完");
                        } else if (drawData.resp_code == 50009) {
                            this.$toast("活动已结束");
                        }
                        this.initData()
                    })
                }
            }
        }
    }
</script>
<style lang="scss">
    .shareDz0610 {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: .18rem;
        flex-wrap: wrap;

        .titleTop {
            width: 6.86rem;
            height: .54rem;
            background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/316233/35/8325/21840/6847f636Fd4788050/aada107718f2acd1.png);
            background-size: 100%;
            margin-bottom: .2rem;
        }

        .onePrize {
            width: 6.48rem;
            height: 2.6rem;
            background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/291661/35/8246/7810/6848e465Fc4f50a0c/58640a96f8641eb0.png);
            background-size: 100%;
            display: flex;
            align-items: center;

            .leftBox {
                width: 2.2rem;
                height: 2.2rem;
                margin-left: .4rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                .successBtn {
                    position: absolute;
                    width: 1.2rem;
                    height: 1.2rem;
                    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/309842/37/8506/11732/6849217cFa94e43b3/7177b65ef8d35f71.png);
                    background-size: 100%;
                    top: 0rem;
                    right: -.3rem;
                }

                .faileBtn {
                    position: absolute;
                    width: 1.2rem;
                    height: 1.2rem;
                    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/298227/5/12337/12836/6849228cFc1beb58c/bf2d5e247c75fd88.png);
                    background-size: 100%;
                    top: 0rem;
                    right: -.3rem;
                }
                .overBtn {
                    position: absolute;
                    width: 1.2rem;
                    height: 1.2rem;
                    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/298425/16/15993/8218/684fbfb0F7edacc27/a129b48961960a49.png);
                    background-size: 100%;
                    top: 0rem;
                    right: -.3rem;
                }

                img {
                    width: 2rem;
                    height: 2rem;
                }
            }

            .rightBox {
                width: 2.5rem;
                height: 2.2rem;
                margin-left: 1rem;
                font-size: .24rem;
                color: #fff;
                text-align: left;

                .leftNum {
                    margin-bottom: .15rem;
                }

                .canDrawBtn {
                    width: 1.7rem;
                    height: .51rem;
                    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/314009/29/8681/9076/6848ffcfF657e07dd/a5785195920784b9.png);
                    background-size: 100%;
                    margin-bottom: .15rem;
                }

                .prizeName {
                    margin-bottom: .15rem;
                }
            }
        }

        .moreThree {
            display: -webkit-box;

            .prizeItem {
                margin-right: .2rem;
            }
        }

        .litter {
            display: flex;
            justify-content: space-around;
        }

        .morePrize {
            width: 7.2rem;
            height: 2.93rem;
            overflow-x: scroll;

            .prizeItem {
                width: 2.28rem;
                height: 2.93rem;
                background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/306463/8/9899/6281/68493e3fF44aa6e7d/db97abc87e5ed58d.png);
                background-size: 100%;
                padding: .15rem .3rem;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                align-content: flex-start;

                .leftNum {
                    width: 100%;
                    font-size: .18rem;
                    line-height: .18rem;
                    height: .18rem;
                    text-align: left;
                }

                .imgBox {
                    margin-top: .1rem;
                    width: 1.2rem;
                    height: 1.2rem;
                    background: #fff;
                    border-radius: 50%;
                    position: relative;

                    .successBtn {
                        position: absolute;
                        width: .68rem;
                        height: .67rem;
                        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/308710/4/8508/6064/68494739F2e82782a/26f18f2fddf8c746.png);
                        background-size: 100%;
                        top: .3rem;
                        right: -.3rem;
                    }

                    .faileBtn {
                        position: absolute;
                        width: .68rem;
                        height: .67rem;
                        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/300583/31/14285/6231/68494754Fb81163ee/5c94bc7300cbb42e.png);
                        background-size: 100%;
                        top: .3rem;
                        right: -.3rem;
                    }
                    .overBtn {
                        position: absolute;
                        width: .68rem;
                        height: .67rem;
                        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/298425/16/15993/8218/684fbfb0F7edacc27/a129b48961960a49.png);
                        background-size: 100%;
                        top: .3rem;
                        right: -.3rem;
                    }
                }

                .prizeName {
                    margin-top: .28rem;
                    width: 100%;
                    color: #fff;
                    font-size: .18rem;
                    line-height: .18rem;
                    height: .18rem;
                }

                .canDrawBtn {
                    margin-top: .05rem;
                    width: 1.34rem;
                    height: .4rem;
                    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/306560/27/9803/6214/6849429bF81b6e558/436b1ed13366b7e1.png);
                    background-size: 100%;
                }

                .shareMsg {
                    width: 100%;
                    color: #fff;
                    font-size: .18rem;
                    line-height: .18rem;
                    height: .18rem;
                    margin-top: .07rem;
                }
            }
        }
        .endMsg{
            font-size: .26rem;
            margin-top: .2rem;
        }
        .friendBox {
            width: 100%;
            margin-top: .2rem;

            .friendTop {
                width: 3.5rem;
                height: .5rem;
                overflow-x: scroll;
                margin: 0 auto;
                display: flex;
                justify-content: center;

                .friendImg {
                    width: .5rem;
                    height: .5rem;
                    background: red;
                    border-radius: 50%;
                    margin-right: .1rem;
                    margin-left: .1rem;
                    overflow: hidden;
                }
            }

            .friendTopMore {
                width: 3.5rem;
                height: .5rem;
                overflow-x: scroll;
                margin: 0 auto;
                display: -webkit-box;
                box-sizing: border-box;

                .friendImg {
                    width: .5rem;
                    height: .5rem;
                    background: yellowgreen;
                    border-radius: 50%;
                    margin-right: .1rem;
                    margin-left: .1rem;
                    overflow: hidden;
                }
            }

            .shareNum {
                font-size: .26rem;
            }
        }

        .nextShare {
            width: 7rem;
            margin-top: .2rem;
            display: flex;
            justify-content: space-between;

            .btn1 {
                width: 3.38rem;
                height: .9rem;
                background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/286779/16/14722/16053/684a6b2bF21db843f/2e03bf36bdf797b2.png);
                background-size: 100%;
            }
            .btn2 {
                width: 3.38rem;
                height: .9rem;
                background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/318113/25/8451/14827/68491dc3F38814080/8e39f637531448c2.png);
                background-size: 100%;
            }
        }

        .timeSty {
            margin-top: .2rem;

            .icon {
                width: .24rem;
                height: .23rem;
                background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/303775/40/9672/804/6848eee0F373f2bc8/7f7b81b259f373b6.png);
                background-size: 100%;
                display: inline-block;
            }

            .green {
                color: #096532;
            }

            .block {
                width: .4rem;
                background: #fff;
                display: inline-block;
                border-radius: .1rem;
            }
        }

        .oneShare {
            width: 4.01rem;
            height: .91rem;
            background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/298058/17/14872/5477/6848f1c4F830874a3/744f03ec6f07f3a8.png);
            background-size: 100%;
            margin-top: .2rem;
        }

        .winnerBox {
            width: 100%;
            height: .3rem;
            margin-top: .2rem;
            display: flex;
            justify-content: center;

            .van-swipe {
                width: 100%;
                height: 100%;

                .van-swipe-item {
                    width: 100%;
                    height: 100%;
                    font-size: .22rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .noticIcon {
                        width: .19rem;
                        height: .18rem;
                        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/295732/17/14097/369/6848fa6eF02338f19/447bb51bec32d83c.png);
                        background-size: 100%;
                        margin-right: .2rem;
                    }
                }
            }
        }

        .playMsg {
            width: 6.86rem;
            height: .27rem;
            background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/302549/23/13769/6819/684a6e2eFa288954a/12d839c95a418736.png);
            background-size: 100%;
            margin-top: .2rem;
        }
    }
</style>