<template>
	<uv-sticky>
		<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
			<template v-slot:left>
				<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
			</template>
			<template v-slot:center>
				<text style="color:#ffffff">{{title}}</text>
			</template>
		</uv-navbar>
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search placeholder="搜索联系人姓名" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
				:show-action="false" @change="onSearch"></uv-search>
			<uv-icon name="http://sys.znkjfw.com/imgs/crmimages/screen.png" :size="26" @click="openSearch"></uv-icon>
		</view>
	</uv-sticky>
	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view>
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"
				@scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(item, index) in dataList" :key="index" @click="onItem(item.id)">
							<view class="item">
								<view class="content">
									<view class="title uv-line-2">{{item.name}}<text
											@click.stop="call(item.id,item.mobile?item.mobile:item.telephone)"
											v-if="item.mobile||item.telephone">（<text
												style="color: #2979ff;">{{item.mobile?item.mobile:item.telephone}}</text> ） </text></view>
									<view class="type">{{item.remark ? item.remark : '自动添加'}}</view>
								</view>
							</view>
						</view>
						<uv-load-more :status="listStatus" />
					</block>
					<uv-empty text="暂无数据" v-else margin-top="100" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<view class="floatBtn" @click="addUser">
			<uv-icon class="pb-5" name="plus" size="20" color="#09b4f1"></uv-icon>添加
		</view>

		<uv-popup ref="popup" @change="change" mode="top" bgColor="" :customStyle="customStyle2" :overlay="true">
			<view class="p-2">
				<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form" labelWidth="70">
					<uv-form-item label="手机">
						<uv-input v-model="mobile" placeholder="请输入手机">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="电话">
						<uv-input v-model="phone" placeholder="请输入电话">
						</uv-input>
					</uv-form-item>
					<view class="flex mt-2">
						<view class="flex-1" style="margin-right: 8rpx;">
							<uv-button type="success" :plain="true" text="确定" @click="onSubmit"></uv-button>
						</view>
						<view class="flex-1" style="margin-left: 8rpx;">
							<uv-button type="error" :plain="true" text="重置" @click="onReset"></uv-button>
						</view>
					</view>
				</uv-form>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		getContactsPage
	} from '@/api/customer'
	import {
		formatDateTime
	} from '@/utils/util'
	const title = ref('联系人')
	const keyword = ref('')
	const mobile = ref('')
	const phone = ref('')
	const oldScrollTop = ref(0)
	const scrollTop = ref(-1)
	const dataList = ref([])
	const dx = ref(0)
	const pH = ref(0)
	const scrollHeight = ref(0)
	const page = ref(1)
	const pageSize = ref(10)
	const lastPage = ref(false)
	const listStatus = ref('loadmore')

	const customStyle = computed(() => {
		return {
			paddingLeft: '10rpx',
			paddingRight: '120rpx'
		}
	})
	const customStyle2 = computed(() => {
		// return {
		// 	marginTop: (uni.getSystemInfoSync().statusBarHeight + 40) + 'px',
		// 	backgroundColor: '#ffffff'
		// 	//top:'100px'
		// }
		return {
			paddingTop: (uni.getSystemInfoSync().statusBarHeight + 40) + 'px',
			paddingBottom: 15 + 'px',
			backgroundColor: '#ffffff'
			//top:'100px'
		}
	})
	const relation = ref('my')
	const list = ref(
		[{
			name: '我的联系人',
			value: 'my'
		}, {
			name: '下属联系人',
			value: 'sub'
		}]
	)


	onReady(() => {
		uni.getSystemInfo({
			success(res) {
				pH.value = res.windowHeight
				let scrollH = uni.createSelectorQuery().select(".sv")
				scrollH.boundingClientRect(data => {
					let pH0 = pH.value
					scrollHeight.value = pH0 - data.top
				}).exec()
			}
		})
	})

	onLoad((e) => {
		getList();
	})

	// 页面数据
	const getList = async (isNextPage, pages) => {
		let data = await getContactsPage({
			pageNo: page.value,
			pageSize: pageSize.value,
			relation: relation.value,
			name: keyword.value,
			mobile: mobile.value,
			phone: phone.value,
		})
		// 不够一页
		if (data.list.length < 10) {
			listStatus.value = 'nomore'
		}
		// 最后一页
		if (data.list.length == 0) {
			lastPage.value = true
		}
		// 第二页开始
		if (isNextPage) {
			dataList.value = dataList.value.concat(data.list)
			return
		}
		dataList.value = data.list
	}
	const handleSelect = (key) => {
		relation.value = key.value
		getList()
	}

	const popup = ref()

	const openSearch = () => {
		popup.value.open()
	}
	// scroll 滚动记录
	const scroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop; // 必要
	}
	// 滚动到底部
	const reachBottom = () => {
		if (lastPage.value || listStatus.value == 'loading') return;
		if (!lastPage.value) {
			listStatus.value = 'loading';
			setTimeout(() => {
				listStatus.value = 'loadmore'
				getList(true, ++page.value)
			}, 500)
		}

	}
	// 点击搜索
	const onSearch = () => {
		page.value = 1
		lastPage.value = false
		getList()
	}

	const onReset = () => {
		mobile.value = ''
		phone.value = ''
		page.value = 1
		lastPage.value = false
		getList()
	}
	const onSubmit = () => {
		page.value = 1
		lastPage.value = false
		getList()
		popup.value.close()
	}

	// 查看详情
	const onItem = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/contacts/detail?id=' + id
		})

	}

	// 打电话
	const call = (id, phone) => {
		if (phone.indexOf("*") == -1) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		}
	}

	// 添加联系人
	const addUser = () => {
		uni.navigateTo({
			url: '/pages/components/pages/contacts/addPerson'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7;
		min-height: 100vh;
	}

	.page-box {
		padding: 20rpx 20rpx 45rpx;
	}

	.client {
		width: 710rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			align-items: center;

			.content {
				flex: 1;

				.title {
					font-size: 30rpx;
					font-weight: 600;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $uv-tips-color;
				}
			}

			.right {
				margin-left: 10rpx;
				text-align: right;

				.dial {
					color: #2979ff;
					font-size: 14px;
					border-bottom: 1px solid #2979ff;
					padding-bottom: 0px;
				}
			}
		}


	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}


	.floatBtn {
		font-size: 23rpx;
		bottom: 100px;
		right: 20px;
		border-radius: 5000px;
		z-index: 9;
		opacity: 1;
		width: 130rpx;
		height: 130rpx;
		position: fixed;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		color: #606266;
		align-items: center;
		transition: opacity 0.4s;
		border: 1px solid #dcdfe6;
	}
</style>