rtliveCompany/pages_task/createTask.vue

<template>
	<view class="container">
		<Watermark  />
		<Step :step="currentStep" :stepsData="currentText" />
		<scroll-view class="content" scroll-y>
			<!-- 驳回意见提示 -->
			<view class="rejection-banner" v-if="rejectionInfo">
				<view class="rejection-icon">✕</view>
				<view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
			</view>

			<!-- 基本信息 -->
			<view class="form-section">
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务归属</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.deptId }"
						@click="showPicker('任务归属', companyData)">
						{{ institutionDisplayText || '请选择任务归属' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属项目</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.projectId }"
						@click="showPicker('归属项目', companyList)">
						{{ belongingProjectDisplayText || '请选择归属项目' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>业务员</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.companyUserId }"
						@click="showPicker('业务员',userList)">
						{{ salesmanDisplayText || '请选择业务员' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view> -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>产品代码</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.productId }"
						@click="showPicker('产品代码', productList)">
						{{ productNameDisplayText || '请选择产品代码' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>费用分摊</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.costShareId }"
						@click="showPicker('费用分摊', companyData)">
						{{ costAllocationDisplayText || '请选择费用分摊主体' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text>添加任务备注</text>
					</view>
					<EvanSwitch v-model="formData.addRemark"></EvanSwitch>
				</view>
				<view class="form-item" v-if="formData.addRemark">
					<textarea class="form-textarea" v-model="formData.remark" placeholder="请输入任务备注" rows="4"></textarea>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属类型</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.belongType }"
						@click="showPicker('归属类型', dictTypeColumns)">
						{{ belongTypeDisplayText || '请选择归属类型' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务类型</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.taskType }"
						@click="showPicker('任务类型', taskTypeColumns)">
						{{ taskTypeDisplayText || '请选择任务类型' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>
				<!-- 任务类型目标 - 公开课和问卷调查使用选项列表 -->
				<view class="form-item"
					v-if="formData.taskType === '1' || formData.taskType === '9'">
					<view class="form-label">
						<view class="form-option" :class="{ 'selected': item.id == formData.targetId }"
							v-for="(item, index) in selectionList" :key="index" @click="selectOption(item)">{{
								item.title
							}}</view>
					</view>
				</view>
				
				<!-- 任务类型目标 - 用药调研使用弹出选择器 -->
				<view class="form-item"
					v-if="formData.taskType === '8'">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务类型目标</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.targetId }"
						@click="showPicker('任务类型目标', selectionList)">
						{{ formData.targetDisplayText || '请选择任务类型目标' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>


				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划开始时间</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.planStartTime }"
						@click="showStartTimePicker = true">
						{{ formData.planStartTime || '请选择计划开始时间' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划结束时间</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.planEndTime }"
						@click="showEndTimePicker = true">
						{{ formData.planEndTime || '请选择计划结束时间' }}
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="next-button" @click="toNext">下一步</view>
		<u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="confirm" @cancel="cancel">
		</u-picker>

		<u-datetime-picker :show="showStartTimePicker" v-model="startTimeValue" mode="datetime" confirmColor='#576B95'
			@confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false">
		</u-datetime-picker>

		<u-datetime-picker :show="showEndTimePicker" v-model="endTimeValue" mode="datetime" confirmColor='#576B95'
			@confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false">
		</u-datetime-picker>

		<u-popup :show="showBelongingPopup" mode="bottom" round="20" @close="closePopup" closeable>
			<view class="popup-content p32">
				<view class="popup-header">
					<text class="title">归属项目</text>
				</view>

				<view class="search-box">
					<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/search.png">
					</image>
					<u-input v-model="searchKeyword" placeholder="请输入归属项目" border="none" clearable />
				</view>

				<scroll-view scroll-y class="project-list">
					<view v-for="(project, index) in filteredProjects" :key="index" class="project-item"
						:class="{ active: selectedIndex === index }" @tap="selectProject(project, index)">
						<text class="project-name">{{ project.name }}</text>
						<image class="icon"
							src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_right.png"></image>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup :show="showTaskPopup" mode="bottom" round="16" @close="showTaskPopup = false" safeAreaInsetBottom>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">任务归属</text>
					<image class="close-icon"
						src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_cross.png"
						@click="showTaskPopup = false"></image>
				</view>
				<view class="two-level-container">
					<scroll-view class="primary-list" scroll-y>
						<view v-for="(item, index) in primaryOptions" :key="index" class="primary-item"
							:class="{ 'primary-active': activePrimaryIndex === index }"
							@click="handlePrimarySelect(index)">
							<text class="primary-text">{{ item.name }}</text>
						</view>
					</scroll-view>

					<scroll-view class="secondary-list" scroll-y>
						<view v-for="(subItem, subIndex) in currentSecondaryOptions" :key="subIndex"
							class="secondary-item" :class="{ 'secondary-active': selectedSecondaryItem === subItem }"
							@click="handleSecondarySelect(subItem)">
							<text class="secondary-text">{{ subItem }}</text>
							<u-icon v-if="selectedSecondaryItem === subItem" name="checkbox-mark" color="#2979ff"
								size="20" />
						</view>
					</scroll-view>
				</view>

				<view class="popup-footer">
					<button class="confirm-btn" @click="handleConfirm">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	companyUserList
} from '@/api/task.js';
import {
	getProjectTypeList,
	company,
	getAllData, //获取项目所有数据
	queryAllProduct, //获取公司所有产品
	queryAllData, //获取任务类型
	getTaskLiveList, //获取公开课选项
	getDrugResearchList, //获取用药调研选项
	getSurveyTaskList //获取问卷调查选项
} from '@/api/task.js';
import utils from '@/utils/common.js'
import Step from '@/pages_task/components/step.vue'
import EvanSwitch from '@/components/evan-switch.vue'
export default {
	components: {
		Step,
		EvanSwitch
	},
	data() {
			return {
				taskTypeDict: [], //任务类型字典
				taskType: [], //任务类型
				taskTypeOriginalData: [], //任务类型原始数据（包含dictLabel和dictValue）
				companyList: [], //归属项目
				projectData: [], //项目数据（持久化存储）
				productList: [], //产品列表
				companyData: [],
				userInfo: {},
				showTaskPopup: false,
				primaryOptions: [{
					id: 1,
					name: '中药事业部',
					children: ['中药一部', '中药二部', '中药三部', '中药四部']
				},
				{
					id: 2,
					name: '事业1组',
					children: ['事业1组-项目部', '事业1组-市场部', '事业1组-技术部']
				},

				],
				activePrimaryIndex: 0,
				currentSecondaryOptions: [],
				selectedSecondaryItem: '',
				selectedPrimaryItem: null,
				selectedIndex: -1,
				selectedProject: null,
				belongingprojects: [{
					name: '学术交流项目'
				},
				{
					name: '科学调研项目'
				},
				{
					name: '2026年1月医学研究项目'
				},
				{
					name: '2026年2月医学研究项目'
				},
				{
					name: '2026年3月医学研究项目'
				}
				],
				searchKeyword: '',
				showBelongingPopup: false,
				showPickerVisible: false,
				costColumns: [
					['主体1', '主体2', '主体3'],
				],
				taskTypeColumns: [
					// ['类型1', '类型2', '类型3'],
				],
				currentStep: 1,
				currentText: [{
					id: 1,
					stepNumber: 1,
					title: '填写任务'
				},
				{
					id: 2,
					stepNumber: 2,
					title: '选择客户'
				},
				{
					id: 3,
					stepNumber: 3,
					title: '积分设置'
				}
				],
				rejectionInfo: '',
				formData: {
					costShareId: '',
					planStartTime: '',
					planEndTime: '',
					belongType: '',
					deptId: '',
					projectId: '',
					productId: '',
					taskType: '',
					targetId: '',
					taskTypeId: '',
					// companyUserId: '',
					addRemark: false,
					remark: '',
					taskTypeDisplayText: '',
					belongTypeDisplayText: ''

				},
				selectedType: null,
				originalCompanyData: null,
				pickerTitle: '默认标题',
				pickerData: [],
				companyId: '',
				showStartTimePicker: false,
				showEndTimePicker: false,
				startTimeValue: Date.now(), // 使用时间戳而不是Date对象
				endTimeValue: Date.now(), // 使用时间戳而不是Date对象
				selectionList: [], //任务类型选项

			}
	},

	onLoad: async function (options) {
		try {
			this.taskTypeDict = await utils.getDicts("task_type"); //任务类型
			this.belongTypeList = await utils.getDicts("task_belong_type"); //归属类型

		} catch (e) {
			console.log('获取字典数据失败:', e)
		}


		this.userInfo = uni.getStorageSync("userInfo") || ''
		if (options.rejectionInfo) {
			this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
		}
		// 获取用户信息
		// 加载信息
		this.companyId = this.userInfo.companyId || 1
		// 设置默认日期为当天
		// this.formData.planStartTime = this.formatDateTime(new Date());
		// this.formData.planEndTime = this.formatDateTime(new Date());
		console.log('this.userInfo.companyId:', this.userInfo.companyId)
		this.getTaskLiveList()//获取公开课选项

	},

	computed: {
		taskTypeDisplayText() {
			console.log('计算taskTypeDisplayText, formData.taskType:', this.formData.taskType);
			console.log('计算taskTypeDisplayText, taskTypeOriginalData:', this.taskTypeOriginalData);
			if (!this.formData.taskType || !this.taskTypeOriginalData) {
				return '';
			}
			const selectedType = this.taskTypeOriginalData.find(item => item.dictValue === this.formData.taskType);
			console.log('找到的selectedType:', selectedType);
			return selectedType ? selectedType.dictLabel : '';
		},
		institutionDisplayText() {
			if (!this.formData.deptId || !this.companyData) {
				return '';
			}
			const selectedItem = this.companyData.find(item => item.deptId === this.formData.deptId);
			return selectedItem ? selectedItem.deptName : '';
		},
		costAllocationDisplayText() {
			if (!this.formData.costShareId || !this.companyData) {
				return '';
			}
			const selectedItem = this.companyData.find(item => item.deptId === this.formData.costShareId);
			return selectedItem ? selectedItem.deptName : '';
		},
		belongingProjectDisplayText() {
			console.log('计算belongingProjectDisplayText:', this.formData.projectId, this.projectData);
			if (!this.formData.projectId || !this.projectData) {
				console.log('formData.projectId或projectData为空');
				return '';
			}
			const selectedItem = this.projectData.find(item => item.id === this.formData.projectId);
			console.log('找到的项目:', selectedItem);
			return selectedItem ? selectedItem.projectName : '';
		},
		productNameDisplayText() {
			if (!this.formData.productId || !this.productList) {
				return '';
			}
			const selectedItem = this.productList.find(item => item.id === this.formData.productId);
			return selectedItem ? selectedItem.productName : '';
		},
		belongTypeDisplayText() {
			if (!this.formData.belongType || !this.belongTypeList) {
				return '';
			}
			const selectedItem = this.belongTypeList.find(item => item.dictValue === this.formData.belongType);
			return selectedItem ? selectedItem.dictLabel : '';
		},
		// salesmanDisplayText() {
		// 	if (!this.formData.companyUserId || !this.userList) {
		// 		return '';
		// 	}
		// 	const selectedItem = this.userList.find(item => item.userId === this.formData.companyUserId);
		// 	return selectedItem ? selectedItem.nickName : '';
		// }
	},
	methods: {
		selectOption(item) {
			this.formData.targetId = item.id
		},
		// 获取用药调研选项
		getDrugResearchList() {
			getDrugResearchList(this.userInfo.companyId).then(res => {
				if (res.code === 200) {
					console.log('获取用药调研选项:', res)
					this.selectionList = res.data.rows || []
				}
			})
		},
		// 获取问卷调查选项
		getSurveyTaskList() {
			getSurveyTaskList(this.userInfo.companyId).then(res => {
				if (res.code === 200) {
					console.log('获取问卷调查选项:', res)
					this.selectionList = res.data.rows || []
				}
			})
		},
		// 获取公开课选项
		getTaskLiveList() {
			getTaskLiveList(this.userInfo.companyId).then(res => {
				if (res.code === 200) {
					console.log('获取公开课选项:', res)
					this.selectionList = res.rows || []
				}
			})
		},
		getProjectTypeList() {
			let params = {
				companyId: this.userInfo.companyId || '',
				// projectId: this.formData.projectId || '',
				deptId: this.formData.deptId || '',
			}
			return getProjectTypeList(params).then(res => {
				if (res.code === 200) {
					const rows = Array.isArray(res.rows) ? res.rows : []
					const first = rows[0] || {}
					const idSet = new Set()
					String(first.taskTypeIds || '').split(',').forEach(id => {
						const t = String(id || '').trim()
						if (t) idSet.add(t)
					})

					const filtered = (this.taskTypeDict || []).filter(d => idSet.has(String(d.dictValue)))
					this.taskTypeOriginalData = filtered
					this.taskTypeColumns = [filtered.map(d => d.dictLabel)]
				}
			})
		},


		//公司下的用户列表
		async companyUserList() {
			return new Promise((resolve, reject) => {
				let data = {
					companyId: this.userInfo.companyId || '',
				}
				companyUserList(data).then(res => {
					if (res.code === 200) {
						// 处理公司所有产品数据
						this.userList = res.rows || []
						console.log('company接口返回数据:', res)

					}
					resolve(res);
				}).catch(err => {
					console.error('获取公司下的用户列表失败：', err);
					reject(err);
				});
			});
		},
		//任务类型
		queryAllData() {
			return new Promise((resolve, reject) => {
				if (!this.formData.productId) {
					uni.showToast({
						title: '请先选择产品',
						icon: 'none'
					})
					resolve();
					return
				}
				let data = {
					companyId: this.userInfo.companyId || '',
					deptId: this.formData.deptId || '',
					productId: this.formData.productId || '',

				}
				queryAllData(data).then(res => {
					if (res.code === 200) {
						// 处理任务类型
						this.taskType = res.data || []
						console.log('company接口返回数据:', res)

						// 处理taskTypeIds，获取对应的字典数据
						if (res.data && res.data.length > 0) {
							const firstData = res.data[0];
							if (firstData.taskTypeIds) {
								// 分割taskTypeIds为数组
								const taskTypeIdsArray = firstData.taskTypeIds.split(',');
								// 从字典表中筛选出对应的项
								const filteredTaskTypes = this.taskTypeDict.filter(item =>
									taskTypeIdsArray.includes(item.dictValue)
								);
								// 保存原始数据（包含dictLabel和dictValue）
								this.taskTypeOriginalData = filteredTaskTypes;
								// 提取dictLabel并放到taskTypeColumns中
								const taskTypeLabels = filteredTaskTypes.map(item => item.dictLabel);
								this.taskTypeColumns = [taskTypeLabels];
								console.log('处理后的taskTypeColumns:', this.taskTypeColumns);
								console.log('任务类型原始数据:', this.taskTypeOriginalData);
							}
						}
					}
					resolve(res);
				}).catch(err => {
					console.error('获取任务类型失败：', err);
					reject(err);
				});
			});
		},

		//获取公司所有产品
		async queryAllProduct() {
			return new Promise((resolve, reject) => {
				let data = {
					companyId: this.userInfo.companyId || '',
					projectId: this.formData.projectId
				}
				queryAllProduct(data).then(res => {
					if (res.code === 200) {
						// 处理公司所有产品数据
						this.productList = res.data || []
						console.log('company接口返回数据:', res)
					}
					resolve(res);
				}).catch(err => {
					console.error('获取公司所有产品失败：', err);
					reject(err);
				});
			});
		},
		// 归属项目
		async getAllData() {
			return new Promise((resolve, reject) => {
				let data = {
					companyId: this.userInfo.companyId || '',
					deptId: this.userInfo.deptId || '',
					productCode: this.userInfo.productCode || ''
				}
				getAllData(data).then(res => {
					if (res.code === 200) {
						// 处理公司项目设置列表数据
						this.companyList = res.data || []
						// 保存项目数据用于显示
						this.projectData = res.data || []

						console.log('company接口返回数据:', res)
						console.log('companyList数据结构:', this.companyList)
					}
					resolve(res);
				}).catch(err => {
					console.error('获取公司项目设置失败：', err);
					reject(err);
				});
			});
		},

		async company() {
			return new Promise((resolve, reject) => {
				try {
					uni.showLoading({
						title: '加载中...'
					})
					// 调用company接口获取公司项目设置列表
					// this.companyId

					company(this.userInfo.companyId).then(companyRes => {
						uni.hideLoading()
						if (companyRes.code === 200) {
							// 处理公司项目设置列表数据
							this.companyData = companyRes.data || []

							console.log('company接口返回数据:', companyRes)
							// 这里可以根据接口返回的数据进行页面初始化，比如填充项目列表
						}
						resolve(companyRes);
					}).catch(e => {
						uni.hideLoading()
						console.error('加载信息失败', e)
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
						reject(e);
					});
				} catch (e) {
					uni.hideLoading()
					console.error('加载信息失败', e)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
					reject(e);
				}
			});
		},
		submitInfo() {
			info(this.userInfo.companyId).then(res => {
				if (res.code === 200) {
					console.log('公司项目设置：', res.data);
					// 处理公司项目设置数据
				}
			}).catch(err => {
				console.error('获取公司项目设置失败：', err);
			});
		},
		handlePrimarySelect(index) {
			this.activePrimaryIndex = index;
			this.currentSecondaryOptions = this.primaryOptions[index].children || [];
			this.selectedSecondaryItem = '';
		},
		handleSecondarySelect(item) {
			this.selectedSecondaryItem = item;
			this.selectedPrimaryItem = this.primaryOptions[this.activePrimaryIndex];
		},
		handleConfirm() {
			if (this.selectedSecondaryItem) {
				const displayText = `${this.selectedPrimaryItem.name} > ${this.selectedSecondaryItem}`;
				this.formData.belongType = displayText;
				this.showTaskPopup = false;
			} else {
				uni.showToast({
					title: '请选择二级部门',
					icon: 'none'
				});
			}
		},
		closePopup() {
			this.showBelongingPopup = false;
			this.searchKeyword = '';
			this.selectedIndex = -1;
		},
		selectProject(project, index) {
			this.selectedIndex = index;
			this.selectedProject = project;
			this.formData.belongingProject = project.name;
			setTimeout(() => {
				this.showBelongingPopup = false;
				this.searchKeyword = '';
				this.selectedIndex = -1;
			}, 300);
		},
		async showPicker(title, data) {
			// 根据不同的title调用对应的请求方法
			if (title === '任务归属' || title === '费用分摊') {
				// 调用company()获取任务归属和费用分摊数据
				await this.company();
				data = this.companyData;

			} else if (title === '归属项目') {
				// 调用getAllData()获取归属项目数据
				await this.getAllData();
				data = this.companyList;
				console.log('归属项目数据:', data);
			} else if (title === '产品代码') {
				// 调用queryAllProduct()获取产品代码数据
				await this.queryAllProduct();
				data = this.productList;
			} else if (title === '任务类型') {
				// queryAllData()获取任务类型数据
				// await this.queryAllData();
				await this.getProjectTypeList();
				// 使用处理后的taskTypeColumns作为数据
				data = this.taskTypeColumns;
				console.log('任务类型数据:', data);
			} else if (title === '任务类型目标') {
				// 任务类型目标数据使用传入的selectionList
				console.log('任务类型目标数据:', data);
			} else if (title === '归属类型') {
				// 归属类型数据已经在onLoad中获取
				data = this.belongTypeList;
				console.log('归属类型数据:', data);
			} else if (title === '业务员') {
				// 调用companyUserList()获取业务员数据
				await this.companyUserList();
				data = this.userList;
				console.log('业务员数据:', data);
			}

			// 处理任务归属和费用分摊数据，将deptStr作为显示文本
			if ((title === '任务归属' || title === '费用分摊') && data && data.length > 0) {
				// 转换为picker需要的格式
				this.pickerData = [data.map(item => item.deptName)]
				// 保存原始数据，用于后续获取deptId
				this.originalCompanyData = data
			} else if (title === '归属项目' && data && data.length > 0) {
				// 处理归属项目数据，将projectName作为显示文本
				this.pickerData = [data.map(item => item.projectName)]
				// 保存原始数据，用于后续获取productId
				this.originalCompanyData = data


			} else if (title === '产品代码' && data && data.length > 0) {
				// 处理产品代码数据，将productName作为显示文本
				this.pickerData = [data.map(item => item.productName)]
				// 保存原始数据，用于后续获取productCode
				this.originalCompanyData = data
			} else if (title === '归属类型' && data && data.length > 0) {
				// 处理归属类型数据，将dictLabel作为显示文本
				this.pickerData = [data.map(item => item.dictLabel)]
				// 保存原始数据，用于后续获取dictType
				this.originalCompanyData = data
			} else if (title === '业务员' && data && data.length > 0) {
				// 处理业务员数据，将nickName作为显示文本
				this.pickerData = [data.map(item => item.nickName)]
				// 保存原始数据，用于后续获取userId
				this.originalCompanyData = data
			} else if (title === '任务类型目标' && data && data.length > 0) {
				// 处理任务类型目标数据，将title作为显示文本
				this.pickerData = [data.map(item => item.title)]
				// 保存原始数据，用于后续获取id
				this.originalCompanyData = data
			} else {
				this.pickerData = data
				this.originalCompanyData = null
			}
			this.pickerTitle = title
			console.log('打开picker, pickerTitle:', this.pickerTitle);
			console.log('pickerData:', this.pickerData);
			this.showPickerVisible = true
		},
		confirm(e) {
			console.log('confirm事件返回值:', e);
			console.log('pickerTitle:', this.pickerTitle);
			console.log('e.value:', e.value);
			if (e.value && e.value.length > 0) {
				if (this.pickerTitle === '费用分摊') {
					// e.value[0]是选中的文本值（deptName）
					const selectedDeptStr = e.value[0];
					console.log('选中的费用分摊文本:', selectedDeptStr);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.deptName === selectedDeptStr);
					if (selectedItem) {
						// 保存deptId到表单（存储id值）
						this.formData.costShareId = selectedItem.deptId;
						console.log('设置formData.costShareId为:', selectedItem.deptId);
					} else {
						this.formData.costShareId = '';
						console.log('未找到对应的费用分摊');
					}
				} else if (this.pickerTitle === '任务类型') {
					// e.value[0]是选中的文本值（dictLabel）
					const selectedLabel = e.value[0];
					console.log('选中的任务类型文本:', selectedLabel);
					console.log('taskTypeOriginalData:', this.taskTypeOriginalData);
					// 从taskTypeOriginalData中找到对应的项
					const selectedType = this.taskTypeOriginalData.find(item => item.dictLabel === selectedLabel);
					if (selectedType) {
						// 从this.taskType中找到与当前项目匹配的配置对象

						this.formData.taskType = selectedType.dictValue;
						this.formData.taskTypeId = selectedType.dictValue || '';
						this.formData.taskTypeDisplayText = this.taskTypeDisplayText;
						if (selectedType.dictValue === '9') {
							this.getSurveyTaskList();//问卷调查
						} else if (selectedType.dictValue === '8') {
							this.getDrugResearchList();//用药调研
						} else if (selectedType.dictValue === '1') {
							this.getTaskLiveList();//公开课
						}
						this.selectedType = selectedType;

					} else { }
				} else if (this.pickerTitle === '任务归属' && this.originalCompanyData) {
					// e.value[0]是选中的文本值（deptName）
					const selectedDeptStr = e.value[0];
					console.log('选中的任务归属文本:', selectedDeptStr);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.deptName === selectedDeptStr);
					if (selectedItem) {
						// 保存deptId到表单（存储id值）
						this.formData.deptId = selectedItem.deptId;
						console.log('设置formData.deptId为:', selectedItem.deptId);
					} else { }
				} else if (this.pickerTitle === '归属项目' && this.originalCompanyData) {
					// e.value[0]是选中的文本值（projectName）
					const selectedProjectName = e.value[0];
					console.log('选中的归属项目文本:', selectedProjectName);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.projectName ===
						selectedProjectName);
					if (selectedItem) {
						// 保存id到表单（存储id值）
						this.formData.projectId = selectedItem.id;
						// 保存productId到表单
						this.formData.productId = selectedItem.productId;
						this.formData.belongTypeDisplayText = this.belongingProjectDisplayText;
						console.log('设置formData.projectId为:', selectedItem.id);
					} else { }
				} else if (this.pickerTitle === '产品代码' && this.originalCompanyData) {
					// e.value[0]是选中的文本值（productName）
					const selectedProductName = e.value[0];
					console.log('选中的产品代码文本:', selectedProductName);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.productName ===
						selectedProductName);
					if (selectedItem) {
						// 保存id到表单
						this.formData.productId = selectedItem.id;
						// 保存id用于获取任务类型
						console.log('设置formData.productId为:', selectedItem.id);
					} else {

					}
				} else if (this.pickerTitle === '归属类型' && this.originalCompanyData) {
					// e.value[0]是选中的文本值（dictLabel）
					const selectedLabel = e.value[0];
					console.log('选中的归属类型文本:', selectedLabel);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.dictLabel === selectedLabel);
					if (selectedItem) {
						// 保存dictValue到表单的belongType字段
						this.formData.belongType = selectedItem.dictValue;
						console.log('设置formData.belongType为:', selectedItem.dictValue);
					} else {
						console.log('未找到对应的归属类型');
					}
				} else if (this.pickerTitle === '任务类型目标' && this.originalCompanyData) {
					// e.value[0]是选中的文本值（title）
					const selectedTitle = e.value[0];
					console.log('选中的任务类型目标文本:', selectedTitle);
					console.log('originalCompanyData:', this.originalCompanyData);
					// 从originalCompanyData中找到对应的项
					const selectedItem = this.originalCompanyData.find(item => item.title === selectedTitle);
					if (selectedItem) {
						// 保存id到表单的targetId字段
						this.formData.targetId = selectedItem.id;
						// 保存显示文本
						this.formData.targetDisplayText = selectedTitle;
						console.log('设置formData.targetId为:', selectedItem.id);
					} else {
						console.log('未找到对应的任务类型目标');
					}
				}
				//  else if (this.pickerTitle === '业务员' && this.originalCompanyData) {
				// 	// e.value[0]是选中的文本值（nickName）
				// 	const selectedUserName = e.value[0];
				// 	console.log('选中的业务员文本:', selectedUserName);
				// 	console.log('originalCompanyData:', this.originalCompanyData);
				// 	// 从originalCompanyData中找到对应的项
				// 	const selectedItem = this.originalCompanyData.find(item => item.nickName === selectedUserName);
				// 	if (selectedItem) {
				// 		// 保存userId到表单的companyUserId字段
				// 		this.formData.companyUserId = selectedItem.userId;
				// 		console.log('设置formData.companyUserId为:', selectedItem.userId);
				// 	} else {
				// 		console.log('未找到对应的业务员');
				// 	}
				// }
			}
			this.showPickerVisible = false
		},
		cancel() {
			this.showPickerVisible = false
		},
		toNext() {
			// 表单验证
			if (!this.formData.deptId) {
				uni.showToast({
					title: '请选择任务归属',
					icon: 'none'
				})
				return
			}
			if (!this.formData.projectId) {
				uni.showToast({
					title: '请选择归属项目',
					icon: 'none'
				})
				return
			}
			if (!this.formData.productId) {
				uni.showToast({
					title: '请选择产品代码',
					icon: 'none'
				})
				return
			}
			if (!this.formData.costShareId) {
				uni.showToast({
					title: '请选择费用分摊',
					icon: 'none'
				})
				return
			}
			if (!this.formData.belongType) {
				uni.showToast({
					title: '请选择归属类型',
					icon: 'none'
				})
				return
			}
			if (!this.formData.taskType) {
				uni.showToast({
					title: '请选择任务类型',
					icon: 'none'
				})
				return
			}
			if (!this.formData.targetId && ['1', '8', '9'].includes(this.selectedType.dictValue)) {
				uni.showToast({
					title: '请选择任务类型目标',
					icon: 'none'
				})
				return
			}
			if (!this.formData.planStartTime) {
				uni.showToast({
					title: '请选择计划开始时间',
					icon: 'none'
				})
				return
			}
			if (!this.formData.planEndTime) {
				uni.showToast({
					title: '请选择计划结束时间',
					icon: 'none'
				})
				return
			}
			
			// 验证计划开始时间不能晚于计划结束时间
			const startTime = new Date(this.formData.planStartTime);
			const endTime = new Date(this.formData.planEndTime);
			if (startTime > endTime) {
				uni.showToast({
					title: '计划开始时间不能晚于计划结束时间',
					icon: 'none'
				})
				return
			}
			// 如果开启了任务备注，则备注为必填
			if (this.formData.addRemark && !this.formData.remark) {
				uni.showToast({
					title: '请输入任务备注',
					icon: 'none'
				})
				return
			}
			// 保存任务表单数据到本地存储
			uni.setStorageSync('taskFormData', JSON.stringify(this.formData))
			uni.navigateTo({
				url: '/pages_task/selectCustomer'
			})
		},
		onStartTimeConfirm(e) {
			this.formData.planStartTime = this.formatDateTime(e.value);
			this.showStartTimePicker = false;
		},
		onEndTimeConfirm(e) {
			const endTime = new Date(e.value);
			const startTime = new Date(this.formData.planStartTime);

			if (this.formData.planStartTime && endTime < startTime) {
				uni.showToast({
					title: '计划结束时间不能早于开始时间',
					icon: 'none'
				});
				return;
			}

			this.formData.planEndTime = this.formatDateTime(e.value);
			this.showEndTimePicker = false;
		},
		formatDateTime(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		openStartTimePicker() {
			// 重置开始时间为当前时间（使用时间戳）
			this.startTimeValue = Date.now();
			this.showStartTimePicker = true;
		},
		openEndTimePicker() {
			// 重置结束时间为当前时间（使用时间戳）
			this.endTimeValue = Date.now();
			this.showEndTimePicker = true;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #F7F8FA;
	display: flex;
	flex-direction: column;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 544rpx;
		background: linear-gradient(180deg, #E4EFFE 0%, rgba(228, 239, 254, 0) 100%);
	}

	.content {
		flex: 1;
		box-sizing: border-box;

		.rejection-banner {
			display: flex;
			align-items: center;
			padding: 24rpx;
			background: #FF5030;
			color: #fff;
			margin: 24rpx;
			border-radius: 8rpx;

			.rejection-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-right: 16rpx;
			}

			.rejection-text {
				flex: 1;
				font-size: 28rpx;
				line-height: 1.5;
			}
		}

		.form-section {
			background: #fff;
			margin: 20rpx;
			border-radius: 16rpx;
			padding: 32rpx;

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #EBEDF0;
				padding: 30rpx 0;

				&:last-child {
					border-bottom: 0;
				}

				.form-label {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;

					.required {
						color: #CF3546;
						margin-right: 4rpx;
					}

					.form-option {
						background: #F7F8FA;
						padding: 14rpx 32rpx;
						font-size: 28rpx;
						border-radius: 70rpx;
						color: #333333;
						margin-right: 24rpx;
						margin-bottom: 16rpx;
						max-width: 100%;
						word-break: break-word;

						&.selected {
							background: rgba(56, 139, 255, 0.15);
							color: #388BFF;
						}
					}
				}

				.txt {
					font-size: 28rpx;
					color: #333333;
				}

				.form-input {
					flex: 1;
					font-size: 28rpx;
					color: #C8C9CC;

					&.placeholder {
						color: #C8C9CC;
					}

					&.picker-input {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						&:not(.placeholder) {
							color: #000;
						}
					}

					.icon {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.form-textarea {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					padding: 16rpx;
					border: 1px solid #EBEDF0;
					border-radius: 8rpx;
					min-height: 200rpx;
					resize: none;
					box-sizing: border-box;

					&::placeholder {
						color: #C8C9CC;
					}
				}
			}
		}
	}

	.next-button {
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		height: 88rpx;
		line-height: 88rpx;
		background: #388BFF;
		border-radius: 200rpx;
		margin: 32rpx;
	}
}

::v-deep .u-popup__content {
	border-radius: 40rpx 40rpx 0 0 !important;
}


.popup-content {
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	height: 70vh;
	background-color: #fff;

	.popup-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;

		.close-icon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 32rpx;
		}

		flex-shrink: 0;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #F7F8FA;
		border-radius: 38rpx;
		padding: 16rpx 28rpx;
		margin-bottom: 24rpx;

		.icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
	}

	.project-list {
		height: calc(100% - 200rpx);

		.project-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 0;
			font-size: 28rpx;
			border-bottom: 1rpx solid #eee;

			&:active {
				background-color: #f9f9f9;
			}

			&.active {
				.project-name {
					font-weight: 500;
					color: #388BFF;
				}

				.icon {
					opacity: 1;
				}
			}

			.project-name {
				color: #333;
				transition: all 0.2s ease;
			}

			.icon {
				width: 36rpx;
				height: 36rpx;
				opacity: 0;
				transition: opacity 0.2s ease;
			}
		}
	}

	.two-level-container {
		display: flex;
		flex: 1;
		border-top: 1rpx solid #f5f5f5;

		.primary-list {
			width: 40%;
			background-color: #f8f9fa;

			.primary-item {
				padding: 28rpx 20rpx;
				background: #F2F3F5;

				&:active {
					background: #FFFFFF;
				}

				&.primary-active {
					position: relative;
					background-color: #fff;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						width: 8rpx;
						height: 32rpx;
						background: #388BFF;
					}

					.primary-text {
						font-weight: 500;
					}
				}

				.primary-text {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.secondary-list {
			width: 60%;
			padding: 0 20rpx;

			.secondary-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 10rpx;
				font-size: 28rpx;
				color: #333;

				&.secondary-active {
					font-weight: 500;
					color: #388BFF;
				}
			}
		}
	}

	.popup-footer {
		padding: 20rpx 30rpx 40rpx;
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;
		flex-shrink: 0;

		.confirm-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #2979ff;
			color: #fff;
			font-size: 32rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;

			&:active {
				opacity: 0.8;
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.popup-content {
		background-color: #1e1e1e;

		.popup-header {

			.title,
			.popup-title {
				color: #fff;
			}
		}

		.two-level-container {
			.primary-list {
				background-color: #2d2d2d;
				border-right-color: #3d3d3d;

				.primary-item {
					border-bottom-color: #3d3d3d;

					&:active {
						background-color: #3d3d3d;
					}

					&.primary-active {
						background-color: #3d3d3d;

						.primary-text {
							color: #2979ff;
						}
					}

					.primary-text {
						color: #ccc;
					}
				}
			}

			.secondary-list {
				.secondary-item {
					border-bottom-color: #3d3d3d;

					&:active {
						background-color: #3d3d3d;
					}

					&.secondary-active {
						background-color: #2d2d2d;
					}

					.secondary-text {
						color: #fff;
					}
				}
			}
		}

		.popup-footer {
			background-color: #1e1e1e;
			border-top-color: #3d3d3d;
		}
	}
}
</style>