<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}(${item.val})`"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

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

			<template #table-column-userName="{scope}">
				<div class="user-name-warp">
					<i v-if="scope.row.source == 0" class="iconfont iconweixinlaiyuan"></i>
					<i v-if="scope.row.source == 1" class="iconfont iconzhifubao"></i>
					<span>{{ scope.row.userName }}</span>
				</div>
			</template>

			<template #table-column-balance="{scope}">
				<span>{{ scope.row.userAsset.balance }}</span>
			</template>

			<template #table-column-growth="{scope}">
				<span>{{ scope.row.userAsset.growth }}</span>
			</template>

			<!-- 详情 -->
			<template #slot-detail="{scope}">
				<el-button type="text" @click="detailShowFn(scope.row)">详情</el-button>
			</template>
			<!-- 充值 -->
			<template #slot-recharge="{scope}">
				<el-button type="text" @click="rechargeShowFn(scope.row)">充值</el-button>
			</template>
			<!-- 升级 -->
			<template #slot-upgrade="{scope}">
				<el-button type="text" @click="upgradeShowFn(scope.row)">升级</el-button>
			</template>
			<!-- 发货 -->
			<template #slot-ship="{scope}">
				<el-button type="text" @click="$message('开发中...')">发货</el-button>
			</template>
		</cl-crud>
		<!-- 充值 -->
		<el-dialog
			title="充值"
			:visible.sync="rechargeDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="recharge-modal-content">
				<div class="card-name">
					<cardName :data="modalData" />
				</div>
				<div>
					<el-form
						:model="rechargeForm"
						:rules="rechargeRules"
						ref="rechargeForm"
						label-width="80px"
						class="demo-form"
					>
						<el-form-item label="充值金额">
							<el-input
								v-model="rechargeForm.rechargeAmount"
								placeholder="充值金额"
								size="small"
							></el-input>
						</el-form-item>
						<el-form-item label="确认密码">
							<el-input
								v-model="rechargeForm.confirmPassword"
								type="password"
								placeholder="确认密码"
								size="small"
							></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="rechargeAmount">充值</el-button>
			</div>
		</el-dialog>
		<!-- 升级 -->
		<el-dialog
			title="升级"
			:visible.sync="upgradeDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="recharge-modal-content">
				<div class="card-name">
					<cardName :data="modalData" />
				</div>
				<div>
					<el-form
						:model="upgradeForm"
						:rules="upgradeRules"
						ref="upgradeForm"
						label-width="100px"
						class="demo-form"
					>
						<el-form-item label="请选择等级">
							<el-select
								v-model="upgradeForm.member"
								size="small"
								placeholder="请选择"
							>
								<el-option
									v-for="(item, index) in levelData.list"
									:key="index"
									:label="`${item.level}`"
									:value="item.level"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="确认密码">
							<el-input
								v-model="upgradeForm.confirmPassword"
								placeholder="确认密码"
								type="password"
								size="small"
							></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="upgradeAmount">充值</el-button>
			</div>
		</el-dialog>
		<!-- 详情 -->
		<detail-draw :show.sync="drapShow" :info="modalData" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import cardName from './components/card-name';
import detailDraw from './components/detail-draw';
export default {
	components: {
		cardName,
		detailDraw
	},
	data() {
		return {
			// cl-crud
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1',
					val: 0
				},
				{
					text: '粉丝',
					key: '1',
					val: 0
				},
				{
					text: '会员',
					key: '2',
					val: 0
				}
			],
			// modal
			modalData: {},
			// recharge
			rechargeDialog: false,
			rechargeForm: {
				rechargeAmount: '',
				confirmPassword: ''
			},
			rechargeRules: {},
			// upgrade
			upgradeDialog: false,
			upgradeForm: {
				member: '',
				confirmPassword: ''
			},
			upgradeRules: {},
			// draw
			drapShow: false
		};
	},
	computed: {
		...mapGetters({ levelData: 'level' })
	},
	created() {
		// this.$store.dispatch('getLevel');
	},
	mounted() {},
	methods: {
		handleClick(tab, e) {
			console.log(tab, e);
			this.app.refresh({ type: this.tabIndex });
		},
		// 充值
		rechargeAmount() {
			this.$service.member
				.recharge({
					userId: this.modalData.id,
					...this.rechargeForm
				})
				.then(res => {
					console.log(res);
					this.$message.success('充值成功！');
					this.resetForm();
				});
		},
		// 升级
		upgradeAmount() {
			this.$service.member
				.upgrade({
					userId: this.modalData.id,
					...this.upgradeForm
				})
				.then(res => {
					this.$message.success('升级成功！');
					console.log(res);
					this.resetForm();
				});
		},
		// modal
		// 详情
		detailShowFn(item) {
			this.modalData = item;
			this.drapShow = true;
		},
		rechargeShowFn(item) {
			this.modalData = item;
			this.rechargeDialog = true;
		},
		upgradeShowFn(item) {
			this.modalData = item;
			this.upgradeDialog = true;
		},
		resetForm() {
			try {
				this.$refs['rechargeForm'].resetFields();
			} catch (e) {}
			try {
				this.$refs['upgradeForm'].resetFields();
			} catch (e) {}

			this.rechargeDialog = false;
			this.upgradeDialog = false;
		},
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.member)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'avatarUrl',
							label: '头像',
							align: 'center'
						},
						{
							prop: 'userName',
							label: '来源 昵称',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '会员级别',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'balance',
							label: '余额',
							align: 'center'
						},
						{
							prop: 'growth',
							label: '成长值',
							align: 'center'
						},
						{
							prop: 'subscribe',
							label: '关注公众号',
							align: 'center',
							sortable: true,
							width: 150
						},
						{
							prop: 'visitTimeFormat',
							label: '最近访问',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 180,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-detail', 'slot-recharge', 'slot-upgrade', 'slot-ship']
					}
				})
				.set('upsert', {
					props: {
						width: '600px',
						'label-width': '120px'
					},

					items: [
						{
							prop: 'mobile',
							label: '手机号码',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写手机号码'
								}
							},
							rules: {
								required: true,
								message: '请填写手机号码'
							}
						},
						{
							prop: 'confirmMobile',
							label: '确认手机号码',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写确认手机号码'
								}
							},
							rules: {
								required: true,
								message: '请填写确认手机号码'
							}
						},
						{
							prop: 'balance',
							label: '余额',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写余额'
								}
							},
							rules: {
								required: true,
								message: '请填写余额'
							}
						},
						{
							prop: 'memberLevel',
							label: '会员级别',
							span: 24,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								options: this.$util.isEmpty(this.levelData)
									? []
									: this.levelData.list.map(e => {
											e.label = e.level;
											e.value = e.level;
											return e;
									  })
							},
							rules: {
								required: true,
								message: '级别不能为空'
							}
						},
						{
							prop: 'realName',
							label: '姓名',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '选填'
								}
							}
						},
						{
							prop: 'confirmPassword',
							label: '确认密码',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写确认密码'
								},
								props: {
									placeholder: '请填写确认密码',
									type: 'password'
								}
							},
							rules: [
								{
									required: true,
									message: '密码不能为空'
								},
								{
									min: 6,
									max: 16,
									message: '密码长度在 6 到 16 个字符'
								}
							]
						},
						{
							prop: 'tips',
							component: (
								<div>
									<i class="el-icon-warning"></i>
									<span style="margin-left: 6px">
										添加后，申请会员时自动根据手机号识别客户，成长值、等级和余额会自动同步。
									</span>
								</div>
							)
						}
					]
				})
				.set('layout', [
					['slot-tabs'],
					['search-key', 'flex1', 'refresh-btn', 'add-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					// 继续执行刷新
					let { asset } = await next(params);
					if (this.$util.isEmpty(asset)) return false;
					this.tabsData[0].val = asset.totalUser;
					this.tabsData[1].val = asset.totalMember;
					this.tabsData[2].val = asset.totalFans;
				})
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
.user-name-warp {
	display: flex;
	align-items: center;
	span {
		margin-left: 6px;
	}
}
.recharge-modal-content {
	@include disFlex(center, space-around);
	.card-name {
		width: 200px;
		height: 100%;
		border-right: 1px solid $borderColor;
	}
}
</style>
