<template>
	<view>
		<wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>

		<view class="customer-list-wrap">
			<view v-if="customerList.length == 0" class="empty-wrap"><u-empty mode="list" text="暂无相关客户"></u-empty></view>
			<view v-for="(item, index) in customerList" class="customer-item" :key="index">
				<view class="info">
					<view class="customer">
						<view class="relname" v-if="item.group_type == 1">
							渠道:{{ item.nickname }}{{item.dept_code ? `(${item.dept_code})` : ''}}
						</view>
						<view class="relname" v-else>
							中介:{{ item.nickname }}
						</view>

						<view class="item"  @click="dial(item.phone)">
							<u-icon class="u-m-r-5" name="phone" size="22"></u-icon>
							{{ item.phone }}
							
							<u-tag
								:text="`认证:${authStateObj[item.auth_state]}`"
								:type="item.auth_state == 1 ? 'success' : item.auth_state == 2 ? 'warning' : 'error'"
								size="mini"
								class="u-m-l-20 u-m-r-10"
							></u-tag>
							<u-tag
								:text="item.bind_wechat == 1 ? '已绑定微信' : '未绑定微信'"
								:type="item.bind_wechat == 1 ? 'success' : 'warning'"
								size="mini"
							></u-tag>
							
						</view>
						<view class="scoped-p1" v-if="item.group_type == 2">
							来自：{{item.dept_name}}
						</view>
						<!-- <view class="item">
							<u-icon class="u-m-r-5" name="rmb" size="22"></u-icon>
							预期最高收益{{ item.commission }}元
						</view> -->
					</view>
					<view class="data-wrap">
						<view class="date u-m-t-5 u-m-b-20" v-if="item.referrer" @click="openReferrerPopup(item)">推荐人:{{item.referrer || '未填'}}</view>
						<!--  -->
						<u-tag
							@click="pageTo(`/pages/saler/deal?id=${item.id}&name=${item.nickname}-${item.phone}&gt=${item.group_type}`)"
							v-if="item.auth_state == 2"
							text="审核"
							type="primary"
						></u-tag>
						<!-- <view class="date">保护期截止：{{item.lock_at}}</view> -->
					</view>
				</view>
				<view class="scoped-list-img-more">
					<view :class="item.auth_state == 2 ? 'slim-tips' : 'slim-tips pl0'" class="" @click="itemImgShowHandle(index)">
						<view class="li">身份证：{{item.id_number}}</view>
						<!-- <view class="li">银行卡：{{item.bank_number}}</view> -->
						<view class="b" v-if="item.auth_state == 2">{{item.isImgShow ? '收缩图片<' : '展开图片>'}}</view>
					</view>
					<view class="slim-content" v-if="item.isImgShow && item.auth_state == 2">
						<view class="op">
							<image class="img" :src="item.id_card_front" mode="aspectFit" @click="previewImgHandle(item.id_card_front, [item.id_card_front])"></image>
						</view>
						<view class="op">
							<image class="img" :src="item.id_card_revers" mode="aspectFit" @click="previewImgHandle(item.id_card_revers, [item.id_card_revers])"></image>
						</view>
						<!-- <view class="op">
							<image class="img" :src="item.bank_card" mode="aspectFit" @click="previewImgHandle(item.bank_card, [item.bank_card])"></image>
						</view> -->
						<view class="op" v-if="item.busines_licens">
							<image class="img" :src="item.busines_licens" mode="aspectFit" @click="previewImgHandle(item.busines_licens, [item.busines_licens])"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="float-search" @click="searchPopupShow = true"><u-icon name="search" size="42" color="#fff"></u-icon></view>

		<!-- 平台佣金政策弹窗 -->
		<u-popup v-model="searchPopupShow" mode="center" width="80%" height="440rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">用户搜索</view>
				<view class="popup-body">
					<u-input v-model="searchFormData.nickname" border placeholder="请输入昵称(支持模糊搜索)"></u-input>
					<u-divider marginTop="10" marginBottom="10">或</u-divider>
					<u-input v-model="searchFormData.phone" border placeholder="请输入手机号(可仅输入一部分)"></u-input>
				</view>
				<view class="popup-footer" style="position: absolute;">
					<u-button size="medium" @click="searchPopupShow = false">取消</u-button>
					<u-button size="medium" type="primary" @click="searchHandle()">搜索</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 修改推荐人 -->
		<u-popup v-model="isReferrerShow" mode="center" width="80%" height="320rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">修改{{curObj.nickname}}的推荐人</view>
				<view class="popup-body">
					<u-input v-model="curReferrer" border placeholder="请输入推荐人"></u-input>
				</view>
				<view class="popup-footer" style="position: absolute;">
					<u-button size="medium" @click="isReferrerShow = false">关闭</u-button>
					<u-button size="medium" type="primary" @click="closeReferrerPopup()">确定</u-button>
				</view>
			</view>
		</u-popup>

		<u-loadmore
			v-if="customerList.length > 0"
			marginTop="32"
			:line="true"
			:status="loadmore.status"
			:loading-text="loadmore.loadingText"
			:loadmore-text="loadmore.defaultText"
			:nomore-text="loadmore.nomoreText"
		/>
	</view>
</template>
<script>
import { arrToObj } from '@/utils'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
export default {
	components: {
		wmWatermark
	},
	data() {
		return {
			isReferrerShow: false,
			curReferrer: '',
			curObj: {},
			searchKeyword: null,
			searchPopupShow: false,
			searchFormData: {
				name: '',
				phone: ''
			}, // 搜索栏数据
			orderMethod: 0,
			filterDropdownValue: {}, // 默认筛选
			customerList: [], // 客户列表
			stepList: ['审核中', '未到访', '已到访', '已认购', '已签约', '已结佣'],
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currnetPage: 1
			},
			curRoles: '',
			userInfo2: {},
			authStateObj: {},
			groupTypeObj: {},
		};
	},
	onLoad(params) {

		this.getDataList()
		
		this.userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.curRoles = uni.getStorageSync('MD_userInfo2') ? uni.getStorageSync('MD_userInfo2').roles : ''
		
		const dictObj = uni.getStorageSync('MD_dict')
		this.authStateObj = arrToObj(dictObj.auth_state)
		this.groupTypeObj = arrToObj(dictObj.group_type)
	},
	onReachBottom() {
		if (this.loadmore.status == 'nomore') return;
		this.loadmore.currnetPage++
		this.getDataList()
	},
	onPullDownRefresh() {
		// 防止频繁刷新
	},
	methods: {
		openReferrerPopup (item) {
			this.curReferrer = item.referrer
			this.curObj = item || {}
			this.isReferrerShow = true
		},
		closeReferrerPopup () {
			uni.api.base.apiuserreferreredit({
				id: this.curObj.id,
				referrer: this.curReferrer
			}).then(res => {
				uni.$msg('修改成功')
				this.isReferrerShow = false
				this.getDataList()
			})
		},
		dial(tel) {
			uni.makePhoneCall({
				phoneNumber: tel
			});
		},
		previewImgHandle (current, urls){
			uni.previewImage({
				current,
				urls
			})
		},
		itemImgShowHandle (index) {
			let list = this.customerList || []
			list[index].isImgShow = !list[index].isImgShow
			this.customerList = JSON.parse(JSON.stringify(list))
		},
		copyTextHandle (item) {
			uniCopy({
				content: `${item.name}-${item.sex == 'male'?'男':'女'}-${item.phone}`,
				success:(res)=>{
					uni.showToast({
						title: res,
						icon: 'none'
					})
				},
				error:(e)=>{
					uni.showToast({
						title: e,
						icon: 'none',
						duration:3000,
					})
				}
			})
		},
		getDataList (bc) {
			const that = this
			let params = {
				// auth_state: 2,
				...this.searchFormData
			}
			
			if (that.orderMethod > 0) {
				if (that.orderMethod === 1) {
					params.order_by = JSON.stringify([{
						field: 'create_at',
						sort: 'desc',
					}])
				}
				if (that.orderMethod === 2) {
					params.order_by = JSON.stringify([{
						field: 'create_at',
						sort: 'asc',
					}])
				}
			}
			uni.api.base.apiuserauthlist({
				page: that.loadmore.currnetPage,
				...params,
			}).then(res => {
				let list = res.list || []
				list.map(item => {
					item.isImgShow = false
				})
				if (list.length < 10) {
					that.loadmore.status = 'nomore';
				}
				if (res.current_page === 1) {
					if (list.length === 0) {
						uni.$msg('暂无待审核人员', 'none');
					}
					that.customerList = [...list]
				} else {
					that.customerList = that.customerList.concat(list)
				}
				if (bc) bc()
			})
		},
		customBack() {
			uni.navigateBack();
		},
		// 带监听器跳转
		pageTo(url, data) {
			/// xxxxx
			uni.navigateTo({
				url: url,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					update: function(data) {
						// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
					}
				},
				success: function(res) {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('data', data);
				}
			});
		},
		searchHandle() {
			this.loadmore.currnetPage = 1
			this.getDataList(() => {
				this.searchPopupShow = false
			})
		},
		getTime(n) {
			let date = n ? new Date(n) : new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month > 9 ? month : '0' + month
			let day = date.getDate()
			day = day > 9 ? day : '0' + day
			let hour = date.getHours()
			hour = hour > 9 ? hour : '0' + hour
			let minute = date.getMinutes()
			minute = minute > 9 ? minute : '0' + minute
			let second = date.getSeconds()
			second = second > 9 ? second : '0' + second
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
	}
};
</script>
<style lang="scss">
.search-wrap {
	padding: 20rpx;
}

.filter-wrap {
	position: relative;
}

// 列表
.customer-list-wrap {
	width: 100%;

	.customer-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: $u-p2;
		color: $u-content-color;
		border-bottom: 1rpx solid $u-border-color;
		padding: 24rpx 32rpx;

		.info {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 10rpx;

			.customer {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.relname {
					color: $u-main-color;
					font-size: $u-p;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.item {
					margin-bottom: 10rpx;
				}
			}

			.data-wrap {
				text-align: right;
				.date {
					font-size: $u-p;
				}
			}
		}

		.tool-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
	}
}

.float-search {
	opacity: 0.9;
	position: fixed;
	right: 20rpx;
	bottom: 40rpx;
	padding: 20rpx;
	border-radius: 50%;
	background-color: $u-theme-color;
}

.scoped-list-more-info {
	position: absolute;
	right: 20rpx;
}

.scoped-p1 {
	font-size: 28rpx;
	color: #333;
}

.scoped-list-img-more {
	.slim-tips {
		padding-left: 120rpx;
		position: relative;
		padding-bottom: 10rpx;
		&.pl0 {
			padding-left: 0;
		}
		.b {
			position: absolute;
			left: 0;
			top: 0;
			color: #2080f0;
		}
	}
	.op {
		display: inline-block;
		vertical-align: middle;
		height: 150rpx;
		width: 150rpx;
		margin-right: 10rpx;
		&:last-child {
			margin-right: 0;
		}
		.img {
			height: 150rpx;
			width: 150rpx;
		}
	}
}
</style>