<template>
	<div class="app-content">
		<div class="invite-top-wrap">
			<div class="invite-top-img">
				<img :src="`${constant.imgUrl}/retail/interest/invite.png`" alt mode="widthFix" />
			</div>
			<div class="invite-top-price-wrap">
				<div class="flex-end-center">
					<span class="money-text">{{ data.asset.amount }}</span>
					<span class="app-price">元</span>
				</div>
				<div class="app-color-2">
					<span>受邀朋友可以得</span>
					<span class="app-price">{{ data.asset.prize }}</span>
				</div>
			</div>
			<div class="share-btn" @click="showShare = true"></div>
		</div>
		<div class="list-content">
			<div class="invite-tabs">
				<div class="tabs-list">
					<div class="tabs-img">
						<img :src="`${constant.imgUrl}/retail/interest/invited.png`" alt mode="widthFix" />
					</div>
					<div class="tab-list-right">
						<div class>已邀请(人)</div>
						<div class="tabs-num">{{ data.stat.inviteNum }}</div>
					</div>
				</div>
				<div class="tabs-list">
					<div class="tabs-img">
						<img :src="`${constant.imgUrl}/retail/interest/ordered.png`" alt mode="widthFix" />
					</div>
					<div class="tabs-list-right">
						<div class>已下单(人)</div>
						<div class="tabs-num">{{ data.stat.orderNum }}</div>
					</div>
				</div>
			</div>
			<!-- 邀请记录 -->
			<div class="invite-list-blo">
				<div class="invite-list-tit flex-center-between">
					<div class="app-size-30">邀请记录</div>
					<div class="flex-center-end app-color-3" @click="showAlert = true">
						<span>规则说明</span>
						<i class="iconfont iconchangjianwentixiangguanwenti2"></i>
					</div>
				</div>
				<div class="invite-list-wrap">
					<div class="invite-list flex-center-between" v-for="(item, index) in list" :key="index">
						<div class="list-left flex-center-start">
							<div class="list-img">
								<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt mode="widthFix" />
							</div>
							<div class>
								<div class="app-size-30">{{ item.userName }}</div>
								<div class="app-color-3 invite-list-status">
									<block v-if="item.status == 0">
										<span>{{ item.addTime | formatTime }}</span>
										<span>领券</span>
									</block>
									<block v-else-if="item.status == 1">
										<span>{{ item.orderTime | formatTime }}</span>
										<span>下单</span>
										<span class="app-price">¥{{ item.amount }}</span>
									</block>
									<block v-else-if="item.status == 2">
										<span>{{ item.giveTime | formatTime }}</span>
										<span>兑奖</span>
									</block>
								</div>
							</div>
						</div>
						<div class="app-size-26">{{ item.status | constantfilter('INVITE_STATUS') }}</div>
					</div>
					<!-- <div class="load-more flex-center-center app-color-3">加载更多...</div> -->
				</div>
			</div>
		</div>
		<!-- 弹窗 -->
		<alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
			<div class="alt-wrap">
				<div class="alt-tit app-size-34">规则说明</div>
				<div class="alt-content">
					<div>1、邀请有礼活动老客可以获得奖励，新客可以获得超值的优惠券；</div>
					<div>2、只有本店老客户才能发起邀请；</div>
					<div>3、接受邀请的人需本店新客户；</div>
					<div>4、本活动只能邀请自己的朋友，请勿滥发邀请链接，否则取消邀请权力。</div>
				</div>
			</div>
		</alert-module>
		<app-share-mask :show="showShare" @click="hideShare" />
	</div>
</template>

<script>
import AlertModule from '@/components/plugin/alert'
import AppShareMask from '@/components/module/app-share-mask'
// api
import { getList, getProfile } from '@/api/invite'
export default {
	name: 'invite',
	components: {
		AlertModule,
		AppShareMask
	},
	data() {
		return {
			data: {
				constant: this.$constant,
				stat: {},
				asset: {}
			},
			list: [],
			showAlert: false,
			showShare: false
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getProfile()
			this._getList()
		},
		_getProfile() {
			getProfile().then(res => {
				this.data = res.data
			})
		},
		_getList() {
			return getList().then(res => {
				if (this.$util.isEmpty(res.data.list)) return false
				this.list = res.data.list
			})
		},
		hideAlert() {
			this.showAlert = false
		},
		hideShare() {
			this.showShare = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		width: 100%;
		// position: relative;
		// 弹窗
		/deep/.tui-alert-content {
			padding: 40px 40px 0;
		}
		.alt-wrap {
			.alt-content {
				margin-top: 30px;
				margin-bottom: 30px;
				text-align: left;
				color: $fontColor2;
			}
		}
	}
	.invite-top-wrap {
		position: relative;
		.invite-top-price-wrap {
			position: absolute;
			top: 120px;
			left: 0;
			right: 0;
			text-align: center;
			.flex-end-center {
				margin-bottom: 30px;
			}
			.money-text {
				color: $mainColor;
				font-size: 110px;
			}
		}
		.share-btn {
			position: absolute;
			top: 400px;
			width: 100%;
			height: 180px;
		}
	}
	.list-content {
		position: relative;
		top: -100px;
		width: 96%;
		margin: 0 auto;
	}
	.invite-tabs {
		padding: 20px 60px 24px;
		// border-bottom: 20px solid #f5f5f5;
		margin-bottom: 20px;
		color: $fontColor3;
		border-radius: 10px;
		background-color: #fff;
		@include disFlex(center, space-between);
		.tabs-list {
			@include disFlex(center, flex-end);
		}
		.tabs-img {
			width: 90px;
			margin-right: 20px;
		}
		.tabs-num {
			font-size: 40px;
			color: #ff5400;
			margin-top: 8px;
		}
	}
	.invite-list-blo {
		padding: 20px 20px 24px;
		border-radius: 10px;
		background-color: #fff;
		.invite-list-tit {
			margin-bottom: 20px;
			.iconfont {
				margin-left: 10px;
				font-size: 34px;
			}
		}
		.invite-list-wrap {
			.invite-list {
				padding: 14px 0;
				border-bottom: 1px solid $borderColor;
			}
			.list-img {
				width: 80px;
				margin-right: 20px;
			}
			.invite-list-status {
				span {
					margin-right: 10px;
				}
			}
			// 加载更多
			.load-more {
				padding: 24px 0 6px;
			}
		}
	}
</style>
