<template>
	<div v-if="show">
		<basicPopNew title="购物获取抽奖机会" :taskType="taskType" :SQLstyle="styleData" @closeClick="backDrawPage">
			<div class="shopPopNew">
				<div class="shopPopNewCanYu">
					<div class="tHead">参与条件：</div>
					<div class="tText">
						<span v-if="taskType != '23'">
							在
							<span class="color-cus" :style="styleData.span">{{ startTime }}~{{ endTime }}</span>
							期间，购买
							<span class="color-cus" :style="styleData.span">{{ title }}</span>
							，且订单状态为
							<span class="color-cus" :style="styleData.span">已完成</span>
						</span>

						<span v-if="taskType == '23'">
							在
							<span class="color-cus" :style="styleData.span">{{ startTime }}~{{ endTime }}</span>
							期间，下单付款成功即可
						</span>
						
					</div>
				</div>
				<div class="shopPopNewCont">
					<div class="shopPopNewDan" v-for="(item, index) in data.skuInfoVO" :key="index">
						<div @click="goToBuy(item.skuId)" v-lz-click="'5'">
							<img :src="item.skuImg" />
							<div class="title">{{ item.skuName }}</div>
							<!-- <div class="price">￥{{ item.skuPrice }}</div> -->
						</div>
						<div class="attention">￥{{ item.skuPrice }}</div>
					</div>
				</div>
				<div class="haredContent">
					<div class="mySharedContent1" :style="styleData.backcolor">
						通过购物已获得
						<span class="num" :style="styleData.span">{{ data.prieCount }}</span>
						次抽奖机会
					</div>
					<div class="mySharedContent" :style="styleData.babackground" v-lz-click="'4'" @click="enterstore">
						立即进店购物
						<i class="el-icon-arrow-right"></i>
					</div>
				</div>
			</div>

			<!-- <div :class="baseClassName">
        <div class="draw-panel-follow">
          <div class="giveContent">
            <table>
              <tbody>
                <tr>
                  <td class="tHead">参与条件：</td>
                  <td class="tText">
                    <span
                      >在
                      <span class="color-cus"
                        >{{startTime}}~{{endTime}}</span
                      >
                      拍下，买了
                      <span class="color-cus">{{title}}</span>，且订单状态为已付款
                    </span>
                  </td>
                </tr>
                <tr>
                <tr v-if="skuDiplay" >
                    <td colspan="2">
                    <div  class="prizearr" >
                        <a href="javascript:;" v-for="(item, index) in data.skuInfoVO" :key="index" class="prizeitem" @click="goToBuy(item.skuId)" >
                        <div class="prizeicon">
                            <img :src="item.skuImg" />
                        </div> 
                        <div class="prizename">
                            {{item.skuName}}
                        </div> 
                        <div class="prizenum">￥{{item.skuPrice}}</div>
                        </a>
                    </div>
                    </td>
                </tr>
                <tr>
                  <td>抽奖次数：</td>
                  <td>
                    <span
                      ><span class="color-cus">每购买</span> 
                      <span class="color-cus">{{data.finishNum}}</span> 件统一赠送
                      <span class="color-cus">{{data.sendNum}}</span> 次抽奖机会</span
                    >
                  </td>
                </tr>
              </tbody>
            </table>
            <p
              style="
                color: rgb(245, 98, 100);
                font-size: 0.24rem;
                text-align: center;
              "
            >
              订单信息可能稍有延迟，抽奖机会将尽快发放
            </p>
          </div>

        </div>
        <div class="mySharedContent">
            通过购物已获得 <span class="num">{{ data.prieCount }}</span>次抽奖机会
        </div>
        <div class="f-tac" style="margin-top: 0.6rem">
            <div class="attr-btn" v-lz-click="'4'" @click="enterstore"></div>
        </div>
        <div class="box"></div>
      </div> -->
		</basicPopNew>
	</div>
</template>
<script>
import basicPopNew from './basicPopNew.vue';
import dateUtil from '../../../util/dateUtil.js';
import { goToShopPage } from '../../../util/tools.js';
import { goToSkuPage } from '../../../util/tools.js';
import store from '../../../store/store';
export default {
	props: ['isTemplate', 'datas', 'keyData', 'templateData'],
	components: {
		basicPopNew
	},
	data() {
		return {
			startTime: '',
			endTime: '',
			title: '',
			baseClassName: 'follow',
			skuDiplay: false,
			activityType: 0,
			taskType: ''
		};
	},

	created() {
		console.log(this.styleData, '1234');
		this.taskType = this.data.taskType;
		document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
		console.log(this.data.startTime);
		this.startTime = dateUtil.formatTime(this.data.startTime, 'yyyy-MM-dd hh:mm:ss');
		this.endTime = dateUtil.formatTime(this.data.endTime, 'yyyy-MM-dd hh:mm:ss');
		console.log(this.data.skuInfoVO + 'aaaa');
		if (this.data.skuInfoVO && this.data.skuInfoVO.length > 0) {
			this.title = '以下任意商品';
			this.baseClassName = 'follow1';
			this.skuDiplay = true;
		} else {
			this.title = '店铺内任意商品';
			this.baseClassName = 'follow';
			this.skuDiplay = false;
		}
		this.activityType = sessionStorage.getItem('activityType');
		if (this.activityType == 10031) {
			if (this.data.skuInfoVO && this.data.skuInfoVO.length > 0) {
				this.title = '订单中含有' + this.data.skuInfoVO.length + '款中的任意商品';
				this.baseClassName = 'follow1';
				this.skuDiplay = true;
			} else {
				this.title = '全店任意商品';
				this.baseClassName = 'follow';
				this.skuDiplay = false;
			}
		}
		console.log(this.baseClassName);
	},
	methods: {
		backDrawPage() {
			document.querySelector('body').removeAttribute('style');
			this.submit(0);
		},
		goToBuy(sku) {
			console.log(sku);
			goToSkuPage(sku);
		},
		enterstore() {
			document.querySelector('body').removeAttribute('style');
			console.log('进入商店');
			let shopId = store.state.shopId;
			goToShopPage(shopId);
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.shopPopNew {
	max-height: 11.61rem;
	overflow-y: auto;
	box-sizing: border-box;
	padding-bottom: 3.7rem;
	margin-top: 0.3rem;
	.shopPopNewCanYu {
		padding: 0 0.3rem 0.3rem;
		.tHead {
			font-size: 0.3rem;
			color: #262626;
			font-weight: bold;
		}
		.tText {
			font-size: 0.24rem;
			color: #262626;
			font-weight: 500;
			margin-top: 0.27rem;
			.color-cus {
				color: #f2270c;
			}
		}
	}
	.shopPopNewCont {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0.3rem;
		.shopPopNewDan {
			width: 3.4rem;
			border-radius: 0.2rem;
			background: #fff;
			overflow: hidden;
			margin-bottom: 0.1rem;
			img {
				width: 100%;
				display: flex;
			}
			.title {
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-size: 0.3rem;
				color: #333333;
				margin: 0.2rem;
			}
			.attention {
				font-size: 0.24rem;
				color: #f2270c;
				margin-left: 0.2rem;
				margin-bottom: 0.2rem;
			}
			.attention1 {
				width: 1.8rem;
				height: 0.5rem;
				font-size: 0.2rem;
				color: #fff;
				background: linear-gradient(90deg, #8c8c8c 0%, #bfbfbf 100%);
				border-radius: 0.25rem;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto 0.3rem;
			}
		}
	}
	.haredContent {
		width: 100%;
		display: flex;
		position: fixed;
		bottom: 0;
		.mySharedContent {
			width: 50%;
			height: 0.88rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background: linear-gradient(90deg, #f2270c 0%, #ff6420 100%);
			font-size: 0.24rem;
		}
		.mySharedContent1 {
			width: 50%;
			height: 0.88rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #262626;
			background: #ffe3e3;
			font-size: 0.24rem;
			.num {
				color: #f2270c;
			}
		}
	}
}
</style>
