rtliveCompany/pages_task/createTask.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>添加任务备注</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="/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>
		</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>
	</view>
</template>

<script>
	import { 
		company,
		getAllData,//获取项目所有数据
		queryAllProduct,//获取公司所有产品
		queryAllData//获取任务类型
	} 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: '',
					addRemark: false,
					remark: ''
				},
				originalCompanyData: null,
				pickerTitle: '默认标题',
				pickerData: [],
				companyId:'',
				showStartTimePicker: false,
				showEndTimePicker: false,
				startTimeValue: new Date(),
				endTimeValue: new Date(),

			}
		},

		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=JSON.parse(uni.getStorageSync("userInfo"))||''
			if (options.rejectionInfo) {
				this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
			}
			// 获取用户信息
			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());
			
		},
		
		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 : '';
				}
		},
		methods: {
			//任务类型
			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);
					}
				});
			},
			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();
					// 使用处理后的taskTypeColumns作为数据
					data = this.taskTypeColumns;
					console.log('任务类型数据:', data);
				} else if (title === '归属类型') {
					// 归属类型数据已经在onLoad中获取
					data = this.belongTypeList;
					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 {
					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() {
				// 表单验证
				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.planStartTime) {
					uni.showToast({
						title: '请选择计划开始时间',
						icon: 'none'
					})
					return
				}
				if (!this.formData.planEndTime) {
					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) {
				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>
	.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;
						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;

						&.placeholder {
							color: #C8C9CC;
						}

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

						.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>