<template>
    <div :style="styleData.auctionBox" class="auctionBox" ref="auctionGoods"
        @click="styleClick('click', 'auctionGoods')" @mousemove="styleClick('mousemove', 'auctionGoods')"
        @mouseout="styleClick('mouseout', 'auctionGoods')">
        <div class="myPointBox">
            <div class="leftBox">
                <span class="icon-point"></span>
                <span>我的积分</span>
            </div>
            <div class="rightBox">{{ myPonit }}</div>
        </div>
        <div class="goodsBox">
            <div class="headerBox">
                <div class="countBox">
                    <span>{{ remainBids }}{{ remainBids == '不限制' ? '' : '次' }}</span>
                </div>
            </div>
            <div class="tabsBox" v-if="auction.length > 0">
                <div :style="styleData.tab" class="tab" @click="cutTabs(item.orderNum)"
                    :class="activeTab == item.orderNum ? 'active' : ''" v-for="item in auction" :key="item.orderNum">{{
                        item.orderNum == 1 ? '首场' :
                            (item.orderNum == 2 && auction.length != 2) ? '第二场' : (item.orderNum == 2 && auction.length == 2) ?
                                '终场' : (item.orderNum == 3 && auction.length != 3) ? '第三场' : (item.orderNum == 3 && auction.length
                                    == 3) ? '终场' : (item.orderNum == 4 && auction.length != 4) ? '第四场' : (item.orderNum == 4 &&
                                        auction.length
                                        == 4) ? '终场' : '终场'
                    }}</div>
            </div>
            <div class="goodsDetailBox" v-if="auction.length > 0">
                <div class="downDate">
                    <div v-if="auction[activeTab - 1].dateStatus == 1">
                        <span>距本场结束: </span>
                        <span class="num">{{
                            auction[activeTab - 1].day.length > 1 ? auction[activeTab -
                                1].day[0] :
                                '0'
                        }}{{
    auction[activeTab - 1].day.length > 1 ? auction[activeTab -
        1].day[1] :
        auction[activeTab - 1].day[0]
}}</span>
                        <span>天</span>
                        <span class="num">{{
                            auction[activeTab - 1].hour.length > 1 ? auction[activeTab -
                                1].hour[0]
                                : '0'
                        }}{{
    auction[activeTab - 1].hour.length > 1 ? auction[activeTab -
        1].hour[1]
        :
        auction[activeTab - 1].hour[0]
}}</span>
                        <span>时</span>
                        <span class="num">{{
                            auction[activeTab - 1].minu.length > 1 ? auction[activeTab -
                                1].minu[0]
                                : '0'
                        }}{{
    auction[activeTab - 1].minu.length > 1 ? auction[activeTab -
        1].minu[1]
        :
        auction[activeTab - 1].minu[0]
}}</span>
                        <span>分</span>
                        <span class="num">{{
                            auction[activeTab - 1].sec.length > 1 ? auction[activeTab -
                                1].sec[0] :
                                '0'
                        }}{{
    auction[activeTab - 1].sec.length > 1 ? auction[activeTab -
        1].sec[1] :
        auction[activeTab - 1].sec[0]
}}</span>
                        <span>秒</span>
                    </div>
                    <div v-else-if="auction[activeTab - 1].dateStatus == 0">
                        {{ auction[activeTab - 1].biddingStartTime | filterDate }}&nbsp;开始竞拍
                    </div>
                    <div v-else>竞拍已结束</div>
                </div>
                <div class="goodsItem" v-for="(item, index) in auction[activeTab - 1].drawPrize.prizeList" :key="index">
                    <div class="leftBox">
                        <img :src="item.showImg" alt="">
                    </div>
                    <div class="rightBox">
                        <div class="header">
                            <span
                                :class="auction[activeTab - 1].dateStatus == 1 ? 'icon-status icon-status2' : auction[activeTab - 1].dateStatus == 2 ? 'icon-status icon-status3' : 'icon-status icon-status1'"></span>
                            <span class="name">{{ item.prizeName }}</span>
                            <span :style="styleData.goodsBtn1" @click="showHistory(item)"
                                class="icon-history">竞拍记录</span>
                        </div>
                        <div style="color:#999999">当前价：<span style="color:red">{{
                            item.currentPrice ?
                                item.currentPrice :
                                item.startPoint
                        }}积分</span><span style="font-size: .2rem;" v-if="item.currentPrizeNickName">（{{
    item.iscurrentPrizeUser == 0 ? '当前为本人出价' :
        (item.currentPrizeNickName + '出价')
}}）</span></div>
                        <div style="color:#999999">加价幅度：{{ item.markUpPoint }}</div>
                        <div style="color:#999999">起拍积分：<span style="color:red">{{ item.startPoint }}积分</span>
                        </div>
                        <template v-if="auction[activeTab - 1].dateStatus == 1">
                            <div :style="styleData.goodsBtn2" v-if="item.iscurrentPrizeUser == 1" class="auctionBtn"
                                @click="auctionItem(item, 1)">立即出价</div>
                            <div :style="styleData.goodsBtn2" v-else-if="item.iscurrentPrizeUser == 0"
                                @click="auctionItem(item, 2)" class="auctionBtn">已为最高价</div>
                        </template>
                        <template v-else-if="auction[activeTab - 1].dateStatus == 2">
                            <div v-if="item.iscurrentPrizeUser == 1" class="auctionBtn disabled"
                                @click="auctionItem(item, 3)">竞拍已结束</div>
                            <div :style="styleData.goodsBtn2"
                                v-else-if="item.iscurrentPrizeUser == 0 && item.claimPrizeStatus != 1"
                                class="auctionBtn" @click="auctionItem(item, 5)">立即领取</div>
                            <div v-else-if="item.iscurrentPrizeUser == 0 && item.claimPrizeStatus == 1"
                                class="auctionBtn disabled">已领取</div>
                        </template>
                        <template v-else>
                            <div @click="auctionItem(item, 4)" class="auctionBtn disabled">
                                竞拍未开始</div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
// 弹窗
import {
    auctionToastService,
    auctionGoodsHistoryService
} from '../../../util/hdzxtcomCreate.js';
import { PrizeResultPopComService } from '../../../util/comCreate.js';
import { Toast } from "vant";
let {
    queryAuctionActivity,
    queryAuctionPointActivity,
    participateAuction,
    auctionClaimPrize
} = apis1;

export default {
    props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
    data() {
        return {
            activeTab: 1,
            myPonit: 0,
            remainBids: 0,
            auction: [],
            prizeResultData: {
                styleData: {},
                datas: {},
                keyData: {
                    prizeUrl: 'showImg',
                    prizeName: 'prizeName',
                    prizeType: 'prizeType',
                    priceInfo: 'priceInfo',
                    discountType: 'discountType',
                    couponType: 'couponType'
                }
            },
        };
    },
    created() {
        this.isShowRedCicle = this.datas.isShowRedCicle;

        this.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
            if (xhyFollowSkuTask) {
                this.initData(true);
            }
        });
        this.initData(false);
    },
    methods: {
        styleClick(type, refName) {
            if (this.isWebClick) {
                //传值给B端
                let byValue = {
                    modifyContent: this.modifyContent,
                    refName: refName,
                    styleData: this.styleData,
                    c_this: this,
                    styleDataOld: this.styleDataOld
                };
                this.$emit('opertaionCom', type, byValue);
            }
        },

        initData(isCallBack) {
            if (this.isTemplate) {
                this.auction = [
                    {
                        biddingStartTime: new Date().getTime(),
                        biddingEndTime: new Date().getTime() + 86400,
                        drawPrize: {
                            prizeList: [
                                {
                                    beanNum: 1,
                                    claimPrizeStatus: 1,
                                    markUpPoint: 1,
                                    prizeName: "1积分",
                                    prizeType: 4,
                                    showImg: "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
                                    startPoint: 1,
                                    currentPrizeNickName: '小***么',
                                    activityId: "1610451179551453186",
                                    activityType: 10085,
                                    iscurrentPrizeUser: 0
                                }
                            ]
                        }
                    }
                ]
                this.auction.map((item, index) => {
                    if (item.biddingStartTime <= new Date().getTime()) {
                        if (item.biddingEndTime >= new Date().getTime()) {
                            item.dateStatus = 1;
                            let downDate = this.getDownDate(item.biddingEndTime);
                            item.day = downDate.day;
                            item.hour = downDate.hour;
                            item.minu = downDate.minu;
                            item.sec = downDate.sec;
                            setInterval(() => {
                                item.day = downDate.day;
                                item.hour = downDate.hour;
                                item.minu = downDate.minu;
                                item.sec = downDate.sec;
                            }, 1000);
                        } else {
                            item.dateStatus = 2;
                        }
                    } else {
                        item.dateStatus = 0;
                    }
                    // 预览中
                    if (!this.isWebClick) {
                        item.dateStatus = 1;
                    }
                })
            } else {
                this.intUpdate('init');
                // this.getUserPoint();
            }
            // let token = store.state.token;
            // let params = `${process.env.GAME_HOST}/index.html?templateId=${sessionStorage.getItem('templateId')}&token=${token}`;

        },
        getUserPoint() {
            queryAuctionPointActivity(data => {
                this.myPonit = data.data;
            })
        },
        cutTabs(index) {
            this.activeTab = index;
        },
        getDownDate(endDate) {
            const setTime = new Date(endDate);
            const nowTime = new Date();
            const restSec = setTime.getTime() - nowTime.getTime();
            // 剩余天数
            const day = parseInt(restSec / (60 * 60 * 24 * 1000)) + '';
            // 剩余小时
            const hour = parseInt(restSec / (60 * 60 * 1000) % 24) + '';
            // 剩余分钟
            const minu = parseInt(restSec / (60 * 1000) % 60) + '';
            // 剩余秒数
            const sec = parseInt(restSec / 1000 % 60) + '';
            return {
                day, hour, minu, sec
            }
        },
        getNewData(init) {
            // todo
            queryAuctionActivity(data => {
                this.auction = data.data.auctionVenuesList;
                this.remainBids = (data.data.remainBids || data.data.remainBids == 0) ? data.data.remainBids : '不限制';
                clearInterval()
                this.auction.map((item, index) => {
                    if (item.biddingStartTime <= new Date().getTime()) {
                        if (item.biddingEndTime >= new Date().getTime()) {
                            item.dateStatus = 1;
                            var downDate = this.getDownDate(item.biddingEndTime);
                            this.$set(item, 'day', downDate.day)
                            this.$set(item, 'hour', downDate.hour)
                            this.$set(item, 'minu', downDate.minu)
                            this.$set(item, 'sec', downDate.sec)
                            setInterval(() => {
                                var downDate = this.getDownDate(item.biddingEndTime);
                                if (downDate.day <= 0 && downDate.hour <= 0 && downDate.minu <= 0 && downDate.sec <= 1) {
                                    this.getNewData();
                                    this.getUserPoint();
                                } else {
                                    this.$set(item, 'day', downDate.day)
                                    this.$set(item, 'hour', downDate.hour)
                                    this.$set(item, 'minu', downDate.minu)
                                    this.$set(item, 'sec', downDate.sec)
                                }
                            }, 1000);
                        } else {
                            item.dateStatus = 2;
                        }
                    } else {
                        item.dateStatus = 0;
                    }
                })
                if (init) {
                    let nowActive = 1;
                    let maxLen = this.auction.length;
                    this.auction.map((item, index) => {
                        if (item.biddingEndTime < new Date().getTime()) {
                            nowActive += 1;
                        }
                    })
                    this.activeTab = nowActive > maxLen ? maxLen : nowActive;
                }
            });
        },
        intUpdate(init) {
            this.getNewData(init);
            this.getUserPoint();
            setInterval(() => {
                this.getNewData();
                this.getUserPoint();
            }, 20000);
        },
        // 竞拍该商品
        auctionItem(item, status) {
            // 预览不可点击
            if (!this.isWebClick && this.isTemplate) {
                this.$toast('活动预览，仅供查看');
                return
            }
            switch (status) {
                case 1:
                    // 可以出价
                    let currentPrice = item.currentPrice ? item.currentPrice + item.markUpPoint : item.startPoint + item.markUpPoint;
                    if (this.myPonit < currentPrice) {
                        auctionToastService.create('很遗憾', '积分余额不足~', this.isTemplate, this.styleData, submit => {
                            auctionToastService.close();
                        });
                        return;
                    }
                    if (this.remainBids <= 0) {
                        auctionToastService.create('很遗憾', '未能成功竞拍，当前竞拍剩余可用次数为0', this.isTemplate, this.styleData, submit => {
                            auctionToastService.close();
                        });
                        return;
                    }
                    participateAuction(item.id, currentPrice, item.prizeName, data => {
                        if (data.data && data.resp_code != '50085') {
                            this.myPonit -= currentPrice;
                            this.remainBids = this.remainBids == '不限制' ? this.remainBids : this.remainBids - 1;
                            auctionToastService.create('恭喜您', '当前您为最高积分竞拍者，倒计时结束前商品积分未更新，您将凭借当前积分数量成功竞拍', this.isTemplate, this.styleData, submit => {
                                auctionToastService.close();
                            });
                            this.getNewData();
                            this.getUserPoint();
                        } else if (data.resp_code == '50085') {
                            auctionToastService.create('提示', '竞拍信息已更新刷新页面获取最新竞拍状态', this.isTemplate, this.styleData, submit => {
                                auctionToastService.close();
                            });
                        } else {
                            auctionToastService.create('很遗憾', data.resp_msg, this.isTemplate, this.styleData, submit => {
                                auctionToastService.close();
                            });
                        }
                    })
                    break;
                case 2:
                    // 已为最高价,点击刷新数据
                    auctionToastService.create('提示', '竞拍信息已更新刷新页面获取最新竞拍状态', this.isTemplate, this.styleData, submit => {
                        auctionToastService.close();
                    });
                    break;
                case 3:
                    // 竞拍已结束
                    auctionToastService.create('很遗憾', '竞拍已拍完~', this.isTemplate, this.styleData, submit => {
                        auctionToastService.close();
                    });
                    break;
                case 4:
                    // 竞拍未开始
                    auctionToastService.create('很遗憾', '竞拍未开始~', this.isTemplate, this.styleData, submit => {
                        auctionToastService.close();
                    });
                    break;
                case 5:
                    // 竞拍结束并且可以领取
                    auctionClaimPrize(item.position, (data) => {
                        if (data.data.prizeName) {
                            let initDatas = data.data;
                            let prizeData = data.data;
                            this.prizeResultData.datas = prizeData;
                            PrizeResultPopComService.create(this.prizeResultData, initDatas, submit => {
                                PrizeResultPopComService.close();
                            });
                        } else {
                            auctionToastService.create('很遗憾', data.data, this.isTemplate, this.styleData, submit => {
                                auctionToastService.close();
                            });
                        }
                    })
                    break;
                default:
                    break;
            }
        },
        // 竞拍记录
        showHistory(item) {
            if (!this.isWebClick && this.isTemplate) {
                this.$toast('活动预览，仅供查看');
                return
            }
            auctionGoodsHistoryService.create(item.id, this.isTemplate, this.styleData, submit => {
                auctionGoodsHistoryService.close();
            });
        }
    },
    mounted() {
        this.publicData.$on('updateAuction', () => {
            this.getNewData();
            this.getUserPoint();
            document.querySelector('body').removeAttribute('style');
            auctionToastService.close();
        })
    }
};
</script>

<style lang="scss" scoped="scoped">
.auctionBox {
    width: 7.06rem;
    margin-top: .2rem;
    margin-left: calc(50% - 7.06rem/2)
}

.myPointBox {
    border: 1px solid #e4ae6b;
    width: 3.9rem;
    height: .94rem;
    background: #1a1308;
    margin-left: calc(50% - 3.9rem/2);
    border-radius: .94rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .leftBox {
        color: white;
        font-size: .24rem;

        .icon-point {
            background: url('//img10.360buyimg.com/imgzone/jfs/t1/221421/6/21695/903/63a3bfe0Ec767e3f1/984f4542ca8a6723.png');
            background-size: 100% 100%;
            display: inline-block;
            width: .29rem;
            height: .29rem;
            vertical-align: middle;
            margin-right: .1rem;
        }
    }

    .rightBox {
        font-size: .48rem;
        margin-left: .2rem;
        color: #f7d091;
    }
}

.goodsBox {
    background: white;
    margin-top: .2rem;
    border-radius: .24rem;
    padding-bottom: .2rem;

    .headerBox {
        width: 100%;
        height: 1.21rem;
        background: url('//img10.360buyimg.com/imgzone/jfs/t1/31250/37/19952/38099/63a3c780E378d6f51/c981fbc743171cdc.png');
        background-size: 100% 100%;
        position: relative;

        .countBox {
            position: absolute;
            width: 2rem;
            right: 0;
            top: .25rem;
            font-size: .3rem;
            white-space: nowrap;

            span {
                color: #ff6000;
                font-size: .3rem;
            }
        }
    }

    .tabsBox {
        padding: .3rem .7rem;
        display: flex;
        justify-content: space-between;

        .tab {
            padding: .05rem 0;

            &.active {
                border-bottom: 1px solid black;
            }
        }
    }

    .downDate {
        white-space: nowrap;
        color: black;
        font-size: .24rem;
        width: 6.55rem;
        margin-left: calc(50% - 6.55rem/2);
        text-align: left;
        margin-bottom: .3rem;

        .num {
            background: black;
            padding: .01rem .03rem;
            color: white;
        }
    }

    .goodsItem {
        width: 6.55rem;
        margin-left: calc(50% - 6.55rem/2);
        border: 1px solid #e4ae6b;
        border-radius: .1rem;
        box-sizing: border-box;
        padding: .2rem .2rem .1rem .2rem;
        margin-bottom: .2rem;

        .leftBox {
            width: 2.06rem;
            height: 2.06rem;
            margin-right: .2rem;
            display: inline-block;
            border-radius: .1rem;

            img {
                width: 100%;
                height: 100%;
                border-radius: .1rem;
            }
        }

        .rightBox {
            width: 3.7rem;
            font-size: .24rem;
            display: inline-block;
            vertical-align: top;
            text-align: left;
            position: relative;
            vertical-align: top;

            div {
                margin-top: .15rem;

                &:first-child {
                    // margin-top: 0;
                }
            }

            .header {
                position: relative;

                .icon-status {
                    width: .92rem;
                    height: .32rem;
                    display: inline-block;
                    position: absolute;
                    left: 0;

                    &.icon-status3 {
                        background: url('//img10.360buyimg.com/imgzone/jfs/t1/146877/15/34509/1392/63bb8294Fb65efee2/62d22c980fd1da04.png');
                        background-size: 100% 100%;
                    }

                    &.icon-status2 {
                        background: url('//img10.360buyimg.com/imgzone/jfs/t1/170810/39/33380/1392/63a3ebbfEab64a32f/098693b4710d823d.png');
                        background-size: 100% 100%;
                    }

                    &.icon-status1 {
                        background: url('//img10.360buyimg.com/imgzone/jfs/t1/54454/33/22628/1474/63a3ebbfEb2295d9e/0c5ac867424ac94f.png');
                        background-size: 100% 100%;
                    }
                }

                .name {
                    width: 2.75rem;
                    text-indent: 1rem;
                    display: inline-block;
                    text-align: left;
                    line-height: .32rem;
                    word-break: break-all;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .icon-history {
                    color: white;
                    background: #378adc;
                    position: absolute;
                    right: -.22rem;
                    top: 0;
                    border-top-left-radius: .187rem;
                    border-bottom-left-radius: .187rem;
                    padding: .05rem .05rem .05rem .16rem;
                }
            }

            .auctionBtn {
                width: 1.44rem;
                height: .55rem;
                line-height: .55rem;
                text-align: center;
                border-radius: .275rem;
                color: white;
                background: #fd4226;
                position: absolute;
                right: 0;
                bottom: 0;

                &.disabled {
                    background: linear-gradient(to right, #bdbdbe, #6b696a);

                }
            }
        }
    }
}
</style>
