<template>
	<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="container">
		<view class="bare">
			<!-- 顶部导航高度 -->
			<view class="statusBar"></view>
		</view>
		<view class="notice">
			<view class="belong flex">
				<view class="left">
					<view class="store">{{contactData.name}}</view>
				</view>
			</view>
			<view class="bottom flex" @click="onCustomer(contactData.customerId)">
				<view class="title">归属客户：{{contactData.customerName}}</view>
				<view class="client_time flex">查看<uv-icon name="arrow-right" color="#09b4f1" :size="14"></uv-icon></view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="region mt-3 bg-white">
			<view class="title">
				<text class="text">基本信息</text>
			</view>
			<view class="details">
				<uv-form ref="uForm" labelWidth="80">
					<uv-form-item label="电话:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.telephone" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="邮箱：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.email" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="微信：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.wechat" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="职务：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.post" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="生日：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.birthday" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="决策人：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.decision" border="none" placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="地址:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.detail_address" border="none"
							placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="下次跟进:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.next_time" border="none" placeholder="暂无" />
					</uv-form-item>
				</uv-form>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<view class="btn entity" @click="onEdit">
				<text class="ml-1">修改</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getContacts
	} from '@/api/customer'
	import {
		formatDateTime,
		prePage
	} from '@/utils/util'
	const title = ref('联系人详情')
	const id = ref(0)
	const contactData = ref({})

	//form: '',

	onLoad((e) => {
		console.log('e:', e)
		id.value = e.id
		getData()
	})


	onShow(() => {
		getData()
	})

	// 获取数据详情
	const getData = async () => {
		contactData.value = await getContacts({
			id: id.value
		})
	}

	// 查看客户详情
	const onCustomer = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/customer/customerDetails?id=' + id
		});
	}
	const onEdit = () => {
		uni.navigateTo({
			url: '/pages/components/pages/contacts/addPerson?id=' + id.value + '&type=edit'
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uv-form-item__body) {
		padding: 28rpx 24rpx !important;
	}

	.container {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
	}

	.bare {
		color: #fff;
		background-color: #09b4f1;
	}

	.notice {
		margin: -68px 8px 10px 8px;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 10px;
		padding: 30rpx 24rpx;

		.belong {
			justify-content: space-between;

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

				.store {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: #FF7159;
			}
		}

		.relation {
			justify-content: space-between;
			margin-top: 15rpx;
			font-size: 26rpx;

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

		.bottom {
			margin-top: 20rpx;
			justify-content: space-between;

			.title {
				font-size: 26rpx;
			}

			.client_time {
				color: #777;
				font-size: 26rpx;
			}
		}
	}

	.region {
		margin: 0 8px;
		border-radius: 10px;
		padding-top: 16rpx;

		.title {
			text-align: center;
			font-size: 35rpx;
			font-weight: 700;

			.text {
				color: #09b4f1;
				border-bottom: 6rpx solid #09b4f1;
			}
		}

		.details {
			padding-top: 20rpx;
		}
	}

	.statusBar {
		position: relative;
		z-index: -1;
		height: 188rpx;
	}

	.bottom-btn {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 45rpx;
		background-color: #fff;
		z-index: 100;

		.btn {
			float: right;
			line-height: 43rpx;
			padding: 15rpx 36rpx;
			border-radius: 5px;
			font-size: 28rpx;
			text-align: center;
		}

		.entity {
			color: #fff;
			background-color: #09b4f1;
		}
	}
</style>