rtliveCompany/pages_task/fillTask.vue

<template>
	<view class="container">
		<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="/static/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="/static/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="/static/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="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>添加任务备注</text>
					</view>
					<EvanSwitch v-model="formData.addRemark"></EvanSwitch>
				</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="/static/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="/static/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="/static/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="/static/image/icon_more.png"></image>
					</view>
				</view>

				<!-- 观看方式 -->
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>观看方式</text>
					</view>
					<view class="radio-group">
						<label class="radio-item" :class="{ active: formData.viewMode === '公开' }"
							@click="formData.viewMode = '公开'">
							<image class="radio-circle" v-if="formData.viewMode === '公开'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>公开</text>
						</label>
						<label class="radio-item" :class="{ active: formData.viewMode === '加密' }"
							@click="formData.viewMode = '加密'">
							<image class="radio-circle" v-if="formData.viewMode === '加密'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>加密</text>
						</label>
					</view>
				</view> -->

				<!-- 观看要求 -->
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>观看要求</text>
					</view>
					<view class="radio-group">
						<label class="radio-item" :class="{ active: formData.viewRequire === '登录账户' }"
							@click="formData.viewRequire = '登录账户'">
							<image class="radio-circle" v-if="formData.viewRequire === '登录账户'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>登录账户</text>
						</label>
						<label class="radio-item" :class="{ active: formData.viewRequire === '认证客户' }"
							@click="formData.viewRequire = '认证客户'">
							<image class="radio-circle" v-if="formData.viewRequire === '认证客户'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>认证客户</text>
						</label>
					</view>
				</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">
						<input v-model="formData.roomTitle" placeholder="请输入直播间标题" />
					</view>
				</view>
				<view class="form-item column baseline">
					<view class="form-label">
						<text class="required">*</text>
						<text>封面图</text>
					</view>
					<view class="upload-area" @click="chooseCoverImage">
						<image v-if="formData.coverImage" :src="formData.coverImage" class="cover-image" />
						<view v-else class="upload-placeholder">
							<text>点击上传封面图</text>
						</view>
						<image v-if="formData.coverImage" class="delete-icon" src="/static/image/icon_cross.png"
							@click.stop="deleteCoverImage" />
					</view>
				</view>
			</view> -->
			<view class="form-section">
				<!-- 申请补充讲者任务 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>申请补充讲者任务</text>
					</view>
					<EvanSwitch v-model="formData.applySpeaker"></EvanSwitch>
				</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="date"
			confirmColor='#576B95' @confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false">
		</u-datetime-picker>

		<u-datetime-picker :show="showEndTimePicker" v-model="endTimeValue" mode="date"
			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="/static/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="/static/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="/static/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>

		<!-- 通用选择器 -->
		<u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="confirm" @cancel="cancel">
		</u-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="/static/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="/static/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="/static/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 { info, queryAllData, queryAllProduct, getAllData, company } from '@/api/task'
	import Step from '@/pages_task/components/step.vue'
	import EvanSwitch from '@/components/evan-switch.vue'
	import utils from '@/utils/common.js'

	export default {
		components: {
			Step,
			EvanSwitch
		},
		data() {
				return {
					showTaskPopup: false,
					primaryOptions: [],
					activePrimaryIndex: 0,
					currentSecondaryOptions: [],
					selectedSecondaryItem: '',
					selectedPrimaryItem: null,
					selectedIndex: -1,
					selectedProject: null,
					belongingprojects: [],
					searchKeyword: '',
					showBelongingPopup: false,
					showPickerVisible: false,
					currentStep: 1,
					currentText: [{
							id: 1,
							stepNumber: 1,
							title: '填写任务'
						},
						{
							id: 2,
							stepNumber: 2,
							title: '积分设置'
						}
					],
					rejectionInfo: '',
					// 核心修复：所有表单字段统一放在formData里
					formData: {
						id:'',
						costShareId: '',
						planStartTime: '',
						planEndTime: '',
						deptId: '',
						projectId: '',
						productId: '',
						taskType: '',
						belongType: '',
						addRemark: false,
						viewMode: '公开', // 观看方式默认值
						viewRequire: '登录账户', // 观看要求默认值
						roomTitle: '', // 直播间标题
						coverImage: '', // 封面图
						applySpeaker: true // 申请补充讲者任务
					},
					pickerTitle: '默认标题',
					pickerData: [],
					companyId:'',
					showStartTimePicker: false,
					showEndTimePicker: false,
					startTimeValue: new Date(),
					endTimeValue: new Date(),
					originalCompanyData: null,
					companyData: [],
					companyList: [],
					productList: [],
					taskTypeOriginalData: [],
					taskTypeDict: [],
					belongTypeList: [],
					projectData: [],
					userInfo: {},
					// 页面显示数据
					deptName: '',
					costShareName: '',
					productName: '',
					projectName: '',
					id:'',
					doctorId:''
				}
			},
		onLoad: async function(options) {
			console.log("编辑任务接受数据",options);
				try {
					this.taskTypeDict = await utils.getDicts("task_type");//任务类型
					this.belongTypeList = await utils.getDicts("task_belong_type");//任务类型
				} catch (e) {
					console.log('获取字典数据失败:', e)
				}
               if(options.id){
			   console.log('有id',options.id);

	           this.id=options.id
	           this.formData.id=options.id

					}
                if(options.doctorId){
					this.doctorId=options.doctorId
				}
				this.userInfo=JSON.parse(uni.getStorageSync("userInfo"))||''
				if (options.rejectionInfo) {
					this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
				}
				// 初始化二级选项
				this.currentSecondaryOptions = this.primaryOptions[0]?.children || []
				// 获取用户信息
				const userInfoStr = uni.getStorageSync('userInfo')
				this.userInfo = userInfoStr ? JSON.parse(userInfoStr) : {}
				console.log(this.userInfo);
				// 加载信息
				this.companyId = this.userInfo.companyId || 1
				// 设置默认日期为当天
				this.formData.planStartTime = this.formatDateTime(new Date());
				this.formData.planEndTime = this.formatDateTime(new Date());
				this.info();
			},
		computed: {
				filteredProjects() {
					if (!this.searchKeyword.trim()) {
						return this.belongingprojects;
					}
					return this.belongingprojects.filter(project =>
						project.name.includes(this.searchKeyword)
					);
				},
				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 : '';
				}
			},
		methods: {
				// 任务详情查询
				info() {
					info(this.id).then(res => {
						if (res.code === 200) {
							const data = res.data;
							// 直接将接口返回的数据赋值给 formData
							this.formData = {
								// 基本信息
								 id: this.id || '',
								deptId: data.deptId || '',
								deptName: data.deptName || '',
								projectId: data.projectId || '',
								productId: data.productId || '',
								costShareId: data.costShareId || '',
								belongType: data.belongType || '',
								taskType: data.taskType || '',
								addRemark: false,
								
								// 时间信息
								planStartTime: data.planStartTime || '',
								planEndTime: data.planEndTime || '',
								
								// 直播信息
								viewMode: '公开', // 观看方式默认值
								viewRequire: '登录账户', // 观看要求默认值
								roomTitle: '', // 直播间标题
								coverImage: '', // 封面图
								applySpeaker: true // 申请补充讲者任务
							};
							
							// 保存其他需要的数据
							this.deptName = data.deptName || '';
							this.costShareName = data.costShareName || '';
							this.productName = data.productName || '';
							this.projectName = data.projectName || '';
						} else {
							uni.showToast({
								title: '查询任务详情失败',
								icon: 'none'
							});
						}
					})
				},
				// 封面图上传
				chooseCoverImage() {
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							this.formData.coverImage = res.tempFilePaths[0]
						}
					})
				},
				// 删除封面图
				deleteCoverImage() {
					this.formData.coverImage = ''
				},
				// 一级分类选择
				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.institution = 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);
				},
				//任务类型
				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||'',
						}
						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接口获取公司项目设置列表
							company(this.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);
						}
					});
				},
				// 打开通用选择器
				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();
						// 使用处理后的taskTypeColumns作为数据
						data = this.taskTypeColumns;
						console.log('任务类型数据:', data);
					} else if (title === '归属类型') {
						// 归属类型数据已经在onLoad中获取
						data = this.belongTypeList;
						console.log('归属类型数据:', data);
					}

					// 处理任务归属和费用分摊数据，将deptName作为显示文本
					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 {
						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.formData.taskType = selectedType.dictValue;
								console.log('设置formData.taskType为:', selectedType.dictValue);
							} 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;
								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('未找到对应的归属类型');
							}
						}
					}
					this.showPickerVisible = false
				},
				// 通用选择器取消
				cancel() {
					this.showPickerVisible = false
				},
				// 下一步
				toNext() {
					console.log('去编辑积分:', this.doctorId);
					console.log('去编辑积分formData:', this.formData);
					// 保存表单数据到本地存储，以便 editSelectCustomer.vue 页面使用
					uni.setStorageSync('fillTaskFormData', JSON.stringify(this.formData));
					uni.navigateTo({
						url: `/pages_task/editSelectCustomer?doctorId=${this.doctorId}`
					})
				},
				// 提交表单
				submit() {
					console.log('提交表单数据:', this.formData);
					// 这里可以添加表单验证逻辑
					// 然后调用接口提交数据
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
				},
				// 开始时间选择确认
				onStartTimeConfirm(e) {
					this.formData.planStartTime = this.formatDateTime(e.value);
					this.showStartTimePicker = false;
				},
				// 结束时间选择确认
				onEndTimeConfirm(e) {
					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');
					//  ${hours}:${minutes}:${seconds}
					return `${year}-${month}-${day}`;
				}
			}
	}
</script>

<style lang="scss" scoped>
	.column {
		flex-direction: column;
	}

	.baseline {
		align-items: baseline !important;
	}

	// 页面容器样式
	.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: 24rpx;
				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;
						align-items: center;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;

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

					// 纯文本展示
					.txt {
						font-size: 28rpx;
						color: #333333;
					}

					// 输入框容器
					.form-input {
						flex: 1;
						font-size: 28rpx;
						color: #C8C9CC;
						text-align: end;

						&.placeholder {
							color: #C8C9CC;
						}

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

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

					// 单选组样式（嵌套到form-item里）
					.radio-group {
						display: flex;
						gap: 40rpx;

						.radio-item {
							display: flex;
							align-items: center;
							font-size: 28rpx;

							.radio-circle {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								margin-right: 16rpx;
							}

						}
					}

					// 上传区域样式（嵌套到form-item里）
					.upload-area {
						position: relative;
						width: 200rpx;
						height: 120rpx;
						border: 1rpx dashed #C8C9CC;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cover-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.upload-placeholder {
							color: #C8C9CC;
							font-size: 24rpx;
						}

						.delete-icon {
							position: absolute;
							top: -12rpx;
							right: -12rpx;
							width: 32rpx;
							height: 32rpx;
							background: #fff;
							border-radius: 50%;
						}
					}
				}
			}
		}

		// 下一步按钮
		.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,
			.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;

				&: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>