<template>
	<view class="container">
		<view class="top-bg"></view>
		<view class="top">
			<view class="top-left">
				<wd-icon name="arrow-left" size="22px"></wd-icon>
			</view>
			<view class="top-title">
				客户管理
			</view>
		</view>
		<view class="tab-bar">
			<view
				v-for="(tab, index) in tabList"
				:key="tab.id"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="handleTabClick(index)"
			>
				{{ tab.name }}
			</view>
		</view>
		<view class="content">
			<!-- 客户列表 -->
			<view v-if="activeTab === 0" class="list">
				<view class="search">
					<wd-search :placeholder-left="true" hide-cancel light class="search-box"  />
					<view class="right">
						<view class="item">
							排序
							<image
								src="https://apis.haibao.shop/storage/config/20250826/Polygon22x096dd60f7ca5e4e1ec14a75787200d19556225e7.jpg"
								mode="widthFix"></image>
						</view>
						<view class="item" style="margin-left: 44rpx;">
							筛选
							<image
								src="https://apis.haibao.shop/storage/config/20250826/Polygon22x096dd60f7ca5e4e1ec14a75787200d19556225e7.jpg"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="item-top">
						<view class="item-top-left">
							<view class="avatar">

							</view>
							<view class="name">
								空气猫有限公司
							</view>
						</view>
						<view class="item-top-right">
							<image
								src="https://apis.haibao.shop/storage/config/20250826/Vector2xedb375099c44a935a7add35fdb9901e086191475.png"
								class="phone" mode="widthFix"></image>
							<image
								src="https://apis.haibao.shop/storage/config/20250826/更多12x8a0b1bca93e23a53d85843c64f375d82efa4199b.png"
								class="more" mode="widthFix"></image>
						</view>
					</view>
					<view class="item-content">
						<view class="item-content-left">
							<view class="line">
								<view class="label">
									最后跟进：
								</view>
								<view class="date">
									2025-08023 12:22
								</view>
							</view>
							<view class="line">
								<view class="label">
									客户星级：
								</view>
								<view>
									<image class="icon"
										src="https://apis.haibao.shop/storage/config/20250826/Component302xad7d6290c98da23282c2a64713987e2456827bad.png"
										mode="widthFix"></image>
									<image class="icon"
										src="https://apis.haibao.shop/storage/config/20250826/Component302xad7d6290c98da23282c2a64713987e2456827bad.png"
										mode="widthFix"></image>
									<image class="icon"
										src="https://apis.haibao.shop/storage/config/20250826/Component302xad7d6290c98da23282c2a64713987e2456827bad.png"
										mode="widthFix"></image>
									<image class="icon"
										src="https://apis.haibao.shop/storage/config/20250826/Component302xad7d6290c98da23282c2a64713987e2456827bad.png"
										mode="widthFix"></image>
									<image class="icon"
										src="https://apis.haibao.shop/storage/config/20250826/Component302xad7d6290c98da23282c2a64713987e2456827bad.png"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="item-content-right">
							正在进行
						</view>
					</view>
					<view class="item-bottom">
						<view class="btn-left">
							跟进
						</view>
						<view class="btn-right">
							任务
						</view>
					</view>
				</view>
			</view>
			<!-- 新建客户 -->
			<view v-else-if="activeTab === 1" class="create-customer">
				<view class="form-container">
					<!-- 基本信息标题 -->
					<view class="section-title">基本信息</view>

					<!-- 企业名称 -->
					<view class="form-item">
						<view class="form-label required">企业名称</view>
						<wd-input
							v-model="customerForm.companyName"
							placeholder="请输入企业名称"
							class="form-input"
						/>
					</view>

					<!-- 选择行业 -->
					<view class="form-item">
						<view class="form-label">选择行业</view>
						<wd-picker
							:columns="industryOptions"
							v-model="customerForm.industry"
							placeholder="请选择行业"
							class="form-picker"
						/>
					</view>

					<!-- 国家地区 -->
					<view class="form-item">
						<view class="form-label">国家地区</view>
						<wd-picker
							:columns="countryOptions"
							v-model="customerForm.country"
							placeholder="请选择国家"
							class="form-picker"
						/>
					</view>

					<!-- 企业地址 -->
					<view class="form-item">
						<view class="form-label">企业地址</view>
						<wd-picker
							:columns="addressOptions"
							v-model="customerForm.address"
							placeholder="请选择企业地址"
							class="form-picker"
						/>
					</view>

					<!-- 营销阶段 -->
					<view class="form-item">
						<view class="form-label">营销阶段</view>
						<wd-picker
							:columns="marketingStageOptions"
							v-model="customerForm.marketingStage"
							placeholder="请选择营销阶段"
							class="form-picker"
						/>
					</view>

					<!-- 标签 -->
					<view class="form-item">
						<view class="form-label">标签</view>
						<wd-picker
							:columns="tagOptions"
							v-model="customerForm.tags"
							placeholder="请选择标签"
							class="form-picker"
						/>
					</view>
				</view>
			</view>

			<!-- 联系人基本信息 -->
			<view v-if="activeTab === 1" class="create-customer" style="margin-top: 20rpx;">
				<view class="form-container">
					<!-- 基本信息标题 -->
					<view class="section-title">基本信息</view>

					<!-- 联系人姓名和性别 -->
					<view class="form-item">
						<view class="name-gender-row">
							<view class="name-section">
								<view class="form-label">联系人姓名</view>
								<wd-input
									v-model="customerForm.contactName"
									placeholder="请输入联系人姓名"
									class="form-input"
								/>
							</view>
							<view class="gender-section">
								<view class="gender-label">性别</view>
								<wd-picker
									:columns="genderOptions"
									v-model="customerForm.gender"
									placeholder="请选择性别"
									class="form-picker"
								/>
							</view>
						</view>
					</view>

					<!-- 联系电话 -->
					<view class="form-item">
						<view class="form-label">联系电话</view>
						<wd-input
							v-model="customerForm.phone"
							type="number"
							placeholder="请输入联系电话"
							class="form-input"
						/>
					</view>

					<!-- 邮箱 -->
					<view class="form-item">
						<view class="form-label">邮箱</view>
						<wd-input
							v-model="customerForm.email"
							placeholder="请输入邮箱"
							class="form-input"
						/>
					</view>

					<!-- 职位 -->
					<view class="form-item">
						<view class="form-label">职位</view>
						<wd-input
							v-model="customerForm.position"
							placeholder="请输入职位"
							class="form-input"
						/>
					</view>

					<!-- 备注 -->
					<view class="form-item">
						<view class="form-label">备注</view>
						<wd-input
							v-model="customerForm.remarks"
							placeholder="请输入备注"
							class="form-input"
						/>
					</view>

					<!-- 提交按钮 -->
					<view class="submit-btn-container">
						<wd-button
							type="primary"
							block
							@click="submitCustomer"
							class="submit-btn"
						>
							保存客户
						</wd-button>
					</view>
				</view>
			</view>

			<!-- 数据看板 -->
			<view v-else-if="activeTab === 2" class="dashboard">
				<view class="placeholder-content">
					<text>数据看板页面内容</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 当前激活的tab索引
const activeTab = ref(0)

// tab列表数据
const tabList = ref([
	{
		id: 0,
		name: '客户列表'
	},
	{
		id: 1,
		name: '新建客户'
	},
	{
		id: 2,
		name: '数据看板'
	}
])

// 客户表单数据
const customerForm = ref({
	companyName: '',
	industry: '',
	country: '',
	address: '',
	marketingStage: '',
	tags: '',
	contactName: '',
	gender: '',
	phone: '',
	email: '',
	position: '',
	remarks: ''
})

// 下拉选项数据
const industryOptions = ref(['制造业', '服务业', '科技行业', '金融业', '教育行业', '医疗行业', '其他'])
const countryOptions = ref(['中国', '美国', '英国', '德国', '日本', '韩国', '其他'])
const addressOptions = ref(['北京市', '上海市', '广州市', '深圳市', '杭州市', '成都市', '其他'])
const marketingStageOptions = ref(['潜在客户', '意向客户', '商机客户', '成交客户', '流失客户'])
const tagOptions = ref(['重要客户', '优质客户', '普通客户', '新客户', '老客户'])
const genderOptions = ref(['男', '女'])

// 处理tab点击事件
const handleTabClick = (index: number) => {
	activeTab.value = index
}

// 提交客户信息
const submitCustomer = () => {
	// 表单验证
	if (!customerForm.value.companyName.trim()) {
		uni.showToast({
			title: '请输入企业名称',
			icon: 'none'
		})
		return
	}

	if (!customerForm.value.contactName.trim()) {
		uni.showToast({
			title: '请输入联系人姓名',
			icon: 'none'
		})
		return
	}

	if (!customerForm.value.phone.trim()) {
		uni.showToast({
			title: '请输入联系电话',
			icon: 'none'
		})
		return
	}

	// 手机号格式验证
	const phoneRegex = /^1[3-9]\d{9}$/
	if (!phoneRegex.test(customerForm.value.phone)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}

	// 邮箱格式验证（如果填写了邮箱）
	if (customerForm.value.email && customerForm.value.email.trim()) {
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(customerForm.value.email)) {
			uni.showToast({
				title: '请输入正确的邮箱格式',
				icon: 'none'
			})
			return
		}
	}

	// 显示保存中
	uni.showLoading({
		title: '保存中...'
	})

	// 模拟保存延迟
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		})

		// 重置表单
		customerForm.value = {
			companyName: '',
			industry: '',
			country: '',
			address: '',
			marketingStage: '',
			tags: '',
			contactName: '',
			gender: '',
			phone: '',
			email: '',
			position: '',
			remarks: ''
		}

		// 切换到客户列表tab
		setTimeout(() => {
			activeTab.value = 0
		}, 1500)
	}, 1500)
}
</script>

<style lang="scss" scoped>
	.active {
		color: #333333 !important;

		&::after {
			content: "";
			display: block;
			width: 35rpx;
			height: 6rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.container {
		overflow: hidden;
		background: #FAFAFA;
	}

	.top-bg {
		width: 750rpx;
		height: 513rpx;
		background: linear-gradient(134deg, #E8FFDE 0%, #BCF3FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		position: absolute;
	}

	.top {
		height: 176rpx;
		display: flex;
		align-items: flex-end;
		padding-bottom: 20rpx;
		box-sizing: content-box;
		position: relative;

		.top-left {
			height: 88rpx;
			display: flex;
			align-items: center;
			padding-left: 33rpx;
		}


		.top-title {
			font-size: 32rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.tab-bar {
		padding: 0 33rpx;
		display: flex;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			padding: 10rpx 0;
			font-size: 28rpx;
			color: #9CA9AA;
			position: relative;
		}
	}

	.content {
		padding: 0 33rpx;
		margin-top: 27rpx;
		position: relative;
		z-index: 1;
	}

	.create-customer {
		padding: 30rpx;
		box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(177, 211, 255, 0.15);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #FFFFFF;

		.form-container {
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.form-item {
				margin-bottom: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 16rpx;
					position: relative;

					&.required::before {
						content: "*";
						color: #ff4757;
						margin-right: 8rpx;
					}
				}

				.form-input {
					background: #F8F8F8 !important;
					border-radius: 12rpx;
					padding: 10rpx 31rpx;
					font-size: 24rpx;
					border: none !important;

					&:focus {
						border-color: #4398FF;
					}
				}

				.form-picker {
					background: #F8F8F8;
					border-radius: 12rpx;
					font-size: 28rpx;
					border: none;
					color: #333333;
					min-height: 88rpx;
					display: flex;
					align-items: center;
				}

				.name-gender-row {
					display: flex;
					align-items: flex-start;
					gap: 20rpx;

					.name-section {
						flex: 1;
						display: flex;
						flex-direction: column;

						.form-label {
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
					}

					.gender-section {
						flex: 1;
						display: flex;
						flex-direction: column;

						.gender-label {
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
					}
				}
			}

			.submit-btn-container {
				margin-top: 60rpx;

				.submit-btn {
					background: #4398FF;
					border-radius: 50rpx;
					height: 88rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		// 深度选择器覆盖组件样式
		::v-deep .wd-input {
			background: #F8F9FA !important;
			border-radius: 12rpx !important;
			border: 1rpx solid #E9ECEF !important;
			font-size: 28rpx !important;
		}

		// 移除特定的背景色样式
		::v-deep .wd-input.is-not-empty:not(.is-disabled)::after {
			background-color: transparent !important;
		}

		::v-deep .wd-input::after {
			background-color: transparent !important;
		}

		::v-deep .wd-picker {
			background: #F8F9FA !important;
			border-radius: 12rpx !important;
			border: none !important;
			font-size: 28rpx !important;
			min-height: 88rpx !important;
		}

		// 移除picker内部元素的边框
		::v-deep .wd-picker__inner {
			border: none !important;
			background: #F8F9FA !important;
		}

		::v-deep .wd-picker__cell {
			border: none !important;
			background: #F8F9FA !important;
		}

		::v-deep .wd-picker__placeholder {
			color: #999999 !important;
		}

		::v-deep .wd-button--primary {
			background: #4398FF !important;
			border-color: #4398FF !important;
		}
	}

	.dashboard {
		padding: 30rpx;
		box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(177, 211, 255, 0.15);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #FFFFFF;
		min-height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.placeholder-content {
			text-align: center;
			color: #999999;
			font-size: 28rpx;
		}
	}

	.search {
		display: flex;
		// align-items: center;
		justify-content: space-between;

		.search-box {
			width: 60%;
			background-color: #fff !important;
			padding: 0 !important;
			border-radius: 40rpx;
			border: 1rpx solid #62DF91;
		}

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

			.item {
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 23rpx;
					margin-left: 4rpx;
				}
			}
		}
	}

	.list {
		padding: 30rpx;
		box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(177, 211, 255, 0.15);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #FFFFFF;

		.list-item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E9E9E9;

			.item-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

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

					.avatar {
						width: 38rpx;
						height: 38rpx;
						background: #D9D9D9;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}

				.item-top-right {
					.phone {
						width: 23rpx;
						margin-right: 11rpx;
					}

					.more {
						width: 26rpx;
					}
				}
			}

			.item-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin: 10rpx 0 30rpx;

				.item-content-left {
					.line {
						display: flex;
						align-items: center;
						line-height: 44rpx;
						font-size: 24rpx;

						.label {
							color: #999999;
						}

						.date {
							color: #333333;
						}

						.icon {
							width: 24rpx;
							margin-right: 20rpx;
						}
					}
				}

				.item-content-right {
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					background: #D9FFDC;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 28rpx;
					color: #00BE33;
					font-weight: bold;
				}
			}

			.item-bottom {
				display: flex;

				.btn {
					flex: 1;
					border-radius: 50rpx;
					padding: 18rpx 0;
					font-size: 32rpx;
					text-align: center
				}

				.btn-left {
					@extend .btn;
					margin-right: 13rpx;
					color: #FFFFFF;
					background: #4398FF;
				}

				.btn-right {
					@extend .btn;
					margin-left: 13rpx;
					color: #4398FF;
					border: 2rpx solid #4398FF;
				}
			}
		}
	}
</style>
