<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt listbox">
			<Form ref="userFrom" :model="userFrom" :label-width="labelWidth" :label-position="labelPosition"
				@submit.native.prevent>
				<Row :gutter="16">
					<Col span="18">
					<Col span="24">
					<Col v-bind="grid">
					<FormItem label="用户搜索：" label-for="nickname">
						<Input v-model="userFrom.nickname" placeholder="请输入用户" element-id="nickname" clearable>
						<Select v-model="field_key" slot="prepend" style="width: 80px">
							<Option value="all">全部</Option>
							<Option value="uid">UID</Option>
							<Option value="phone">手机号</Option>
							<Option value="nickname">用户昵称</Option>
						</Select>
						</Input>
					</FormItem>
					</Col>
					</Col>
					</Col>
					<Col span="6" class="ivu-text-right userFrom">
					<FormItem>
						<Button type="primary" icon="ios-search" label="default" class="mr15"
							@click="userSearchs">搜索</Button>
						<Button class="ResetSearch" @click="reset('userFrom')">重置</Button>
					</FormItem>
					</Col>
				</Row>
			</Form>
			<Divider dashed />
			<Row type="flex" justify="space-between" class="mt20">
				<Col span="24" class="userAlert" v-if="selectionList.length">
				<Alert show-icon>
					已选择<i class="userI"> {{ selectionList.length }} </i>项</Alert>
				</Col>
			</Row>
			<Table :columns="columns" :data="userLists" class="mt25" ref="table" highlight-row :loading="loading"
				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果" @on-sort-change="sortChanged"
				@on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll"
				@on-select-all-cancel="handleSelectAll">
				<template slot-scope="{ row, index }" slot="avatars">
					<div class="tabBox_img" v-viewer>
						<img v-lazy="row.avatar" />
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="nickname">
					<div class="acea-row">
						<Icon type="md-male" v-show="row.sex === '男'" color="#2db7f5" size="15" class="mr5" />
						<Icon type="md-female" v-show="row.sex === '女'" color="#ed4014" size="15" class="mr5" />
						<div v-text="row.nickname"></div>
					</div>
					<div v-if="row.is_del == 1" style="color: red">用户已注销</div>
					<!-- <div v-show="row.vip_name" class="vipName">{{row.vip_name}}</div> -->
				</template>
				<template slot-scope="{ row, index }" slot="isMember">
					<div>{{ row.isMember ? '是' : '否' }}</div>
				</template>
				<template slot-scope="{ row, index }" slot="action">
						<a @click="edit(row)">编辑</a>
						<Divider type="vertical" />
						<Dropdown @on-click="changeMenu(row, $event, index)" :transfer="true">
							<a href="javascript:void(0)">
								更多
								<Icon type="ios-arrow-down"></Icon>
							</a>
							<DropdownMenu slot="list">
								<DropdownItem name="1">账户详情</DropdownItem>
								<DropdownItem name="2">积分余额</DropdownItem>
							</DropdownMenu>
						</Dropdown>
				</template>
			</Table>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		userList,
		getUserSaveForm,
		getUserInfo,
		editUser,
	} from '@/api/user';
	import {
		agentSpreadApi
	} from '@/api/agent';
	import {
		exportUserList
	} from '@/api/export';
	export default {
		name: 'user_list',
		data() {
			return {
				dataLabel: [],
				selectDataLabel: [],
				grid: {
					xl: 8,
					lg: 8,
					md: 12,
					sm: 24,
					xs: 24,
				},
				loading: false,
				total: 0,
				userFrom: {
					label_id: '',
					user_type: '',
					status: '',
					sex: '',
					is_promoter: '',
					country: '',
					isMember: '',
					pay_count: '',
					user_time_type: '',
					user_time: '',
					nickname: '',
					province: '',
					city: '',
					page: 1,
					limit: 15,
					level: '',
					group_id: '',
					field_key: '',
				},
				field_key: '',
				level: '',
				group_id: '',
				label_id: '',
				user_time_type: '',
				pay_count: '',
				columns: [{
						type: 'selection',
						width: 60,
						align: 'center',
					},
					{
						title: 'ID',
						key: 'uid',
						width: 80,
					},
					{
						title: '头像',
						slot: 'avatars',
						minWidth: 60,
					},
					{
						title: '姓名',
						slot: 'nickname',
						minWidth: 150,
					},
					{
						title: '付费会员',
						slot: 'isMember',
						minWidth: 90,
					},
					{
						title: '用户等级',
						key: 'level',
						minWidth: 90,
					},
					{
						title: '分组',
						key: 'group_id',
						minWidth: 100,
					},
					{
						title: '手机号',
						key: 'phone',
						minWidth: 100,
					},
					{
						title: '用户类型',
						key: 'user_type',
						minWidth: 100,
					},
					{
						title: '余额',
						key: 'now_money',
						sortable: 'custom',
						minWidth: 100,
					},
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 120,
					},
				],
				userLists: [],
				FromData: null,
				selectionList: [],
				selectedIds: new Set(), //选中合并项的id
				ids: [],
			};
		},
		computed: {
			...mapState('media', ['isMobile']),
			labelWidth() {
				return this.isMobile ? undefined : 100;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			},
		},
		created() {
			this.getList();
		},
		methods: {
			// 操作
			changeMenu(row, name, index) {
				let uid = [];
				uid.push(row.uid);
				let uids = {
					uids: uid
				};
				switch (name) {
					case '1':
						break;
					case '2':
						this.getOtherFrom(row.uid);
						break;
					case '3':
						break;
					case '4':
						this.del(row, '清除 【 ' + row.nickname + ' 】的会员等级', index, 'user');
						break;
					case '5':
						break;
					case '6':
						break;
					case '7':
						this.editS(row);
						break;
					default:
						this.del(row, '解除【 ' + row.nickname + ' 】的上级推广人', index, 'tuiguang');
				}
			},
			// 删除
			del(row, tit, num, name) {
				let delfromData = {
					title: tit,
					num: num,
					url: name === 'user' ? `user/del_level/${row.uid}` : `agent/stair/delete_spread/${row.uid}`,
					method: name === 'user' ? 'DELETE' : 'PUT',
					ids: '',
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 清除会员删除成功
			submitModel() {
				this.getList();
			},
			// 会员列表
			getList() {
				if (this.selectDataLabel.length) {
					let activeIds = [];
					this.selectDataLabel.forEach((item) => {
						activeIds.push(item.id);
					});
					this.userFrom.label_id = activeIds.join(',');
				}
				this.userFrom.user_type = this.userFrom.user_type || '';
				this.userFrom.status = this.userFrom.status || '';
				this.userFrom.sex = this.userFrom.sex || '';
				this.userFrom.is_promoter = this.userFrom.is_promoter || '';
				this.userFrom.country = this.userFrom.country || '';
				this.userFrom.pay_count = this.pay_count === 'all' ? '' : this.pay_count;
				this.userFrom.user_time_type = this.user_time_type === 'all' ? '' : this.user_time_type;
				this.userFrom.field_key = this.field_key === 'all' ? '' : this.field_key;
				this.userFrom.level = this.level === 'all' ? '' : this.level;
				this.userFrom.group_id = this.group_id === 'all' ? '' : this.group_id;
				this.loading = true;
				userList(this.userFrom)
					.then(async (res) => {
						let data = res.data;
						this.userLists = data.list;
						this.total = data.count;
						this.loading = false;
						this.$nextTick(() => {
							this.setChecked();
						});
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.selectionList = [];
				this.userFrom.page = index;
				this.getList();
			},
			// 搜索
			userSearchs() {
				this.userFrom.page = 1;
				this.getList();
			},
			// 重置
			reset(name) {
				this.userFrom = {
					user_type: this.userFrom.user_type,
					status: '',
					sex: '',
					is_promoter: '',
					country: '',
					pay_count: '',
					user_time_type: '',
					user_time: '',
					nickname: '',
					field_key: '',
					level: '',
					group_id: '',
					label_id: '',
					page: 1, // 当前页
					limit: 20, // 每页显示条数
				};
				this.field_key = '';
				this.level = '';
				this.group_id = '';
				this.dataLabel = [];
				this.selectDataLabel = [];
				this.user_time_type = '';
				this.pay_count = '';
				this.selectedIds = new Set();
				this.getList();
			},
			// 编辑
			edit(row) {
				this.getUserFrom(row.uid);
			},
			// 修改成功
			submitFail() {
				// this.getList();
			},
			// 排序
			sortChanged(e) {
				this.userFrom[e.key] = e.order;
				this.getList();
			},
			//全选和取消全选时触发
			handleSelectAll(selection) {
				if (selection.length === 0) {
					//获取table的数据；
					let data = this.$refs.table.data;
					data.forEach((item) => {
						if (this.selectedIds.has(item.uid)) {
							this.selectedIds.delete(item.uid);
						}
					});
				} else {
					selection.forEach((item) => {
						this.selectedIds.add(item.uid);
					});
				}
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			//  选中某一行
			handleSelectRow(selection, row) {
				this.selectedIds.add(row.uid);
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			//  取消某一行
			handleCancelRow(selection, row) {
				this.selectedIds.delete(row.uid);
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			setChecked() {
				//将new Set()转化为数组
				this.ids = [...this.selectedIds];
				// 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
				let objData = this.$refs.table.objData;
				for (let index in objData) {
					if (this.selectedIds.has(objData[index].uid)) {
						objData[index]._isChecked = true;
					}
				}
			},
		},
	};
</script>

<style scoped lang="stylus">
	.picBox {
		display: inline-block;
		cursor: pointer;

		.upLoad {
			width: 58px;
			height: 58px;
			line-height: 58px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background: rgba(0, 0, 0, 0.02);
		}

		.pictrue {
			width: 60px;
			height: 60px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			margin-right: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.userFrom {
		>>>.ivu-form-item-content {
			margin-left: 0px !important;
		}
	}

	.userAlert {
		margin-top: 20px;
	}

	.userI {
		color: #1890FF;
		font-style: normal;
	}

	img {
		height: 36px;
		display: block;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabBox_tit {
		width: 60%;
		font-size: 12px !important;
		margin: 0 2px 0 10px;
		letter-spacing: 1px;
		padding: 5px 0;
		box-sizing: border-box;
	}

	.modelBox {
		>>>.ivu-modal-body {
			padding: 0 16px 16px 16px !important;
		}
	}

	.vipName {
		color: #dab176;
	}

	.listbox {
		>>>.ivu-divider-horizontal {
			margin: 0 !important;
		}
	}

	.labelInput {
		border: 1px solid #dcdee2;
		padding: 0 6px;
		border-radius: 5px;
		min-height: 30px;
		cursor: pointer;

		.span {
			color: #c5c8ce;
		}

		.ivu-icon-ios-arrow-down {
			font-size: 14px;
			color: #808695;
		}
	}

	.demo-drawer-footer {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		background: #fff;
	}
</style>
