<template>
	<view class="customer-management-wrapper" >
		<view v-if="show" class="customer-management-container" style="margin-top: var(--status-bar-height);">
			<!-- 头部 -->
			<view class="header">
				<view class="back-icon" @tap="closePage">
					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
				</view>
				<view class="title">客户管理</view>
				<view class="close-icon">
					<u-icon name="plus" color="#2979ff" size="24" @click="showAddCustomer"></u-icon>
				</view>
			</view>
			
			<!-- 搜索和筛选区域 -->
			<view class="search-filter-area">
				<view class="search-box">
					<u-search 
						placeholder="搜索客户姓名、电话或邮箱..." 
						v-model="searchKeyword" 
						:showAction="false" 
						:clearabled="true"
						shape="round"
						:animation="false"
						height="70rpx"
					></u-search>
				</view>
				<view class="filter-action">
					<u-button v-if="false" icon="filter" type="default" shape="square" size="normal" @click="showFilterPopup">筛选</u-button>
					<u-button v-else type="primary" shape="circle" @click="applyFilter">搜索</u-button>
				</view>
			</view>
			
			<!-- 客户分类标签 -->
			<view class="customer-tabs">
				<u-subsection 
					:list="tabsList" 
					:current="currentTab"
					@change="changeTab"
					mode="button"
					:animation="true"
					activeColor="#2979ff"
					inactiveColor="#333"
					bgColor="#f5f5f5"
				></u-subsection>
			</view>
			
			<!-- 客户列表 -->
			<scroll-view class="customer-list" scroll-y @scrolltolower="loadMore" refresher-enabled :refresher-triggered="refreshing" @refresherpulling="onRefresh">
				<!-- 客户卡片 -->
				<view class="customer-card" v-for="(item, index) in customerList" :key="index" @tap="viewCustomerDetail(item)">
					<view class="card-header">
						<view class="card-left">
							<view class="select-box">
								<u-checkbox v-model="item.selected" @change="checkboxChange" shape="circle"></u-checkbox>
							</view>
							<view class="avatar-box">
								<image :src="item.avatar || '/static/images/default-avatar.png'" class="avatar-image"></image>
							</view>
							<view class="customer-info">
								<view class="customer-name-row">
									<text class="customer-name">{{item.name}}</text>
									<text v-if="getCustomerLevel(item)" :class="['customer-level-'+getCustomerLevel(item)]" class="level-tag">{{getLevelText(getCustomerLevel(item))}}</text>
								</view>
								<view class="customer-contact">
									<text class="contact-method">{{item.contactType}} /</text>
									<text class="contact-value"> {{item.contactValue}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="card-content">
						<view class="contact-info">
							<text class="phone-number">{{item.phone}}</text>
							<text class="contact-date">通过时间: {{item.createTime}}</text>
						</view>
						<view class="tag-list">
							<text class="tag-title">标签：</text>
							<text class="customer-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
						</view>
						<view class="remark" v-if="item.remark">
							<text class="remark-title">备注:</text>
							<text class="remark-content">{{item.remark}}</text>
						</view>
					</view>
					<view class="card-footer">
						<view class="value-tag" v-if="item.value">{{item.value}}</view>
						<view class="action-icons">
							<!-- <view class="action-icon" @tap.stop="showMessageModal(item)">
								<u-icon name="chat" size="22" color="#999"></u-icon>
							</view>
							<view class="action-icon">
								<u-icon name="eye" size="22" color="#999"></u-icon>
							</view>
							<view class="action-icon">
								<u-icon name="more-dot-fill" size="22" color="#999"></u-icon>
							</view> -->
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="customerList.length > 0">
					<u-loadmore :status="loadStatus" icon-type="flower" />
				</view>
				
				<!-- 无数据展示 -->
				<view class="empty-box" v-if="customerList.length === 0">
					<u-empty text="暂无客户数据" mode="data"></u-empty>
				</view>
			</scroll-view>
			
			<!-- 筛选弹出层 -->
			<u-popup :show="showFilter" mode="right" @close="closeFilter" width="70%">
				<view class="filter-container">
					<view class="filter-header">
						<text class="filter-title">筛选条件</text>
						<u-icon name="close" size="20" @click="closeFilter"></u-icon>
					</view>
					<view class="filter-content">
						<view class="filter-section">
							<view class="section-title">客户标签</view>
							<view class="tags-container">
								<view 
									class="tag-item" 
									v-for="(tag, index) in filterTags" 
									:key="index"
									:class="{'tag-selected': selectedTags.includes(tag)}"
									@tap="toggleTagSelect(tag)"
								>
									{{tag}}
								</view>
							</view>
						</view>
						
						<view class="filter-section">
							<view class="section-title">状态</view>
							<view class="status-container">
								<u-radio-group v-model="filterStatus">
									<u-radio 
										v-for="(status, index) in statusOptions" 
										:key="index" 
										:name="status"
										:label="status"
										labelSize="28rpx"
									></u-radio>
								</u-radio-group>
							</view>
						</view>
						
						<view class="filter-section">
							<view class="section-title">添加时间</view>
							<view class="date-container">
								<view class="date-input" @tap="showDatePicker('start')">
									<text>{{filterStartDate || '开始日期'}}</text>
									<u-icon name="calendar" size="16"></u-icon>
								</view>
								<text class="date-separator">至</text>
								<view class="date-input" @tap="showDatePicker('end')">
									<text>{{filterEndDate || '结束日期'}}</text>
									<u-icon name="calendar" size="16"></u-icon>
								</view>
							</view>
						</view>
					</view>
					
					<view class="filter-footer">
						<u-button @click="resetFilter">重置</u-button>
						<u-button type="primary" @click="applyFilter">确定</u-button>
					</view>
				</view>
			</u-popup>
			
			<!-- 日期选择器 -->
			<u-datetime-picker
				:show="showDatePickerFlag"
				v-model="tempDate"
				mode="date"
				:min-date="1577808000000"
				:max-date="new Date().getTime()"
				@confirm="confirmDate"
				@cancel="showDatePickerFlag = false"
			></u-datetime-picker>
			
			<!-- 消息弹框 -->
			<u-popup :show="showMessage" mode="center" @close="closeMessageModal" width="100%" :custom-style="{width: '100%'}" borderRadius="0">
				<view class="message-modal" style="width: 100%;">
					<view class="message-modal-header">
						<text class="message-modal-title">发送消息</text>
						<u-icon name="close" size="20" @click="closeMessageModal"></u-icon>
					</view>
					<view class="message-modal-content">
						<view class="message-receiver">
							<text class="receiver-label">收件人：</text>
							<text class="receiver-name">{{currentCustomer && currentCustomer.name}}</text>
						</view>
						<view class="message-input-area">
							<u-textarea v-model="messageContent" placeholder="请输入消息内容..." height="150"></u-textarea>
						</view>
					</view>
					<view class="message-modal-footer">
						<u-button type="default" @click="closeMessageModal">取消</u-button>
						<u-button type="primary" @click="sendMessage">发送</u-button>
					</view>
				</view>
			</u-popup>
			
			<!-- 客户详情弹框 -->
			<u-popup :show="showCustomerDetail" mode="center" @close="closeCustomerDetail" width="100%" :custom-style="{width: '100%'}" borderRadius="0">
				<view class="customer-detail-modal">
					<view class="detail-modal-header">
						<text class="detail-modal-title">客户详细信息</text>
						<u-icon name="close" size="20" @click="closeCustomerDetail"></u-icon>
					</view>
					
					<view class="customer-profile">
						<view class="avatar-area">
							<image :src="currentCustomer && currentCustomer.avatar || '/static/images/default-avatar.png'" class="detail-avatar"></image>
						</view>
						<view class="profile-info">
							<view class="profile-name">{{currentCustomer && currentCustomer.name}}</view>
							<view class="profile-tags">
								<text class="profile-tag active-tag">活跃</text>
								<text class="profile-tag high-value-tag">高价值</text>
							</view>
						</view>
						<view class="total-value">
							<text class="value-label">来自</text>
							<text class="value-amount">{{currentCustomer && currentCustomer.contactValue && currentCustomer.contactValue.replace('¥', '')}}</text>
						</view>
					</view>
					
					<scroll-view scroll-y class="detail-content">
						<view class="detail-section">
							<view class="section-title">基本信息</view>
							<view class="info-grid">
								<!-- <view class="info-item">
									<text class="info-label">手机号码</text>
									<text class="info-value">{{currentCustomer && currentCustomer.phone}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">电子邮箱</text>
									<text class="info-value">{{currentCustomer && currentCustomer.email || 'zhangsan@example.com'}}</text>
								</view> -->
								<view class="info-item" v-if="currentCustomer && currentCustomer.alias">
									<text class="info-label">微信号</text>
									<text class="info-value">{{currentCustomer && currentCustomer.alias}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">微信ID</text>
									<text class="info-value">{{currentCustomer && currentCustomer.wechatId}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">客户来源</text>
									<text class="info-value">{{currentCustomer && currentCustomer.source || '微信'}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">加入时间</text>
									<text class="info-value">{{currentCustomer && currentCustomer.createTime}}</text>
								</view>
							</view>
						</view>
						
						<view class="detail-section">
							<view class="section-title">跟进信息</view>
							<view class="info-grid">

								
								<view class="info-item">
									<text class="info-label">备注</text>
									<text class="info-value">{{currentCustomer && currentCustomer.conRemark}}</text>
								</view>

								<!-- <view class="info-item">
									<text class="info-label">上次联系</text>
									<text class="info-value">{{currentCustomer && currentCustomer.lastContact}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">下次跟进</text>
									<text class="info-value">{{currentCustomer && currentCustomer.nextContact || '2023-06-10'}}</text>
								</view> -->
							</view>
						</view>
						
						<view class="detail-section">
							<view class="section-title">标签</view>
							<view class="tags-list">
								<text class="tag-item" v-for="(tag, index) in currentCustomer && currentCustomer.tags" :key="index">{{tag}}</text>
							</view>
						</view>
					</scroll-view>
					
					<!-- <view class="detail-footer">
						<view class="footer-button" @tap="makePhoneCall">
							<u-icon name="phone" size="18" color="#2979ff"></u-icon>
							<text class="button-text">电话联系</text>
						</view>
						<view class="footer-button" @tap="showMessageModal(currentCustomer)">
							<u-icon name="chat" size="18" color="#2979ff"></u-icon>
							<text class="button-text">发送消息</text>
						</view>
						<view class="footer-button" @tap="editCustomerInfo">
							<u-icon name="edit-pen" size="18" color="#2979ff"></u-icon>
							<text class="button-text">编辑信息</text>
						</view>
						<view class="footer-button add-follow-btn" @tap="addFollowUp">
							<text class="button-text">添加跟进</text>
						</view>
					</view> -->
				</view>
			</u-popup>
			
			<!-- 新增客户弹框 -->
			<u-popup :show="showAddCustomerModal" mode="center" @close="showAddCustomerModal = false" width="90%" :custom-style="{width: '90%'}" borderRadius="8">
				<view class="add-customer-modal">
					<view class="modal-header">
						<text class="modal-title">新增客户</text>
						<u-icon name="close" size="20" @click="showAddCustomerModal = false"></u-icon>
					</view>
					
					<view class="modal-content">
						<view class="form-item">
							<text class="form-label">姓名</text>
							<u-input v-model="newCustomer.name" placeholder="请输入客户姓名" border="bottom"></u-input>
						</view>
						
						<view class="form-item">
							<text class="form-label">手机号码</text>
							<u-input v-model="newCustomer.phone" placeholder="请输入手机号码" border="bottom" type="number"></u-input>
						</view>
						
						<view class="form-item">
							<text class="form-label">电子邮箱</text>
							<u-input v-model="newCustomer.email" placeholder="请输入电子邮箱" border="bottom" type="email"></u-input>
						</view>
						
						<view class="form-item">
							<text class="form-label">客户来源</text>
							<u-input v-model="newCustomer.source" placeholder="请选择客户来源" border="bottom" disabled></u-input>
						</view>
						
						<view class="form-item">
							<text class="form-label">标签</text>
							<view class="tags-select">
								<view 
									class="tag-item" 
									v-for="(tag, index) in filterTags" 
									:key="index"
									:class="{'tag-selected': newCustomer.tags.includes(tag)}"
									@tap="toggleNewCustomerTag(tag)"
								>
									{{tag}}
								</view>
							</view>
						</view>
					</view>
					
					<view class="modal-footer">
						<u-button type="default" @click="showAddCustomerModal = false">取消</u-button>
						<u-button type="primary" @click="addCustomer">确定</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { request } from '../api/config';
	
	export default {
		name: 'CustomerManagement',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				searchKeyword: '',
				currentTab: 0,
				tabsList: [
					{name: '全部'},
					{name: '待跟进'},
					{name: '已购买'},
					{name: '已流失'}
				],
				customerList: [],
				loadStatus: 'loadmore', // loadmore, loading, nomore
				selectAll: false,
				
				// 分页相关
				pageSize: 10,
				page: 1,
				total: 0,
				
				// 筛选相关
				showFilter: false,
				filterTags: ['潜在客户', '高潜力', 'VIP客户', '新客户', '活跃客户', '沉睡客户'],
				selectedTags: [],
				statusOptions: ['全部', '活跃', '跟进中', '未跟进', 'VIP'],
				filterStatus: '全部',
				filterStartDate: '',
				filterEndDate: '',
				
				// 日期选择器
				showDatePickerFlag: false,
				tempDate: new Date().getTime(),
				currentDateType: 'start', // start 或 end
				
				// 消息相关
				showMessage: false,
				currentCustomer: null,
				messageContent: '',
				
				// 客户详情相关
				showCustomerDetail: false,
				refreshing: false,
				
				// 新增客户相关
				showAddCustomerModal: false,
				newCustomer: {
					name: '',
					phone: '',
					email: '',
					source: '微信',
					tags: []
				}
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.loadCustomerList();
				}
			}
		},
		methods: {
			closePage() {
				this.$emit('close');
			},
			// 加载客户列表
			async loadCustomerList() {
				if (this.loadStatus === 'loading') return;
				
				this.loadStatus = 'loading';
				
				try {
					const res = await request({
						url: '/v1/store/customers/list',
						method: 'GET',
						data: {
							page: this.page,
							pageSize: this.pageSize,
							keyword: this.searchKeyword,
							status: this.currentTab === 0 ? '' : this.tabsList[this.currentTab].name,
							startDate: this.filterStartDate,
							endDate: this.filterEndDate,
							tags: this.selectedTags.join(',')
						}
					});
					
					if (res.code === 200) {
						const customers = res.data.list || [];
						this.total = res.data.total || 0;
						
						// 如果是加载更多，则追加数据
						if (this.page > 1) {
							this.customerList = [...this.customerList, ...this.formatCustomerData(customers)];
						} else {
							this.customerList = this.formatCustomerData(customers);
						}
						
						// 设置加载状态
						this.loadStatus = this.customerList.length >= this.total ? 'nomore' : 'loadmore';
					} else {
						uni.showToast({
							title: res.msg || '获取客户列表失败',
							icon: 'none'
						});
						this.loadStatus = 'loadmore';
					}
				} catch (err) {
					console.error('获取客户列表失败:', err);
					uni.showToast({
						title: '获取客户列表失败，请稍后重试',
						icon: 'none'
					});
					this.loadStatus = 'loadmore';
				}
				
				// 停止下拉刷新
				if (this.refreshing) {
					this.refreshing = false;
				}
			},
			
			// 格式化客户数据
			formatCustomerData(customers) {
				return customers.map(item => {
					// 处理标签
					let tags = [];
					if (Array.isArray(item.labels)) {
						tags = item.labels;
					} else {
						console.log('labels字段不是数组:', item.labels);
					}
					
					
					
					return {
						id: item.id,
						name: item.nickname || item.alias || '未命名',
						avatar: item.avatar || '',
						contactType: '微信',
						contactValue: item.region ? `${item.region}` : '',
						tags: tags.length > 0 ? tags : ['新客户'],
						status: item.isPassed === 1 ? '活跃' : '未跟进',
						phone: item.phone || '',
						selected: false,
						remark: item.conRemark || item.signature || '',
						passTime: item.passTime || '',
						value: '',
						wechatId: item.wechatId || '',
						email: '',
						source: '微信',
						joinDate: this.formatDate(item.createTime),
						isDeleted: item.isDeleted || false,
						gender: item.gender || '',
						alias: item.alias || '',
						wechatId: item.wechatId || '',
						createTime: item.createTime || '',
						conRemark: item.conRemark || ''
					};
				});
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr || dateStr === 'null' || dateStr === '0001-01-01 00:00:00') return '';
				try {
					// 简单处理日期格式，只保留年月日
					return dateStr.split(' ')[0];
				} catch (e) {
					return '';
				}
			},
			
			changeTab(index) {
				this.currentTab = index;
				// 重置页码并重新加载数据
				this.page = 1;
				this.loadCustomerList();
				// 显示轻微震动反馈（在支持的设备上）
				if(uni.vibrateShort) {
					uni.vibrateShort();
				}
			},
			// 获取客户价值等级
			getCustomerLevel(customer) {
				if (!customer) return '';
				
				// 这里可以根据业务规则判断客户等级
				if (customer.contactValue) {
					const value = parseFloat(customer.contactValue.replace('¥', '').replace(',', ''));
					if (value >= 15000) return 'high';
					if (value >= 8000) return 'medium';
					if (value > 0) return 'normal';
				}
				
				// 根据标签判断
				if (customer.tags) {
					if (customer.tags.includes('VIP客户') || customer.tags.includes('VIP')) return 'high';
					if (customer.tags.includes('高潜力')) return 'medium';
				}
				
				return '';
			},
			// 获取等级文字描述
			getLevelText(level) {
				const levelTextMap = {
					'high': 'VIP',
					'medium': '潜力',
					'normal': '普通'
				};
				return levelTextMap[level] || '';
			},
			
			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.page = 1;
				this.loadCustomerList();
			},
			
			// 加载更多
			loadMore() {
				if(this.loadStatus !== 'loadmore') return;
				
				this.page++;
				this.loadCustomerList();
			},
			
			checkboxChange(e) {
				// 更新全选状态
				this.updateSelectAllStatus();
			},
			updateSelectAllStatus() {
				// 检查是否所有项目都被选中
				this.selectAll = this.customerList.every(item => item.selected);
			},
			selectAllChange(e) {
				// 全选或取消全选所有客户
				const status = e;
				this.customerList.forEach(item => {
					item.selected = status;
				});
			},
			viewCustomerDetail(customer) {
				this.currentCustomer = customer;
				this.showCustomerDetail = true;
			},
			chatWithCustomer(customer) {
				// 与客户聊天功能已移除
			},
			showFilterPopup() {
				this.showFilter = true;
			},
			closeFilter() {
				this.showFilter = false;
			},
			toggleTagSelect(tag) {
				// 切换标签选中状态
				const index = this.selectedTags.indexOf(tag);
				if (index > -1) {
					// 取消选中
					this.selectedTags.splice(index, 1);
				} else {
					// 选中
					this.selectedTags.push(tag);
				}
			},
			resetFilter() {
				// 重置筛选条件
				this.selectedTags = [];
				this.filterStatus = '全部';
				this.filterStartDate = '';
				this.filterEndDate = '';
			},
			applyFilter() {
				// 应用筛选条件
				this.page = 1;
				this.loadCustomerList();
				
				// 关闭筛选弹窗
				this.closeFilter();
				
				// 显示操作成功提示
				uni.showToast({
					title: '筛选条件已应用',
					icon: 'none'
				});
			},
			showDatePicker(type) {
				this.currentDateType = type;
				this.showDatePickerFlag = true;
			},
			confirmDate(e) {
				// 格式化日期
				const date = new Date(e);
				const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
				
				// 根据当前选择类型设置日期
				if (this.currentDateType === 'start') {
					this.filterStartDate = formattedDate;
				} else {
					this.filterEndDate = formattedDate;
				}
				
				// 关闭日期选择器
				this.showDatePickerFlag = false;
			},
			showMessageModal(customer) {
				this.currentCustomer = customer;
				this.messageContent = '';
				this.showMessage = true;
			},
			closeMessageModal() {
				this.showMessage = false;
				this.messageContent = '';
			},
			sendMessage() {
				// 实现发送消息的逻辑
				if(!this.messageContent.trim()) {
					uni.showToast({
						title: '消息内容不能为空',
						icon: 'none'
					});
					return;
				}
				
				// 显示发送中提示
				uni.showLoading({
					title: '发送中...'
				});
				
				// 模拟发送过程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '发送成功',
						icon: 'success'
					});
					this.closeMessageModal();
				}, 500);
			},
			closeCustomerDetail() {
				this.showCustomerDetail = false;
			},
			makePhoneCall() {
				// 实际拨打电话
				if(this.currentCustomer && this.currentCustomer.phone) {
					uni.makePhoneCall({
						phoneNumber: this.currentCustomer.phone,
						success: () => {
							console.log('拨打电话成功');
						},
						fail: (err) => {
							console.error('拨打电话失败', err);
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '电话号码不存在',
						icon: 'none'
					});
				}
			},
			editCustomerInfo() {
				// 编辑当前客户信息
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			},
			addFollowUp() {
				// 实现添加跟进信息的逻辑
			},
			showAddCustomer() {
				// 重置新客户数据
				this.newCustomer = {
					name: '',
					phone: '',
					email: '',
					source: '微信',
					tags: []
				};
				this.showAddCustomerModal = true;
			},
			addCustomer() {
				// 验证表单
				if(!this.newCustomer.name) {
					uni.showToast({
						title: '请输入客户姓名',
						icon: 'none'
					});
					return;
				}
				
				// 模拟添加客户
				uni.showLoading({
					title: '添加中...'
				});
				
				setTimeout(() => {
					// 生成一个临时ID
					const newId = this.customerList.length + 1;
					
					// 创建新客户对象
					const customer = {
						id: newId,
						name: this.newCustomer.name,
						avatar: '',
						contactType: '微信',
						contactValue: '¥0',
						tags: this.newCustomer.tags.length > 0 ? this.newCustomer.tags : ['新客户'],
						status: '未跟进',
						lastContact: new Date().toISOString().split('T')[0],
						phone: this.newCustomer.phone,
						email: this.newCustomer.email,
						selected: false,
						remark: '',
						value: ''
					};
					
					// 添加到列表前端
					this.customerList.unshift(customer);
					
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					
					this.showAddCustomerModal = false;
				}, 500);
			},
			toggleNewCustomerTag(tag) {
				// 切换新客户标签选中状态
				const index = this.newCustomer.tags.indexOf(tag);
				if (index > -1) {
					// 取消选中
					this.newCustomer.tags.splice(index, 1);
				} else {
					// 选中
					this.newCustomer.tags.push(tag);
				}
			}
		}
	}
</script>

<style lang="scss">
	.customer-management-container {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #f7f8fa; /* 更柔和的背景色 */
		z-index: 10000;
		overflow-y: auto;
		transform-origin: right;
		animation: slideInFromRight 0.3s ease;
		font-size: 28rpx; /* 基础字体大小使用rpx，保证在不同屏幕上的一致性 */
		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
		padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
		padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
		font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; /* 添加适合中文显示的字体系列 */
	}
	
	@keyframes slideInFromRight {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 7px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	
	.back-icon {
		width: 60px;
		font-size: 15px;
		color: #333;
	}
	
	.title {
		font-size: 17px;
		font-weight: 500;
		flex: 1;
		text-align: center;
	}
	
	.close-icon {
		width: 60px;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
	}
	
	.search-filter-area {
		padding: 15px;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0; /* 添加边框增加区域分隔感 */
	}
	
	.search-box {
		flex: 1;
		margin-right: 10px;
	}
	
	.filter-action {
		margin-left: 10px;
	}
	
	.filter-action .u-button {
		padding: 0 15px;
		height: 70rpx;
		display: flex;
		align-items: center;
	}
	
	.customer-tabs {
		padding: 15px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.customer-tabs :deep(.u-subsection) {
		width: 100%;
	}
	
	.customer-tabs :deep(.u-subsection__item--button) {
		padding: 10px 0;
		font-size: 15px;
	}
	
	.customer-tabs :deep(.u-subsection__item--button--active) {
		font-weight: 500;
	}
	
	.customer-list {
		padding: 0 15px;
		height: calc(100vh - 180px); /* 减去头部、搜索和标签的高度 */
		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
		box-sizing: border-box;
	}
	
	.customer-card {
		background-color: #fff;
		border-radius: 12px; /* 更大的圆角，符合现代中国审美 */
		margin-bottom: 15px;
		padding: 15px;
		display: flex;
		flex-direction: column;
		box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08); /* 更柔和的阴影效果 */
		position: relative;
		transition: all 0.2s ease-out;
		border: none; /* 去掉边框，使用阴影区分 */
	}
	
	.customer-card:active {
		transform: scale(0.98);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #f5f5f5; /* 更淡的分隔线 */
		padding-bottom: 10px;
	}
	
	.card-left {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.select-box {
		margin-right: 10px;
	}
	
	.avatar-box {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
		background-color: #f5f7fa; /* 更改背景色 */
		border: 1px solid #f0f0f0; /* 添加边框 */
	}
	
	.avatar-image {
		width: 100%;
		height: 100%;
	}
	
	.customer-info {
		flex: 1;
	}
	
	.customer-name-row {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	
	.customer-name {
		font-size: 16px;
		font-weight: 500;
		color: #323233; /* 更深的文字颜色 */
		margin-right: 6px;
	}
	
	.level-tag {
		font-size: 12px;
		padding: 1px 5px;
		border-radius: 4px;
		margin-left: 5px;
		font-weight: 500;
	}
	
	.customer-level-high {
		color: #f5222d; /* 中国红 */
		background-color: #fff1f0;
		border: 1px solid #ffccc7;
	}
	
	.customer-level-medium {
		color: #fa8c16; /* 橙色 */
		background-color: #fff7e6;
		border: 1px solid #ffe7ba;
	}
	
	.customer-level-normal {
		color: #52c41a; /* 翠绿 */
		background-color: #f6ffed;
		border: 1px solid #b7eb8f;
	}
	
	.customer-contact {
		font-size: 14px;
	}
	
	.contact-method {
		color: #999;
	}
	
	.contact-value {
		color: #fa541c; /* 朱砂红，象征积极、向上 */
		font-weight: 500;
	}
	
	.card-content {
		margin-bottom: 15px;
	}
	
	.contact-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		justify-content: space-between;
	}
	
	.phone-number {
		font-size: 14px;
		color: #333;
		margin-right: 15px;
	}
	
	.contact-date {
		font-size: 13px;
		color: #999;
	}
	
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.tag-title {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin-right: 10px;
	}
	
	.customer-tag {
		font-size: 12px;
		color: #1890ff; /* 蚂蚁蓝色系，符合中国互联网审美 */
		background-color: #e6f7ff;
		padding: 2px 8px;
		border-radius: 10px; /* 圆角更大 */
		margin-right: 10px;
		margin-bottom: 5px;
	}
	
	.remark {
		font-size: 13px;
		color: #666;
		line-height: 1.5;
	}
	
	.remark-title {
		color: #999;
		margin-right: 5px;
	}
	
	.remark-content {
		color: #666;
	}
	
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.value-tag {
		padding: 2px 8px;
		background-color: #fff1f0; /* 淡红色背景 */
		color: #f5222d; /* 红色文字 */
		border-radius: 10px;
		font-size: 12px;
	}
	
	.action-icons {
		display: flex;
		align-items: center;
		margin-left: auto;
	}
	
	.action-icon {
		margin-left: 15px;
		position: relative;
	}
	
	.action-icon:active::after {
		content: '';
		position: absolute;
		top: -8px;
		left: -8px;
		right: -8px;
		bottom: -8px;
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 50%;
	}
	
	.load-more {
		padding: 20px 0;
	}
	
	.empty-box {
		padding: 40px 0;
	}
	
	/* 筛选弹出层样式 */
	.filter-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f7f8fa; /* 更柔和的背景色 */
	}
	
	.filter-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}
	
	.filter-title {
		font-size: 16px;
		font-weight: 500;
	}
	
	.filter-content {
		flex: 1;
		padding: 15px;
		overflow-y: auto;
	}
	
	.filter-section {
		margin-bottom: 20px;
	}
	
	.section-title {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 10px;
		color: #333;
	}
	
	.tags-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.tag-item {
		padding: 6px 12px;
		background-color: #f5f5f5;
		border-radius: 15px; /* 更圆润的标签 */
		margin-right: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		border: 1px solid #eeeeee; /* 添加边框 */
	}
	
	.tag-selected {
		background-color: #e6f7ff; /* 蚂蚁蓝系背景 */
		color: #1890ff; /* 蚂蚁蓝色系 */
		border-color: #91d5ff; /* 边框颜色调整 */
	}
	
	.status-container {
		padding: 5px 0;
	}
	
	.date-container {
		display: flex;
		align-items: center;
	}
	
	.date-input {
		flex: 1;
		height: 40px;
		border: 1px solid #eee;
		border-radius: 4px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		background-color: #f5f5f5;
	}
	
	.date-separator {
		margin: 0 10px;
		color: #999;
	}
	
	.filter-footer {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #eee;
	}
	
	.filter-footer .u-button {
		flex: 1;
		margin: 0 5px;
	}
	
	/* 消息弹框样式 */
	.message-modal {
		padding: 16px; /* 增加内边距 */
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16px 16px 0 0; /* 顶部圆角更大 */
	}
	
	.message-modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.message-modal-title {
		font-size: 16px;
		font-weight: 500;
	}
	
	.message-receiver {
		margin-bottom: 10px;
	}
	
	.receiver-label {
		font-size: 14px;
		font-weight: 500;
		color: #333;
	}
	
	.receiver-name {
		font-size: 14px;
		color: #2979ff;
	}
	
	.message-input-area {
		margin-bottom: 10px;
	}
	
	.message-modal-footer {
		display: flex;
		justify-content: space-between;
	}
	
	.message-modal-footer .u-button, .modal-footer .u-button {
		flex: 1;
		margin: 0 5px;
		border-radius: 8px; /* 调整按钮圆角 */
		height: 44px; /* 增加按钮高度，更易点击 */
	}
	
	/* 客户详情弹框样式 */
	.customer-detail-modal {
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
		background-color: #f7f8fa; /* 更改为浅灰色背景 */
		border-radius: 16px 16px 0 0; /* 顶部圆角更大 */
	}
	
	.detail-modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}
	
	.detail-modal-title {
		font-size: 16px;
		font-weight: 500;
	}
	
	.customer-profile {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #eee;
	}
	
	.avatar-area {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
		background-color: #f0f0f0;
	}
	
	.detail-avatar {
		width: 100%;
		height: 100%;
	}
	
	.profile-info {
		flex: 1;
	}
	
	.profile-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 5px;
	}
	
	.profile-tags {
		display: flex;
		flex-wrap: wrap;
	}
	
	.profile-tag {
		font-size: 12px;
		color: #2979ff;
		background-color: #ecf5ff;
		padding: 2px 6px;
		border-radius: 4px;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	
	.active-tag {
		background-color: #e6f7ff; /* 蚂蚁蓝系背景 */
		color: #1890ff; /* 蚂蚁蓝色系 */
	}
	
	.high-value-tag {
		background-color: #fff1f0; /* 淡红色背景 */
		color: #f5222d; /* 中国红色调 */
	}
	
	.total-value {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}
	
	.value-label {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin-right: 5px;
	}
	
	.value-amount {
		font-size: 14px;
		color: #fa541c; /* 朱砂红，符合中国传统色彩 */
		font-weight: bold;
	}
	
	.detail-content {
		flex: 1;
		overflow-y: auto;
		height: 280px;
		margin-bottom: 15px;
		padding: 0 5px;
		-webkit-overflow-scrolling: touch;
	}
	
	.detail-section {
		margin-bottom: 20px;
	}
	
	.info-grid {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 15px; /* 增加内边距 */
		border-radius: 12px; /* 更大的圆角 */
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03); /* 添加微弱阴影 */
	}
	
	.info-item {
		width: 50%;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}
	
	.info-label {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
	}
	
	.info-value {
		font-size: 14px;
		color: #333;
	}
	
	.detail-footer {
		display: flex;
		padding-top: 10px;
		border-top: 1px solid #eee;
		justify-content: space-between;
	}
	
	.footer-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 2px;
		border: 1px solid #e0e0e0;
		border-radius: 8px; /* 更大的圆角 */
		margin: 0 2px;
		flex: 1;
		height: 36px; /* 增加高度 */
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); /* 微弱阴影 */
	}
	
	.button-text {
		font-size: 12px;
		color: #333;
		margin-left: 3px;
	}
	
	.add-follow-btn {
		background-color: #1890ff; /* 蚂蚁蓝，常用于中国互联网产品 */
		color: #fff;
		border: none;
	}
	
	.tags-list {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 15px; /* 增加内边距 */
		border-radius: 12px; /* 更大圆角 */
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03); /* 微弱阴影 */
	}
	
	.tag-item {
		font-size: 12px;
		color: #1890ff; /* 蚂蚁蓝 */
		background-color: #e6f7ff; /* 蚂蚁蓝淡背景 */
		padding: 4px 10px;
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 5px;
		border: 1px solid #91d5ff; /* 添加边框 */
	}
	
	@media screen and (max-width: 480px) {
		.info-grid {
			flex-direction: column;
		}
		
		.info-item {
			width: 100%;
		}
		
		.customer-card {
			padding: 10px;
		}
		
		.avatar-area {
			width: 60px;
			height: 60px;
		}
		
		.detail-content {
			height: 220px;
		}
	}
	
	@media screen and (min-width: 768px) {
		.customer-management-container {
			font-size: 32rpx; /* 平板上增大基础字号 */
		}
		
		.customer-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		
		.customer-card {
			width: calc(50% - 15px);
		}
		
		.customer-detail-modal, .message-modal {
			max-width: 500px;
			margin: 0 auto;
		}
		
		.button-text {
			font-size: 14px;
		}
		
		.section-title {
			font-size: 18px;
		}
		
		.form-label {
			font-size: 16px;
		}
		
		/* 优化标签和筛选区域 */
		.customer-tabs {
			padding: 15px 15px 20px;
		}
		
		.customer-tabs :deep(.u-subsection__item--button) {
			flex: 1;
			text-align: center;
			height: 50px;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.filter-action .u-button {
			height: 80rpx;
			padding: 0 20px;
			font-size: 16px;
		}
		
		.filter-action .u-button :deep(.u-icon) {
			margin-right: 5px;
			transform: scale(1.2);
		}
		
		/* 优化弹窗样式 */
		.message-modal, .customer-detail-modal, .add-customer-modal {
			padding: 20px;
		}
		
		.message-input-area {
			margin-bottom: 20px;
		}
		
		.message-input-area :deep(textarea) {
			height: 180px !important;
			font-size: 16px;
		}
		
		.message-modal-footer .u-button, .modal-footer .u-button {
			height: 50px;
			font-size: 16px;
		}
		
		.tag-item {
			padding: 8px 15px;
			font-size: 14px;
			margin-right: 15px;
			margin-bottom: 15px;
		}
		
		.detail-footer {
			padding-top: 15px;
		}
		
		/* 筛选弹出层优化 */
		.filter-container {
			max-width: 500px;
			margin-left: auto;
		}
		
		.filter-title {
			font-size: 20px;
		}
		
		.filter-content {
			padding: 20px;
		}
		
		.date-input {
			height: 50px;
			font-size: 16px;
		}
		
		/* 表单控件优化 */
		.u-input {
			height: 50px;
		}
		
		.u-input :deep(input) {
			font-size: 16px;
			height: 50px;
		}
		
		.u-checkbox :deep(.u-checkbox__icon-wrap) {
			width: 24px;
			height: 24px;
		}
		
		.u-search {
			height: 80rpx;
		}
		
		.u-search :deep(input) {
			font-size: 16px;
		}
		
		.u-radio :deep(.u-radio__icon-wrap) {
			width: 24px;
			height: 24px;
		}
		
		.u-radio :deep(.u-radio__label) {
			font-size: 16px;
		}
		
		/* 调整按钮间距 */
		.footer-button {
			margin: 0 5px;
		}
		
		/* 调整弹窗大小 */
		.u-popup :deep(.u-popup__content) {
			border-radius: 10px;
		}
		
		/* 调整加载更多区域 */
		.load-more {
			padding: 30px 0;
		}
		
		.u-loadmore :deep(.u-loadmore__content__text) {
			font-size: 16px;
		}
	}
	
	/* 大屏幕适配 */
	@media screen and (min-width: 1024px) {
		.customer-card {
			width: calc(33.33% - 20px);
		}
		
		.customer-detail-modal, .message-modal {
			max-width: 700px;
		}
		
		.detail-content {
			height: 400px;
		}
	}

	/* 添加按钮文字样式 */
	.add-follow-btn .button-text {
		color: #fff;
		font-size: 12px;
	}
	
	/* 中国特色节日色彩样式，可在特定节日应用 */
	.chinese-festival-theme {
		--primary-color: #f5222d; /* 中国红 */
		--secondary-color: #faad14; /* 中国金 */
		--success-color: #a0d911; /* 清新绿 */
		--light-bg: #fff1f0; /* 淡红背景 */
	}
	
	/* 新增支付成功动效 */
	@keyframes successPulse {
		0% {
			box-shadow: 0 0 0 0 rgba(250, 84, 28, 0.4);
		}
		70% {
			box-shadow: 0 0 0 10px rgba(250, 84, 28, 0);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(250, 84, 28, 0);
		}
	}
	
	.payment-success {
		animation: successPulse 1.5s 1;
	}

	/* 新增上拉加载更多过渡动画 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translate3d(0, 30px, 0);
		}
		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
	
	.fade-in-up {
		animation: fadeInUp 0.4s ease-out;
	}
	
	/* 新增点击波纹效果 */
	.ripple {
		position: relative;
		overflow: hidden;
	}
	
	.ripple:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
		background-repeat: no-repeat;
		background-position: 50%;
		transform: scale(10, 10);
		opacity: 0;
		transition: transform .3s, opacity .5s;
	}
	
	.ripple:active:after {
		transform: scale(0, 0);
		opacity: .1;
		transition: 0s;
	}

	/* 新增客户弹框样式 */
	.add-customer-modal {
		padding: 16px; /* 增加内边距 */
		background-color: #fff;
		border-radius: 16px; /* 更大的圆角 */
		box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08); /* 更柔和的阴影效果 */
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f5f5f5; /* 更淡的分隔线 */
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
		color: #323233; /* 符合中国用户审美的深色 */
	}

	.form-item {
		margin-bottom: 15px;
	}

	.form-label {
		font-size: 14px;
		color: #606266; /* 调整颜色为中性灰 */
		margin-bottom: 5px;
		display: block;
	}

	.tags-select {
		display: flex;
		flex-wrap: wrap;
		margin-top: 5px;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		padding-top: 15px;
		border-top: 1px solid #f5f5f5; /* 更淡的分隔线 */
	}

	.modal-footer .u-button {
		margin: 0 5px;
		flex: 1;
		border-radius: 8px; /* 更圆的按钮 */
		height: 44px; /* 更高的按钮 */
	}

	/* 暗黑模式支持 */
	@media (prefers-color-scheme: dark) {
		.customer-management-container {
			background-color: #1a1a1a;
		}
		
		.header, .search-filter-area, .customer-tabs, .customer-card, .detail-modal-header, .info-grid, .tags-list {
			background-color: #222;
		}
		
		.title, .customer-name, .info-value, .detail-modal-title, .profile-name, .section-title {
			color: #fff;
		}
		
		.info-label, .contact-date, .contact-method {
			color: #999;
		}
		
		.card-header, .detail-footer, .customer-profile, .detail-modal-header {
			border-color: #333;
		}
		
		.add-customer-modal, .message-modal {
			background-color: #222;
		}
		
		.u-search {
			background-color: #333;
		}
	}

	/* 平板横屏适配 */
	@media screen and (min-width: 768px) and (orientation: landscape) {
		.customer-list {
			height: calc(100vh - 150px);
		}
		
	.customer-card {
		width: calc(33.33% - 20px);
	}
	
	.detail-content {
		height: 250px;
	}
	
	.customer-detail-modal, .message-modal {
		max-width: 600px;
	}
	}
	
	/* 触摸反馈样式 */
	.tag-item:active {
		opacity: 0.7;
	}
	
	.tag-selected:active {
		opacity: 0.8;
	}
	
	.footer-button:active {
		opacity: 0.8;
	}
	
	/* 增强过渡动画效果 */
	.customer-card, .footer-button, .tag-item, .filter-action .u-button,
	.message-modal-footer .u-button, .modal-footer .u-button {
		transition: all 0.2s ease-out;
	}
	
	/* 针对平板的触摸优化 */
	@media (pointer: coarse) {
		.footer-button, .action-icon, .tag-item, .u-button {
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
		}
		
		.back-icon, .close-icon {
			min-width: 44px;
			min-height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	/* 价值等级样式优化，使用中国传统色彩 */
	.customer-level-high {
		color: #f5222d; /* 中国红 */
	}

	.customer-level-medium {
		color: #fa8c16; /* 橙色 */
	}

	.customer-level-normal {
		color: #52c41a; /* 翠绿 */
	}
</style> 
 