<template>
	<div class="popUpBox">
		<div class="por">
			<div class="popUpBag">
				<div class="popUpInner" :style="popHeight">
					<div class="wish"></div>
					<div v-if="list.length <= 0 && isShowNoData">
						<textarea class="myPrizeText">{{ text }}</textarea>
						<div class="popIcon"></div>
					</div>
					<div class="popUpTable" v-if="list.length > 0">
						<div class="popUpTableHead">
							<div class="popUpTableTitle" v-for="(item, index) in listTitle" :key="index">{{ item.name }}</div>
						</div>
						<div class="popUpTableBodyBox">
							<div class="popUpTableBody" v-for="(item, index) in list" :key="index">
								<div class="popUpBodyTitle popUpBodyTitleTime">{{ item.time }}</div>

								<div class="popUpBodyTitle">
									<img
										class="tableImg"
										@click="cardDetailClick(item)"
										src="//img10.360buyimg.com/imgzone/jfs/t1/121364/6/27569/3233/637b411eE3d9f493e/e419df75148edbe7.png"
										alt=""
									/>
								</div>
							</div>
						</div>

						<div v-if="list.length <= 0" class="listNull"><div>暂无明细</div></div>
					</div>
				</div>
			</div>
			<div class="close" @click="closePopUp"></div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import { Form, Field, CellGroup } from 'vant';
import areaUtil from '../../../../util/areaUtil';
import { dateChangeYYYY } from '../utils';

import apis from '../api/api.js';
let { getWinList } = apis;
Vue.use(Form);
Vue.use(Field);
Vue.use(CellGroup);
export default {
	props: ['popData'],

	data() {
		return {
			isShowNoData:false,//默认不显示没有数据的样式
			popHeight: 'height:4.36rem',
			popUpTable: '',
			text: '您还没有DIY的\n心愿袜哟~',
			popUptext: false,
			popUpTable: false,
			list: [],
			listTitle: [{ name: '制作日期' }],
			butImg: '//img10.360buyimg.com/imgzone/jfs/t1/210152/7/28747/29226/637b411dE7d53eebd/4c3830dd8c4fbb12.png'
		};
	},
	created() {
		this.queryWinList();
	},

	methods: {
		closePopUp() {
			this.$emit('closePop');
		},

		// 获取我的奖品列表
		queryWinList() {
			getWinList(data => {
				this.list = data.data;
				this.list.forEach(item => {
					item.time = dateChangeYYYY(item.createTime, 1);
				});
				this.isShowNoData = true;
			});
		},
		//查看贺卡详情
		cardDetailClick(itemData) {
			let callBackData = {
				step: '21',
				itemData: itemData
			};
			this.$emit('closePop', callBackData);
		}
	}
};
</script>

<style lang="scss" scoped>
.popUpBox {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	.tableImg {
		width: 1.38rem;
		height: 0.4rem;
	}

	.popUpBag {
		padding: 0.19rem;
		border-radius: 0.5rem;
		background-color: #f8d580;
		position: relative;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/157466/13/33216/118611/637b4366E585ed795/c9d12a98613dd9b8.png');
	}
	.popUpInner {
		width: 5.8rem;
		// height: 4.36rem;
		background: #fee7b0;
		border: 0px solid #fffbf3;
		border-radius: 0.5rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.myPrize {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/103741/28/28159/28230/637b411dEed0db6e8/b36b195f4d5e0215.png');
	}
	.popIcon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 1.34rem;
		height: 1.37rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/210152/7/28747/29226/637b411dE7d53eebd/4c3830dd8c4fbb12.png');
	}
	.myPrizeText {
		padding: 0.2rem 0.4rem;
		font-size: 0.44rem;
		font-weight: 600;
		color: #000000;
		text-align: center;
		resize: none;
		padding-bottom: 0.1rem;
	}
	.popUpTable {
		width: 100%;
		height: 3.36rem;
		margin-top: 0.8rem;
	}
	.popUpTableHead {
		display: flex;
		align-items: center;
		justify-content: start;
		height: 0.8rem;
		background: #fcc951;
		font-size: 0.34rem;
		color: #000;
		font-weight: 600;
	}
	.popUpTableTitle {
		text-align: left;
		padding-left: 0.68rem;
		width: 100%;
	}
	.popUpTableBody {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.24rem;
		color: #000;
	}
	.popUpBodyTitleTime {
		text-align: left !important;
	}
	.popUpBodyTitle {
		text-align: center;
		width: 100%;
		padding: 0.13rem 0.03rem;
	}
	.popBut {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.73rem;
		width: 2.61rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.hint {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/97295/27/33958/28289/637b411dE1324b953/ca547c1d52b012e9.png');
	}
	.wish {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/179721/23/28435/31563/637b411dE7ac4fab2/71d140e72de24900.png');
	}
	.popUpFailBut {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.73rem;
		width: 3.12rem;
		img {
			width: 100%;
		}
	}
	.upDateFail {
		position: absolute;
		top: -0.7rem;
		left: calc(50% - 2.225rem);
		height: 1.13rem;
		width: 4.45rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/158316/40/32778/26845/637b411dEada82016/2acdb34eb3ec0170.png');
	}
	.popLogo {
		margin: 0 auto;
		width: 2.76rem;
		height: 0.73rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.popMemderText {
		color: #000000;
		font-size: 0.52rem;
		line-height: 0.66rem;
		font-weight: 600;
		margin: 0 auto;
		text-align: center;
		margin-top: 0.7rem;
		padding-bottom: 0.1rem;
		resize: none;
	}
	.popMemderYellow {
		position: relative;
		z-index: 2;
		&::before {
			content: '';
			position: absolute;
			bottom: 0.02rem;
			left: 0;
			width: 100%;
			height: 0.13rem;
			background-color: #ffe700;
			z-index: -1;
		}
	}
	.close {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.69rem;
		width: 0.69rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/192327/22/31425/7696/637b411eEab7f9238/617003dc49594628.png');
	}
	.popMemberWord {
		font-size: 0.36rem;
		margin: 0 auto;
		margin-top: 0.28rem;
	}
	.popMemberBut {
		margin: 0 auto;
		margin-top: 1.07rem;
		height: 0.73rem;
		white-space: 3.12rem;
		img {
			margin: 0 auto;
			margin-bottom: 0.2rem;
			height: 100%;
			display: block;
		}
	}
	.por {
		position: relative;
	}
	.hintWord {
		margin: 0 auto;
		margin-top: 0.1rem;
		font-size: 0.18rem;
		text-align: center;
		opacity: 0.6;
		color: #ffffff;
	}
	.prizeTilte {
		width: 4.65rem;
		height: 0.1em 0.113rem;
	}
	.prizeName {
		color: #000;
		font-size: 0.36rem;
		text-align: center;
	}
	.prizeImg {
		height: 2.88rem;
		margin: 0.4rem auto;
		img {
			height: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	.prizeButBox {
		display: flex;
	}
	.prizeBut {
		height: 0.62rem;
		img {
			height: 100%;
		}
	}
	.m-right-20 {
		margin-right: 0.2rem;
	}
	.prizeImage {
		height: 3.68rem;
		img {
			height: 100%;
		}
	}
	.popUpbut {
		margin: 0 auto;
		height: 0.73rem;
		margin-top: 0.6rem;
		img {
			height: 100%;
		}
	}
	.addressTilte {
		margin: 0 auto;
		height: 1.13rem;
		img {
			height: 100%;
		}
	}
	.contactIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/216820/26/23672/810/637c800aE8d3c7a9e/d70cbeccca2832a2.png');
	}
	.addressInner {
		display: flex;
		align-items: center;
		justify-content: start;
		margin-bottom: 0.46rem;
		position: relative;
		input:disabled {
			color: #000 !important;
		}
	}
	.addressName {
		width: 0.89rem;
		text-align-last: justify;
		text-justify: distribute-all-lines;
		color: #000;
		font-size: 0.29rem;
		font-weight: 600;
		margin-right: 0.15rem;
	}
	.addressInput {
		height: 0.39rem;
		width: 2.98rem;
		font-size: 0.28rem;
		color: #000;
		border-bottom: 0.02rem solid #000;
	}

	.addressForm {
		margin: 0 auto;
		margin-top: 0.5rem;
		width: 4.82rem;
		.van-cell-group {
			background-color: transparent;
			border: none;
			&::after {
				border: none;
			}
		}
	}
	.mobileIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/195789/16/28102/791/637c8384Ed3fdafff/ce8dc7518c2624b8.png');
	}
	.addressIcon {
		margin-right: 0.1rem;
		width: 0.34rem;
		height: 0.34rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/177086/23/30655/1781/637c838cE474a63ef/3ffa73d98158c8c7.png');
	}
	.addressText {
		width: 4.02rem;
		height: 0.42rem;
		font-size: 0.28rem;
		border-bottom: 0.02rem solid #000;
		overflow: hidden;
		margin-left: 0.44rem;
	}
	.addressTextI {
		overflow-x: scroll;
		white-space: nowrap;
		text-align: left;
		color: #000;
	}
	.addressTextD {
		overflow-x: scroll;
		white-space: nowrap;
		text-align: left;
		color: #bcad86;
	}
	.addressLabel {
		margin-left: 0.35rem;
		font-size: 0.29rem;
		color: #000;
		font-weight: 600;
		text-align: left;
		margin-top: 0.1rem;
	}
	.addressTextarea {
		width: 4.02rem;
		background: linear-gradient(rgba(0, 0, 0, 0) 0.4rem, #000 0.02rem);
		background-size: 100% 0.42rem;
		line-height: 0.42rem;
		height: 0.84rem;
		resize: none;
		font-size: 0.28rem;
		margin-bottom: 0.1rem;
		color: #000;
	}
	.ads {
		display: flex;
		align-items: center;
		justify-content: start;
		position: relative;
	}
	.taskTilte {
		height: 1.5rem;
		img {
			height: 100%;
		}
	}
	.taskShopList {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 0.3rem;
	}
	.taskShopText {
		width: 2rem;
		font-size: 0.2rem;
		line-height: 0.62rem;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.taskNum {
		color: #000000;
		font-size: 0.3rem;
		text-align: center;
		font-weight: 600;
		line-height: 0.62rem;
	}
	.taskWord {
		font-size: 0.2rem;
		color: #000;
		text-align: center;
	}
	.taskShopImg {
		width: 2rem;
		img {
			width: 100%;
			display: block;
		}
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.listNull {
		height: calc(100% - 0.8rem);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popUpTableBodyBox {
		height: 2.5rem;
		overflow-y: scroll;
		padding-left: 0.68rem;
	}
}
</style>
