<template>
    <div id="preferential" :style="styleData.preferential">
        <!-- ============标题===== -->
        <div class="bounceInDown" :style="styleData.bounceInDown">
            <img :src="datas.bounceInDownImgUrl" :style="styleData.bounceInDownImg">
        </div>
        <!-- ===========前几名下单===== -->
        <div class="fadeInDownBox" :style="styleData.fadeInDownBox">
            <div class="fadeInDownDiv" :style="styleData.fadeInDownDiv"> 
                ~前<span class="fadeInDownsPan" :style="styleData.fadeInDownsPan">{{aggregate.peopleNumber}}</span>名下单减<span class="fadeInDownsPan" :style="styleData.fadeInDownsPan">{{aggregate.DiscountPrice}}</span>元~
            </div>
        </div>
        <!-- ======产品信息===== -->
        <div class="productDiv" :style="styleData.productDiv">
            <div class="productBox" :style="styleData.productBox">
                <div class="productHeader" :style="styleData.productHeader">
                    <span class="productPricespan" :style="styleData.productPricespan">{{aggregate.productPrice}}</span>
                </div>
                <div class="ProductTitlebox" :style="styleData.ProductTitlebox">
                    <div class="ProductTitle" :style="styleData.ProductTitle">{{aggregate.ProductTitle}}</div>
                    <div class="Productcont" :style="styleData.Productcont">
                        <div class="ProductcontLeft" :style="styleData.ProductcontLeft">
                            <div>特惠价：￥<strong class="PreferentialPrice" :style="styleData.PreferentialPrice">{{aggregate.productPrice}}</strong> <span class="PreferentialPriceSpan" :style="styleData.PreferentialPriceSpan">{{aggregate.originalPrice}}</span></div>
                            <div></div>
                            <div class="progress" :style="styleData.progress">
                                <div class="progresscont" :style="styleData.progresscont">
                                    <div class="progressbg" :style="styleData.progressbg"></div>
                                    <span class="progresscontSpan" :style="styleData.progresscontSpan">{{aggregate.progresscontSpan}}</span>
                                </div>
                                <div class="progressEnd" :style="styleData.progressEnd">
                                    已抢 <span class="progressEndSpan" :style="styleData.progressEndSpan">{{aggregate.robbedCount}}</span>件
                                </div>
                            </div>
                        </div>
                        <div class="ProductcontRight" :style="styleData.ProductcontRight">
                            <span class="ProductcontRightBtn" :style="styleData.ProductcontRightBtn" v-if="aggregate.openrob=='1'" @click="openrobPop">马上抢</span>
                            <span class="ProductcontRightBtnDis" :style="styleData.ProductcontRightBtnDis" v-else>已抢购</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import bus from '../../../util/bus.js';
import {
  preferentialPopService,
} from "../../../util/comCreate.js";
export default {
    props: ["isTemplate", "datas", "keyData", "styleData", "templateData"],
    data() {
        return{
            aggregate:{
                peopleNumber:"10",//前几名下单
                DiscountPrice:"5",//优惠几元
                productPrice:"35~888",//特惠价格
                ProductTitle:"【测试商品勿拍】 升降式地'插座'",//产品标题
                originalPrice:"40.00",//原价
                progresscontSpan:"10.00%",// 已抢百分比
                robbedCount:"0",//已抢件数
                openrob:"1",//判断是否"马上抢"(1是抢,0是已购)
                ranking:"1",//名次
                shopName:"",//店铺名字
                shopLogo:"",//店铺logo
                productImg:"https://img30.360buyimg.com/popshop/jfs/t1/102991/30/17843/6809/5e8dc849E88b8548d/125f764054de391a.jpg",//产品图片
            }
        }
    },
    created(){
        this.initdata()
    },
    methods:{
        initdata(){
            bus.$on('shopName',name=>{
                this.aggregate.shopName = name
            });
            bus.$on('shopLogo',logo=>{
                this.aggregate.shopLogo = logo
            })
        },
        openrobPop(){
            alert("11")
            preferentialPopService.create(this.aggregate,(submit) => {

            });
        }
    }
}
</script>
<style scoped>
.bounceInDown{
    animation:mymove 0.7s;
}
@keyframes mymove{
    0%{opacity:0;transform:translateY(-100px);}
    60%{opacity:1;transform:translateY(20px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
.fadeInDownBox{
    animation:fadeinT 1s;
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px);}
    100%{opacity:1;transform:translateY(0);}
}
</style>