<template>
	<view>
		<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" @click="pageTo(`/pages/cust/myrecord?id=${item.id}&str=${item.name}(${item.sex === 'male' ? '男' : '女'})-${item.phone}`)">
						<view class="relname">
							<View class="n-key">
								<view class="n" v-if="item.remind">{{item.remind}}</view>
								[{{item.nickname}}]
								{{ item.name }}
								<u-icon
									class="u-m-l-5"
									:name="item.sex == 'male' ? 'man' : 'woman'"
									size="22"
									:color="item.sex == 'male' ? '#2080f0' : '#f85f69'"
								></u-icon>
							</View>
							
							
							
							<u-icon
								name="list-dot"
								size="32"
								label="跟进记录"
								label-size="28"
								class="u-m-l-30"
								color="#2d8cf0"
								label-color="#2d8cf0"
							></u-icon>
						</view>

						<view class="item">
							<u-icon class="u-m-r-5" name="phone" size="22"></u-icon>
							{{ item.phone }}
							<view class="s" v-if="item.realname">
								[{{ item.realname }}]
							</view>
						</view>
						<view class="item" v-if="item.remark">
							{{ item.remark }}
						</view>
						
					</view>
					
					
					<view class="data-wrap">
						<u-tag
							icon="attach"
							:text="'快速报备'"
							:type="'success'"
							class="u-m-r-10"
							@click="pageTo('/pages/agent/recommend/create', { info: item })"
						>
						</u-tag>
						<u-gap height="20"></u-gap>
						<u-tag
							icon="edit-pen"
							:text="'编辑'"
							:type="'primary'"
							class="u-m-r-10"
							@click="pageTo('/pages/cust/mycreate', { info: item })"
						>
						</u-tag>
						<!-- <u-icon
							name="attach"
							size="32"
							label="快速报备"
							label-size="28"
							class="u-m-r-10 u-m-t-30"
							color="#19be6b"
							label-color="#19be6b"
							@click="pageTo('/pages/agent/recommend/create', { info: item })"
						></u-icon> -->
						<!-- <view class="u-m-t-20">							
							<u-tag
								@click="delHandle(item)"
								plain 
								:text="'删除'"
								:type="'error'"
								class="u-m-r-10"
							>
							</u-tag>
						</view> -->
					</view>
					
				</view>
				
				<view class="more-wrap" v-if="item.record && item.record.record_remark" @click="pageTo(`/pages/cust/myrecord?id=${item.id}&str=${item.name}(${item.sex === 'male' ? '男' : '女'})-${item.phone}`)">
					最新跟进({{item.record.create_at}})：{{ item.record.action ? item.record.action + ':' : '' }}{{ item.record.estate_name ? `[${item.record.estate_name}]--` : '' }}  {{ item.record.record_remark }}
				</view>
			</view>
		</view>

		<view class="float-search2" @click="pageTo('/pages/cust/mycreate')"><u-icon name="plus" size="42" color="#fff"></u-icon></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.name" 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-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>
var that;
export default {
	data() {
		return {
			searchKeyword: null,
			searchPopupShow: false,
			searchFormData: {
				name: '',
				phone: ''
			}, // 搜索栏数据
			customerList: [],
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currnetPage: 1
			}
		};
	},
	onLoad(params) {
		that = this;

		// 默认筛选项
		if (params.filterStepStatus !== undefined) {
			that.filterStepStatus = parseInt(params.filterStepStatus);
			this.filterDropdownValue = [[],[],[],[that.filterStepStatus],[]]
		}

		this.getDataList()
	},
	onShow () {
		// this.getDataList()
	},
	onReachBottom() {
		if (that.loadmore.status == 'nomore') return;
		that.loadmore.currnetPage++
		this.getDataList()
	},
	onPullDownRefresh() {
		// 防止频繁刷新
	},
	methods: {
		delHandle (item) {
			uni.$msgConfirm('确定删除吗？', () => {				
				uni.api.cust.apiprivatecustomerdel({
					id: item.id
				}).then(res => {
					uni.$msg('删除成功~')
					this.loadmore.currnetPage = 1
					this.getDataList()
				})
			})
		},
		getDataList (bc) {
			const that = this
			let params = {
				...this.searchFormData
			}
			uni.api.cust.apiprivatecustomerlist({
				page: that.loadmore.currnetPage,
				...params,
			}).then(res => {
				const list = res.list || []
				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() {
			that.loadmore.currnetPage = 1
			this.getDataList(() => {
				this.searchPopupShow = false
			})
		},
	}
};
</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;
				width: 80%;
				.relname {
					color: $u-main-color;
					font-size: $u-p;
					font-weight: bold;
					margin-bottom: 10rpx;
					.s {
						display: inline-block;
					}
				}
				.n-key {
					display: inline-block;
					.n {
						background: #f00;
						color: #fff;
						width: 40rpx;
						height: 40rpx;
						line-height: 38rpx;
						text-align: center;
						border-radius: 50%;
						display: inline-block;
						margin-right: 10rpx;
					}
				}

				.item {
					margin-bottom: 10rpx;
					.s {
						display: inline-block;
					}
				}
			}

			.data-wrap {
				text-align: right;
				.date {
					font-size: $u-sub;
				}
			}
		}
		
		.more-wrap {
			background: #fdf6ec;
			color: #666;
			padding: 10rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
		}

		.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;
}
.float-search2 {
	opacity: 0.9;
	position: fixed;
	right: 20rpx;
	bottom: 150rpx;
	padding: 20rpx;
	border-radius: 50%;
	background-color: $u-theme-color;
}
</style>