<template>
  <div class="immediately" v-if="show">
      <!-- 店铺 -->
    <div class="enterStorebox">
        <div class="enterStore">
            <div class="shopLogobox">
                <img :src="aggregate.shopLogo" class="shopLogo"/>
            </div>
            <div class="shopNamebox">
                <span>{{this.aggregate.shopName}}</span>
            </div>
        </div>
        <div class="enterStorebtnbox">
            <span class="enterStorebtn" @click="handlenterStoreb">进入店铺<span class="enterStorespan"></span></span>  
        </div>
    </div>
    <!-- 笑脸 -->
    <div style="margin-top: 0.5rem;">
        <i class="success"></i>
    </div>
    <div style="margin-top: 0.2rem;font-size: 0.4rem;">
        <span style="color: rgb(255, 160, 51); ">恭喜您抢中了</span>
    </div>
    <div style="margin-top: 0.2rem; color: rgb(102, 102, 102); font-size: 0.28rem;">
        获得第 <span style="color: rgb(242, 60, 60);">{{this.aggregate.ranking}}</span> 名优惠购买资格
    </div>
    <!-- 产品信息 -->
    <div class="information">
        <div style="width: 2rem;float:left">
            <img :src="aggregate.productImg" alt="" style="width: 2rem; height: 2rem;border: 0;
    max-width: 100%;">
        </div>
        <div class="informationtittle">
            <div>{{this.aggregate.ProductTitle}}</div>
            <div style="margin-top: 0.1rem;">
                <span style="color: rgb(242, 60, 60);">￥{{this.aggregate.productPrice}}</span> 
                <span style="text-decoration: line-through; color: rgb(153, 153, 153); font-size: 0.22rem;">￥{{this.aggregate.originalPrice}}</span>
            </div>
        </div>
    </div>
    <!-- 马上去购买 -->
    <div class=" straightawaybox">
        <div class=" straightaway">
            {{this.emption==0?'马上去购买':'关注店铺马上去购买'}}
        </div>
    </div>
  </div>
  </div>
</template>
<script>
import apis1 from '../../../util/apis1.js'
let {storeGoodsPoint} = apis1
import { goToShopPage } from "../../../util/tools"; //
import store from "../../../store/store";
export default {
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  data() {
    return {
        emption:"0",//1已关注,0未关注
    };
  },
  created() {
    console.log(this.aggregate.ranking, "优惠名次");
    console.log(this.aggregate.originalPrice, "原价");
    console.log(this.aggregate.productPrice, "特惠价");
    console.log(this.aggregate.ProductTitle, "产品标题");
    console.log(this.aggregate.productImg, "产品图片");
    console.log(this.aggregate.shopName,"店铺名字");
    console.log(this.aggregate.shopLogo,"店铺logo");

  },
  methods: {
    closeClick() {
      this.submit();
    },
    handlenterStoreb() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let shopId = store.state.shopId;
      console.log(shopId, "1");
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
  },
};
</script>
<style lang="scss" scoped>
.immediately {
  background: #fff;
  text-align: center;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
}
.enterStorebox {
  font-size: 0.32rem;
  height: 1.4rem;
  padding: 0.2rem;
  border-bottom: 1px solid #e6e6e6;
}
.enterStore {
  float: left;
}
.shopLogobox {
  display: inline-block;
  vertical-align: middle;
}
.shopLogo {
  width: 1rem;
  height: 1rem;
}
.shopNamebox {
  width: 3.8rem;
  margin-left: 0.2rem;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.enterStorebtnbox {
  float: right;
}
.enterStorebtn {
  display: block;
  color: rgb(153, 153, 153);
  line-height: 1rem;
  cursor: pointer;
}
.enterStorespan {
  margin-left: 0.1rem;
  display: inline-block;
  width: 0.26rem;
  height: 0.42rem;
  background-image: url(https://lzkj-yc.isvjd.com/resources/wxcss/discount/0010/icon-jt.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
}
.success {
  display: inline-block;
  width: 2rem;
  height: 2.2rem;
  background-image: url(https://lzkj-yc.isvjd.com/resources/wxcss/discount/0010/hasBeingRobbed.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
}
.information {
  padding: 0.2rem;
  border-top: 1px #e6e6e6 solid;
  margin-top: 0.4rem;
  height: 2.4rem;
}
.informationtittle {
  width: 4.8rem;
  margin-left: 0.2rem;
  text-align: left;
  float: left;
  font-size: 0.32rem;
}
.straightawaybox {
  margin-top: 0.2rem;
}
.straightaway {
  background: rgb(246, 56, 58);
  color: rgb(255, 255, 255);
  display: block;
  margin: 0px 0.3rem;
  padding: 0.2rem;
  border-radius: 4px;
  font-size: 0.32rem;
}
</style>
