<template>
	<view class="page">
		<!-- #ifdef APP -->
		<statusBar></statusBar>
		<!-- #endif -->
		
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:statusBar="true" 
			title="AI销管系统" 
			leftIcon="left" 
			@clickLeft="goBack"
			color="#333"
			backgroundColor="#FFFFFF">
		</uni-nav-bar>
		
		<view class="content">
			<!-- 标签页 -->
			<view class="tabs">
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'service' }"
					@click="switchTab('service')">
					<text>服务记录</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'customer' }"
					@click="switchTab('customer')">
					<text>客户</text>
				</view>
			</view>
			
			<!-- 服务记录列表 -->
			<ServiceList 
				v-if="activeTab === 'service'"
				:list="serviceList"
				@itemClick="viewDetail"
				@filterClick="toggleFilter" />
			
			<!-- 客户列表 -->
			<CustomerList 
				v-if="activeTab === 'customer'"
				:list="customerList"
				@itemClick="viewCustomerDetail" />
		</view>
		
		<!-- 客户档案弹窗 -->
		<CustomerProfileModal 
			ref="customerProfileModal"
			:profile="currentCustomerProfile"
			@close="onCustomerProfileClose" />
		
		<!-- 服务记录详情弹窗 -->
		<ServiceDetailModal 
			ref="serviceDetailModal"
			:serviceDetail="currentServiceDetail"
			:summaryList="summaryList"
			:performanceData="performanceData"
			@close="onServiceDetailClose"
			@viewCustomer="onViewCustomerFromService" />
	</view>
</template>

<script>
	// #ifdef APP
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	// #endif
	import CustomerList from './components/CustomerList.vue';
	import ServiceList from './components/ServiceList.vue';
	import CustomerProfileModal from './components/CustomerProfileModal.vue';
	import { initCustomerProfile, initSummaryList, initPerformanceData } from './utils/dataInit.js';
	
	export default {
		// #ifdef APP
		components: {
			statusBar
		},
		// #endif
		components: {
			CustomerList,
			ServiceList,
			CustomerProfileModal
		},
		data() {
			return {
				activeTab: 'customer',
				showValidOnly: false,
				currentServiceDetail: {
					title: '',
					date: '',
					duration: '',
					description: '',
					customerName: ''
				},
				currentCustomerProfile: {
					name: '',
					intent: '',
					serviceCount: 0,
					lastService: '',
					phone: '',
					serviceStaff: '',
					wechatStatus: '',
					address: '',
					source: '',
					followStage: '',
					systemTags: [],
					customTags: [],
					intentDescription: ''
				},
				summaryList: [],
				performanceData: {
					totalScore: 81,
					categories: []
				},
				serviceList: [
					{
						title: '三多的服务记录',
						date: '2025-08-17 16:01:04',
						duration: '6分39秒',
						description: '客户为三口之家新房装修，偏好简约现代风格，注重环保和安全，对整体搭配和交付周期敏感，预算约45000，关注活动优惠和售后服务。',
						customerName: '李女士'
					},
					{
						title: '沈易的服务记录',
						date: '2025-09-09 13:54:42',
						duration: '36分14秒',
						description: '客户为四层别墅新房装修，关注真皮、高脚、舒适靠背的床和沙发，偏好灰色和咖啡色系，倾向于购买整屋套餐以获得更大折扣，决策期预计在12月前。',
						customerName: '吴女士'
					},
					{
						title: '服务记录',
						date: '2025-09-09 13:54:24',
						duration: '50分56秒',
						description: '客户为新房装修夫妻关注沙发与床垫的舒活性及健康支撑偏好，注重材质环保性和使用寿命，预算约60000，希望获得专业建议和定制方案。',
						customerName: '张先生'
					}
				],
				customerList: [
					{
						name: '李女士',
						intent: '高',
						serviceStaff: '三多',
						serviceCount: 3,
						lastService: '2025-09-10',
						tags: [
							{ text: '关注优惠活动', color: 'orange' },
							{ text: '关注颜色搭配', color: 'orange' },
							{ text: '夫妻两一起来', color: 'orange' },
							{ text: '新房装修', color: 'blue' },
							{ text: '客厅,卧室', color: 'blue' }
						],
						phone: '185****3677'
					},
					{
						name: '彭总',
						intent: '高',
						serviceStaff: '沈易',
						serviceCount: 3,
						lastService: '2526-09-16',
						tags: [
							{ text: '新房装修', color: 'blue' },
							{ text: '餐厅,客厅,卧室,定制', color: 'blue' },
							{ text: '沙发,床,床垫,茶几,餐桌', color: 'blue' },
							{ text: '关注产品颜值', color: 'blue' }
						],
						budget: '预算2万-3万'
					},
					{
						name: '吴女士',
						intent: '中',
						serviceStaff: '沈易',
						serviceCount: 3,
						lastService: '2025-08-30',
						tags: [
							{ text: '新房装修', color: 'blue' },
							{ text: '客厅,卧室,定制', color: 'blue' }
						]
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			switchTab(tab) {
				this.activeTab = tab;
			},
			toggleFilter() {
				this.showValidOnly = !this.showValidOnly;
			},
			viewDetail(item) {
				this.currentServiceDetail = { ...item };
				this.summaryList = initSummaryList(item);
				this.performanceData = initPerformanceData();
				this.$refs.serviceDetailModal.open();
			},
			viewCustomerDetail(item) {
				this.currentCustomerProfile = initCustomerProfile(item);
				this.$refs.customerProfileModal.open();
			},
			onCustomerProfileClose() {
				// 客户档案关闭回调
			},
			onServiceDetailClose() {
				// 服务记录详情关闭回调
			},
			onViewCustomerFromService() {
				// 从服务记录跳转到客户
				this.$refs.serviceDetailModal.close();
				this.switchTab('customer');
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	
	.page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	.content {
		padding-top: 88rpx;
	}
	
	/* 标签页 */
	.tabs {
		display: flex;
		background-color: #FFFFFF;
		border-bottom: 1px solid #E0E0E0;
		padding: 0 32rpx;
	}
	
	.tab-item {
		padding: 24rpx 32rpx;
		position: relative;
	}
	
	.tab-item text {
		font-size: 30rpx;
		color: #666;
	}
	
	.tab-item.active text {
		color: #333;
		font-weight: 500;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 32rpx;
		right: 32rpx;
		height: 4rpx;
		background-color: #007AFF;
		border-radius: 2rpx;
	}
</style>

