<template>
	<view class="user_list">
		<view class="search flexB">
			<view class="inp flexB">
				<text class="iconfont iconsearch"></text>
				<input type="text" v-model="searchName" placeholder="客户手机号" maxlength="11" @input="getVal" />
				<text class="iconfont iconguanbi1" @click="(searchName = ''), getList()"></text>
			</view>
			<view class="search_btn" @click="search">查询</view>
		</view>
		<view class="hint" v-if="isShare == 1">提示：不选择用户，下单分享时将无法选择地址</view>
		<view class="scroll">
			<!-- <scroll-view scroll-y="true" @scrolltolower="getMore"> -->
			<scroll-view scroll-y="true">
				<view class="list">
					<view class="list_con flexB" v-for="(item,index) in userList" :key="index" @click="checked(item)">
						<view>
							<view>
								<text style="font-size:32rpx;font-weight: 600;">{{ item.nickname|getName(18)}}</text>
								<image src="../../static/imgs/shop/vip.png" class="vip_icon" v-if="item.is_vip == 1">
								</image>
							</view>
							<view style="font-size:28rpx;margin-top:10rpx;">{{ item.phone }}</view>
						</view>
						<view class="base_btn" style="width: 160rpx;height:64rpx">代下单</view>
					</view>
				</view>
				<view class="noData" v-if="userList.length == 0">
					<image src="/static/imgs/default/no_record.png"></image>
					<view>暂无用户信息~</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn_box flexA" v-if="isShare == 1">
			<view class="after_btn" @click="curChecked(1)">跳过</view>
			<view @click="curChecked(0)" class="base_btn">确定</view>
		</view>
		<view class="add_new flexC" @click="skipAdd">+新增客户</view>
	</view>
</template>

<script>
	import {
		getStoreUser,
		addUser
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				userList: [], //下级经销商列表
				searchName: '', //查找内容
				curId: '', //当前选择的用户id
				user: '', //用户的相关信息
				isShare: ''
			};
		},
		onLoad(ops) {
			this.isShare = ops.isShare;
		},
		onShow() {
			this.getList();
		},
		methods: {
			//跳转到添加用户
			skipAdd() {
				uni.navigateTo({
					url: '../../pagesA/pages/add-user/add-user'
				});
			},
			/*输入框清空时重新加载列表*/
			getVal(e) {
				if (e.detail.value == '') {
					this.getList();
				}
			},
			/*选择某个用户*/
			checked(item) {
				uni.navigateTo({
					url: '../replace-manage/replace-manage?user_id=' + item.id
				});
			},
			/*获取用户列表*/
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				getStoreUser({
					search_name: this.searchName
				}).then(res => {
					if (res.code == 200) {
						this.userList = res.data;
						console.log(this.userList, 'userList')
					} else if (res.code == 451101) {
						uni.showModal({
							content: '该店铺不能进行代下单',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						});
					}
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			/*点击查询按钮*/
			search() {
				if (!this.searchName) {
					uni.showModal({
						content: '请输入搜索内容',
						showCancel: false
					});
					return false;
				}
				this.getList();
			},
			/*确定按钮*/
			curChecked(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '../replace-manage/replace-manage?isShare=' + this.isShare + '&user_id=' + ''
					});
					return false;
				}
				if (!this.curId) {
					uni.showModal({
						content: '请先选择用户',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../replace-manage/replace-manage?user_id=' + this.curId + '&isShare=' + this.isShare
				});
			}
		}
	};
</script>
<style lang="scss">
	.user_list {
		width: 100vw;
		min-height: 100%;
		background-color: #f9f9fb;
		position: relative;

		.search {
			width: 100%;
			height: 10vh;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.inp {
				height: 80rpx;
				border: 2rpx solid #cccccc;
				border-radius: 44rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					width: 80%;
					height: 100%;
				}

				.iconfont {
					font-size: 50rpx;
					color: #ccc;
				}
			}

			.query {
				margin-right: 30rpx;
				width: 120rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				background: linear-gradient(94deg, #a080ff 0%, #5d6bff 100%);
				font-size: 28rpx;
				color: #fff;
				border-radius: 44rpx;
			}
		}

		.scroll {
			height: 84vh;

			scroll-view {
				height: 100%;
			}

			.list {
				margin-top: 30rpx;
				padding-bottom: 120rpx;

				.list_con {
					width: 690rpx;
					height: 128rpx;
					margin: 0 auto 30rpx;
					background-color: #fff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 25rpx;

					image {
						height: 36rpx;
						width: 36rpx;
					}

					.vip_icon {
						width: 88rpx;
						height: 36rpx;
						margin-left: 15rpx;
					}

					.iconfont {
						font-size: 45rpx;
					}
				}
			}
		}

		.btn_box {
			width: 80%;
			margin: 0 auto;

			view {
				width: 260rpx;
				height: 78rpx;
				line-height: 78rpx;
				font-size: 32rpx;
				border-radius: 44rpx;
			}

			.after_btn {
				border: 2rpx solid $base-color;
			}
		}

		.hint {
			width: 100%;
			text-align: center;
			padding: 20rpx 0 0;
			color: $base-color;
			font-size: 30rpx;
		}
	}

	.add_new {
		width: 100%;
		height: 100rpx;
		background: $base-line-bg;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 30rpx;
	}
</style>
