<template>
	<div class="app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" addIcon="iconshezhi" addText="设置" @add="pageTo('/admin/interest/setting')" :isBoxShadow="false" :currentTab="form.status" @change="change" itemWidth="25%" :padding="0" />
		<div class="input-wrap">
			<!-- <div class="map-search"> -->
			<app-search-module placeholder="请输入商品名称" :isBtn="true" />
			<!-- </div> -->
			<!-- <div class="app-size-26">搜索</div> -->
		</div>
		<!-- list -->
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div>
						<app-avatar-module :src="item.userAvatar" :width="110" />
					</div>
					<div class="list-right">
						<div class="flex-center-between">
							<div class="app-size-30 app-color-0">{{ item.userName }}</div>
							<div>{{ item.status | constantfilter('INVITE_STATUS') }}</div>
						</div>
						<div class="list-info">
							<div class="list-info-left">
								<div>介绍人：{{ item.introUserName }}</div>
								<div class="list-remark" v-if="item.status == 0 && item.addTime">
									<span>{{ item.addTime | formatTime }}</span>
									<span class="list-remark-prompt">领券</span>
								</div>
								<div class="list-remark" v-if="item.status == 1 && item.orderTime">
									<span>{{ item.orderTime | formatTime }}</span>
									<span class="list-remark-prompt">下单{{ item.price }}</span>
								</div>
								<div class="list-remark" v-if="item.status == 2 && item.giveTime">
									<span>{{ item.giveTime | formatTime }}</span>
									<span class="list-remark-prompt">兑奖</span>
								</div>
							</div>
							<div class="admin-button-com blue" v-if="item.status == 1" @click="redeemFn">兑奖</div>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
		<!-- 兑奖弹窗 -->
		<modal-module :show="redeemModal" :custom="true" :maskClosable="false" @click="modalClick" padding="30rpx 30rpx">
			<template>
				<div class="redeem-wrap">
					<div class="redeem-list-wrap">
                        <!-- 新用户 -->
						<div class="list">
							<div class="list-tag">
								<img :src="`${constant.imgUrl}/retail/interest/new-member.png`" alt mode="widthFix" />
							</div>
							<div class="list-left">
								<app-avatar-module :src="redeemData.userAvatar" :width="100" />
							</div>
							<div class="list-right">
								<div class="app-color-0 app-size-30 app-blod">{{ redeemData.userName }}</div>
								<div>普通客户</div>
								<div>
									<span class="list-time">{{ redeemData.orderTime | formatTime }}</span>
									<span>下单: {{ redeemData.amount }}</span>
								</div>
							</div>
						</div>
                        <!-- 介绍人 -->
						<div class="list">
							<div class="list-tag">
								<img :src="`${constant.imgUrl}/retail/interest/introducer.png`" alt mode="widthFix" />
							</div>
							<div class="list-left">
								<app-avatar-module :src="redeemData.introUserAvatar" :width="100" />
							</div>
							<div class="list-right">
								<div class="app-color-0 app-size-30 app-blod">{{ redeemData.introUserName }}</div>
								<div>普通客户</div>
								<div>
									<span class="list-time">累计邀请: {{ redeemData.inviteNum }}</span>
									<span>介绍下单数: {{ redeemData.orderNum }}</span>
								</div>
							</div>
						</div>
					</div>
					<!-- 总览 -->
					<div class="redeem-total">
						<span>奖励：</span>
						<span class="app-price">￥{{ redeemData.prize }}</span>
					</div>
					<div class="redeem-btn">
						<div class="admin-button-com default big" @click="modalCancel">取消</div>
						<div class="admin-button-com blue big" @click="confirmGive">确认发奖</div>
					</div>
				</div>
			</template>
		</modal-module>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import AppSearchModule from '@/components/module/app-search'
import AppAvatarModule from '@/components/module/app-avatar'
import ModalModule from '@/components/plugin/modal'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { getListB, getDet, give } from '@/api/invite'
export default {
	name: 'admin-invite',
	components: {
		AppTabs,
		AppSearchModule,
		AppAvatarModule,
		ModalModule,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			constant: this.$constant,
			form: {
				status: 0,
				search: ''
			},
			tabs: [
				{
					name: '全部'
				},
				{
					name: '待下单'
				},
				{
					name: '待兑奖'
				},
				{
					name: '已兑奖'
				}
			],
			// 兑奖
			redeemModal: false,
			// 兑奖数据
			redeemData: {}
		}
	},
	onLoad: function() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			let params = JSON.parse(JSON.stringify(this.form))
			params.status = params.status - 1
			return getListB(params).then(res => {
				this.completes(res)
			})
		},
		change(e) {
			if (this.form.status == e.index) {
				return false
			} else {
				this.form.status = e.index
				this.resetList()
				this._list()
			}
		},
		modalCancel() {
			this.redeemModal = false
		},
		modalClick() {},
		// 查看详情
		redeemFn(item) {
			getDet({ id: item.id }).then(res => {
			    this.redeemData = res.data
			    this.redeemModal = true
			})
		},
		// 兑奖
		confirmGive() {
			give({ id: this.redeemData.id }).then(res => {
				this.$msg('兑奖成功!')
				this.modalCancel()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-top: 210px;
	}
	// 搜索框
	.input-wrap {
		position: fixed;
		top: 80px;
		left: 0;
		width: calc(100% - 50px);
		background-color: #fff;
		padding: 22px 20px 22px 30px;
		border-top: 1px solid $borderColor;
	}
	// list
	.list-wrap {
		width: 100%;
		color: $fontColor3;
		background-color: #fff;
		.list {
			@include disFlex(center, space-between);
			width: calc(100% - 60px);
			padding: 30px 0;
			margin: 0 30px;
			border-bottom: 1px solid $borderColor;
			.list-right {
				width: calc(100% - 130px);
				.list-info {
					@include disFlex(center, space-between);
					margin-top: 10px;
					.list-remark {
						margin-top: 10px;
						.list-remark-prompt {
							margin-left: 20px;
						}
					}
					.admin-button-com {
						width: 80px;
					}
				}
			}
		}
	}
	// module
	.redeem-wrap {
		.redeem-list-wrap {
			.list {
				position: relative;
				@include disFlex(center, flex-start);
				padding: 28px 20px;
				color: $fontColor3;
				box-shadow: 0px 1px 16px 0px rgba(238, 238, 238, 1);
				border-radius: 10px;
				.list-tag {
					position: absolute;
					top: 0;
					right: 0;
					width: 100px;
				}
				.list-right {
					margin-left: 20px;
					& > div:first-child {
						margin-top: 0;
					}
					& > div {
						margin-top: 14px;
					}
				}
			}
		}
		.redeem-total {
			margin: 30px 0 50px;
			text-align: center;
			font-size: 40px;
		}
		.redeem-btn {
			@include disFlex(center, space-between);
			width: 100%;
			.admin-button-com {
				width: 40%;
			}
		}
	}
</style>
