<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

			<template #table-column-avatarUrl="{scope}">
				<div class="flex-center">
					<cl-avatar
						shape="square"
						:size="40"
						:src="scope.row.userAvatar | default_avatar"
						:style="{ margin: 'auto' }"
					></cl-avatar>
					<div>{{ scope.row.userName }}</div>
				</div>
			</template>

			<template #table-column-addTime="{scope}">
				<div>{{ scope.row.addTime | formatTime }}</div>
			</template>

			<template #table-column-status="{scope}">
				<div>{{ scope.row.status | constantfilter('INVITE_STATUS') }}</div>
			</template>

			<template #table-column-orderTime="{scope}">
				<div v-if="scope.row.status == 1">{{ item.orderTime | formatTime }}</div>
				<div v-else-if="scope.row.status == 1">{{ item.giveTime | formatTime }}</div>
				<div v-else>-</div>
			</template>

			<!-- 兑奖 -->
			<template #slot-column-redeem="{scope}">
				<el-button v-if="scope.row.status == 1" type="text" @click="redeemFn(scope.row)"
					>兑奖</el-button
				>
				<div v-else>-</div>
			</template>
		</cl-crud>
		<!-- 添加商品 -->
		<el-dialog title="兑奖" :visible.sync="redeemVisible" width="40%">
			<template>
				<div class="redeem-wrap">
					<div class="redeem-list-wrap">
						<!-- 新用户 -->
						<div class="list">
							<div class="list-tag">
								<img src="../../assets/images/interest/new-member.png" alt />
							</div>
							<div class="list-left">
								<cl-avatar
									shape="square"
									:size="80"
									:src="redeemData.introUserAvatar | default_avatar"
									:style="{ margin: 'auto' }"
								></cl-avatar>
							</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="../../assets/images/interest/introducer.png" alt />
							</div>
							<div class="list-left">
								<cl-avatar
									shape="square"
									:size="80"
									:src="redeemData.introUserAvatar | default_avatar"
									:style="{ margin: 'auto' }"
								></cl-avatar>
							</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>
			</template>
			<div slot="footer" class="dialog-footer">
				<el-button @click="redeemVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmRedeemFn">确认发奖</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1'
				},
				{
					text: '待下单',
					key: '0'
				},
				{
					text: '待兑奖',
					key: '1'
				},
				{
					text: '已兑奖',
					key: '2'
				}
			],
			// 兑奖弹窗
			redeemVisible: false,
			redeemData: {}
		};
	},
	methods: {
		handleClick(tab, e) {
			this.app.refresh({ status: this.tabIndex });
		},
		redeemFn(item) {
			this.redeemData = item;
			this.redeemVisible = true;
		},
		confirmRedeemFn() {
			this.$service.invite.give({ id: this.redeemData.is }).then(res => {
				this.$message.success('兑奖成功！');
				this.redeemVisible = true;
				this.app.refresh({ type: this.tabIndex });
			});
		},
		// cl-crud 组件
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.invite)
				.set('table', {
					columns: [
						{
							prop: 'introUserName',
							label: '邀请人',
							align: 'center',
							'min-width': 100
						},
						{
							prop: 'mobile',
							label: '邀请人手机',
							align: 'center'
						},
						{
							prop: 'addTime',
							label: '邀请时间',
							align: 'center'
						},
						{
							prop: 'userName',
							label: '新客户',
							align: 'center'
						},
						{
							prop: 'orderTime',
							label: '下单时间',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 100,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-column-redeem']
					}
				})
				.set('layout', [
					['slot-tabs'],
					['search-key', 'flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh({ status: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
// 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>
