<template>
	<!-- 新建任务 -->
	<view>
		<view class="task_box">
			<!-- 主题 -->
			<!-- 信息填写表单 -->
			<view class="u-page">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u--form labelPosition="left" :model="model1" ref="form1">

							<!-- <u-cell-group>
								<view class="cell" v-for="(item, index) in list" :key="index">
									<u-cell @click="showPicker(index)" :title="item.title" isLink :value="item.value"
										:label="item.value?'':'请选择'">
									</u-cell>

								</view>
							</u-cell-group> -->
							<!-- 指派给 -->

							<u-picker :show="flag1" :columns="columns3" ref="uPicker4" @cancel="cancel"
								closeOnClickOverlay @close="flag1 = false" @change="columnCode" @confirm="confirm"
								keyName="name" :defaultIndex='defaultIndex'>
							</u-picker>
							<!-- 协作人 -->
							<u-picker :show="flag2" :columns="columns3" ref="uPicker5" @cancel="cancel"
								@close="flag2 = false" @confirm="confirm1" @change="columnCode1" keyName="name"
								closeOnClickOverlay :defaultIndex='defaultIndex1'>
							</u-picker>

							<!-- 验收人 -->
							<u-picker :show="flag3" :columns="columns3" ref="uPicker6" @cancel="cancel"
								@close="flag3 = false" @confirm="confirm" @change="columnCode2" keyName="name"
								closeOnClickOverlay :defaultIndex='defaultIndex2'>
							</u-picker>
							<!-- 任务性质 -->
							<u-form-item label="工作类型:" prop="userInfo.labor_type" borderBottom
								@click="show3 = true; hideKeyboard()" ref="item3">
								<u--input v-model="labor_type" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
							</u-form-item>
							<!-- 开始时间 -->
							<u-form-item label="开始时间:" prop="userInfo.start_time" borderBottom
								@click="starttime = true; hideKeyboard()" ref="item8">
								<u--input v-model="start_time" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
							</u-form-item>
							<!-- 预计结束日期 -->
							<u-form-item label="结束时间:" prop="userInfo.end_time" borderBottom
								@click="endtime = true; hideKeyboard()" ref="item4">
								<u--input v-model="end_time" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
							</u-form-item>
							<!-- 月份 -->

							<!-- 关联项目 -->
							<u-form-item label="关联任务:" prop="userInfo.project" borderBottom
								@click="show4 = true; hideKeyboard()" ref="item6">
								<u--input v-model="project" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
							</u-form-item>
							<!-- 优先级 -->
							<u-form-item label="工作类别:" prop="userInfo.priority_status" borderBottom
								@click="show5 = true; hideKeyboard()" ref="item7">
								<u--input v-model="priority_status" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
							</u-form-item>
							<view class="gray"></view>
							<!-- 任务内容 -->
							<view class="elaborate_box">
								<view class="elaborate">任务内容:</view>
								<u-form-item prop="userInfo.title" ref="item8">
									<u--textarea v-model="model1.userInfo.title" count autoHeight maxlength='200'>
									</u--textarea>
								</u-form-item>
							</view>
						</u--form>
						</u-action-sheet>
						<!-- 任务性质 -->
						<u-action-sheet :show="show3" :actions="actions3" title="请选择任务性质" @close="show3 = false"
							@select="Select3">
						</u-action-sheet>
						<!-- 关联项目 -->
						<u-action-sheet :show="show4" :actions="actions4" title="请选择关联任务" @close="show4 = false"
							@select="Select4">
						</u-action-sheet>
						<!-- 流转状态 -->
						<!-- 	<u-action-sheet :show="show6" :actions="actions6" title="请选择流转状态" @close="show6 = false"
							@select="Select6">
						</u-action-sheet> -->
						<!-- 工作类别 -->
						<u-action-sheet :show="show5" :actions="actions5" title="请选择工作类别" @close="show5 = false"
							@select="Select5">
						</u-action-sheet>
						<!-- 开始时间 -->
						<u-datetime-picker :show="starttime" :value="start_time" mode="datetime" closeOnClickOverlay
							@confirm="start_timeConfirm" @cancel="start_timeClose"
							@close="start_timeClose"></u-datetime-picker>
						<!-- 结束日期 -->
						<u-datetime-picker :show="endtime" :value="end_time" mode="datetime" closeOnClickOverlay
							@confirm="end_timeConfirm" @cancel="end_timeClose"
							@close="end_timeClose"></u-datetime-picker>

					</view>
				</view>
			</view>
			<!-- 信息填写表单 end-->

			<!-- 提交按钮 -->
			<view class="btn_box">
				<u-button type="error" class="btn reset" text="重置" @click="reset"></u-button>
				<u-button type="primary" class="btn sub" text="立即提交" @click="submit"></u-button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		addschedule,
		projecttasklist,
		getemployee,
		userdepartment,

	} from '@/api/oa.js'
	import {
		Toast
	} from '@/libs/uniApi'
	// import { data } from '../../../uni_modules/uview-ui/libs/mixin/mixin'
	export default {
		data() {
			return {
				index: 0,
				loading: false,
				columnData: [

				],
				defaultIndex: [0, 0, 0],
				defaultIndex1: [0, 0, 0],
				defaultIndex2: [0, 0, 0],
				columns3: [],
				director_name: '', //指派给
				assist_admin_names: '', //协作人
				priority_status: '', //优先级，
				flow_status: '',
				labor_type: '',
				project: '', //关联项目
				start_time: '',
				end_time: '',
				model1: {
					userInfo: {
						title: '', //任务主题



					},
				},
				flag1: false, //指派给
				flag2: false, //协作人
				flag3: false, //验收人

				show3: false, //
				show4: false, //
				show5: false, //
				show6: false, //
				list: [{
						title: '关联员工:',
						value: '',
					},
					// {
					// 	title: '协作人:',
					// 	value: ''
					// }
					//,
					// {
					// 	title: '验收人:',
					// 	value: ''
					// },
				],
				starttime: false, //开始时间
				endtime: false, //结束日期
				endmonth: false, //结束月份

				actions3: [{
					name: '案头',
					id: '1'
				}, {
					name: '外勤',
					id: '2'
				}],
				actions4: [{
					name: '项目1',
					id: '78'
				}, ],

				actions5: [{
						name: '其他',
						index: '1'
					}, {
						name: '方案策划',
						index: '2'
					},

					{
						name: '撰写',
						index: '3'
					}, {
						name: '需求调研 ',
						index: '4'
					}, {
						name: '需求沟通',
						index: '5'
					}, {
						name: '参加会议',
						index: '6'
					}, {
						name: '拜访客户',
						index: '7'
					}, {
						name: '接待客户',
						index: '8'
					}
				],


				actions6: [{
					name: '进行中',
					id: '2',
				}, {
					name: '已完成',
					id: '3'
				}, {
					name: '已拒绝',
					id: '4'
				}, {
					name: '已关闭',
					id: '5'
				}],
				rules: {

				},
				type: 0
			}
		},
		onLoad(option) {

			this.type = option.type
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '编辑任务工时'
				})

				// this.buname=
				// //console.log(this.columns3[0])
				
				let data = JSON.parse(decodeURIComponent(option.data));
				
				//console.log(data)
				this.model1.userInfo.id = data.id
				this.start_time=data.start_time_a+'-'+data.start_time_b
				this.end_time=data.end_time_a+'-'+data.end_time_b
				this.model1.userInfo.start_time_a=data.start_time_a
				this.model1.userInfo.start_time_a=data.start_time_a
				this.model1.userInfo.end_time_a=data.end_time_a
				this.model1.userInfo.end_time_b=data.end_time_b
				this.model1.userInfo.cid=data.cid
				this.model1.userInfo.tid=data.tid
				this.model1.userInfo.labor_type=data.labor_type
				this.labor_type=data.labor_type_string
				this.project=data.project
				this.model1.userInfo.title=data.title
				this.priority_status=data.work_cate
				
			}

			this.getDocumentList()
			this.getDocumentList1()
		},
		onShow() {},
		methods: {

			//获取任务详情
			async getDeatil(id) {
				let res = await scheduleview({
					id: id

				})

				this.list[0].value = res.data.detail.director_name
				this.model1.userInfo.id = res.data.detail.id
				this.model1.userInfo.title = res.data.detail.title
				this.list[1].value = res.data.detail.assist_admin_names
				this.model1.userInfo.end_time = res.data.detail.end_time
				this.labor_type = res.data.detail.labor_type_name
				this.model1.userInfo.labor_type = res.data.detail.labor_type
				this.model1.userInfo.plan_hours = res.data.detail.plan_hours
				this.model1.userInfo.flow_status == res.data.detail.flow_status
				this.flow_status = res.data.detail.flow_name
				this.model1.userInfo.priority_status == res.data.detail.priority_status
				this.priority_status = res.data.detail.priority_name
				this.model1.userInfo.content = res.data.detail.content
				this.project = res.data.detail.project_name
				this.model1.userInfo.project_id = res.data.detail.project_id
				if (res.data.detail.assist_admin_ids.length > 1) {
					this.model1.userInfo.assist_admin_ids = res.data.detail.assist_admin_ids.split(',')
				} else {
					this.model1.userInfo.assist_admin_ids.push(res.data.detail.assist_admin_ids)
				}
			},
			async getDocumentList1() {
				let res = await projecttasklist({
					page: 1,
					limit: 10000,

				})
				this.actions4 = res.data.data.map((step, index) => {
					return {
						name: step.title,
						id: step.id,
					};
				});

			},
			//获取部门
			async getDocumentList() {
				const res = await userdepartment()
				const deArr = res.data
				let codelist = [
					[], //顶级部门
					[], //次级部门
					[] // 负责人
				]

				codelist[0] = res.data.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})

				codelist[1] = res.data[0].children.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})



				let dat = await getemployee({
					did: codelist[1][0].id
				})

				codelist[2] = dat.data.map((item) => {
					return {
						id: item.id,
						name: item.name
					}
				})

				this.$forceUpdate()
				this.$nextTick(() => {

					this.columns3 = codelist


				})


			},
			//监听人员加载数据
			async columnCode(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns3, 2, newColumn);

					}

				}

			},
			async columnCode1(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})
						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns4, 2, newColumn);

					}

				}

			},
			async columnCode2(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})
						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns5, 2, newColumn);

					}

				}

			},
			groupChange(n) {
				// //console.log('groupChange', n);
			},
			navigateBack() {
				uni.navigateBack()
			},
			Select3(e) {

				this.labor_type = e.name
				this.model1.userInfo.labor_type = e.id //工作类型id
				this.$refs.form1.validateField('userInfo.labor_type')
			},
			Select4(e) {
				this.project = e.name
				this.model1.userInfo.tid = e.id.toString() //关联任务id
				this.$refs.form1.validateField('userInfo.project')
			},
			Select5(e) {

				this.priority_status = e.name
				this.model1.userInfo.cid = e.index //优先级id
				this.$refs.form1.validateField('userInfo.cid')
			},
			Select6(e) {
				this.flow_status = e.name
				this.model1.userInfo.flow_status = e.id //优先级id
				this.$refs.form1.validateField('userInfo.flow_status')
			},
			change(e) {
				// //console.log(e);
			},
			//开始日期
			start_timeClose() {
				this.starttime = false
				this.$refs.form1.validateField('userInfo.start_time')
			},
			start_timeConfirm(e) {
				this.starttime = false
				this.start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.model1.userInfo.start_time_a = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss').split(' ')[0]
				this.model1.userInfo.start_time_b = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss').split(' ')[1]
				this.$refs.form1.validateField('userInfo.start_time')
			},
			//结束日期
			end_timeClose() {
				this.endtime = false
				this.$refs.form1.validateField('userInfo.end_time')
			},
			end_timeConfirm(e) {
				this.endtime = false
				this.end_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.model1.userInfo.end_time_a = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss').split(' ')[0]
				this.model1.userInfo.end_time_b = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss').split(' ')[1]
				this.$refs.form1.validateField('userInfo.end_time')
			},
			//结束月份
			end_monthClose() {
				this.endmonth = false
				this.$refs.form1.validateField('userInfo.plan_hours')
			},
			end_monthConfirm(e) {
				this.endmonth = false
				this.model1.userInfo.plan_hours = uni.$u.timeFormat(e.value, 'yyyy-mm')
				this.$refs.form1.validateField('userInfo.plan_hours')
			},
			//新建任务
			async addNewTask(data) {
				const res = await addNewTaskApi(data)
				Toast('slkdff')
			},
			//获取部门列表
			async getDepartment() {
				const res = await getDepartmentApi()
				const deArr = res[0].children
				this.columns3.push(deArr)
				let id = deArr[0].id
				this.getDepartmentPerson(id)

			},
			//获取部门对应的人员列表
			async getDepartmentPerson(id) {
				const data = {
					did: id
				}
				const res = await getDepartmentPersonApi(data)
				const nameArr = []
				res.forEach(item => {
					let obj = {}
					obj.name = item.name
					obj.id = item.id
					nameArr.push(obj)
				})
				this.columnData = []
				this.columnData = nameArr
				// this.columnData = res
				if (this.columns3[1]) {
					return
				} else {
					this.columns3.push(nameArr)
					// this.columns3.push(res)
				}
			},

			async submit() {
				//结束时间不能低于开始时间
				// var d1 = new Date(this.model1.userInfo.start_time)
				// const date1 = d1.getTime()
				var d2 = new Date(this.model1.userInfo.end_time)
				const date2 = d2.getTime()
				if (date2.length > 0) {
					Toast('结束时间不存在')
					this.model1.userInfo.end_time = ''
					return
				}


				let userInfo = this.model1.userInfo
				const arr = Object.values(userInfo)
				const bool = arr.every(item => item)
				//console.log(bool, this.model1.userInfo)

				if (bool) {

					//console.log(this.model1.userInfo);

					const res = await addschedule(this.model1.userInfo)
					if (res.code == 0) {
						uni.showToast({
							title: '已提交',
						});

						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
						return
					} else {
						// 新建任务成功跳转回上一页
						uni.$u.toast(res.msg)
					}
				} else {
					uni.$u.toast('请填写所有信息')
					return
				}
			},
			reset() {
				this.list.forEach(item => {
					item.value = ''
				})
				this.project = ''
				this.flow_status = ''
				this.priority_status = ''
				this.labor_type = ''
				for (let i in this.model1.userInfo) {
					this.model1.userInfo[i] = ''
				}

			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			//picker选择器
			showPicker(index) {
				//console.log(index);
				this.index = index + 1
				this[`show${index + 1}`] = true
			},

			change(e) {
				// //console.log('change', e);
			},
			showPicker(index) {
				this.index = index + 1
				this[`flag${index + 1}`] = true
			},
			close() {
				// //console.log('close');
				this[`flag${this.index}`] = false
			},
			confirm(e) {
				const num = this.index - 1
				const name = e.value[2]
				if (name == undefined) {
					this.list[num].value = '暂无'
				} else {
					this.list[0].value = name.name
					this.model1.userInfo.admin_id = name.id
				}

				this[`flag${this.index}`] = false
			},
			confirm1(e) {
				const num = this.index - 1
				const name = e.value[2]

				if (name == undefined) {
					this.list[num].value = '暂无'
				} else {

					this.list[1].value += name.name + ','
					this.model1.userInfo.assist_admin_ids.push(name.id)
				}

				this[`flag${this.index}`] = false
			},
			cancel() {
				// //console.log('cancel');
				this[`flag${this.index}`] = false
			},


		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},

	}
</script>

<style lang="scss" scoped>
	/deep/.u-form {
		background-color: #fff;
	}

	/deep/.uicon-arrow-right {
		display: none;
	}

	/deep/.u-cell__right-icon-wrap {
		display: none !important;
	}

	/deep/.u-form-item {
		padding: 0 28rpx;
	}

	/deep/.u-form-item__body__left {
		width: 220rpx !important;
		// background-color: pink;
	}

	/deep/.input-placeholder,
	/deep/.u-input__content,
	/deep/.uni-input-wrapper {
		font-size: 28rpx !important;
	}

	/deep/.u-textarea {
		padding: 0 !important;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 220rpx !important;
	}

	/deep/.u-cell__title {
		display: inline-block !important;
		flex: none;
	}

	/deep/.u-cell__body {
		padding: 21rpx 0 !important;
	}

	/deep/.u-line:first-child {
		border-bottom: none !important;
	}

	/deep/.u-cell__value {
		color: black !important;
	}

	/deep/.u-cell__title-text {
		display: inline-block !important;
		width: 220rpx !important;
	}

	/deep/.u-cell__label {
		font-size: 28rpx !important;
		color: #CCCCCC !important;
	}

	/deep/.u-cell__body__content {
		flex: none !important;
	}

	.cell {
		margin: 0 auto;
		width: 694rpx;
		// background-color: pink;
	}

	.row {
		margin: 0 auto;
		margin-top: 21rpx;
		width: 694rpx;
		height: 0rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.de {
		font-size: 28rpx;

		.miaoshu {
			font-size: 28rpx;
			color: #CCCCCC;
		}
	}

	.ch {
		color: rgb(192, 196, 204);
	}

	.gray {
		// width: 750rpx;
		height: 35rpx;
		background-color: #F5F5F5;
	}

	.elaborate_box {
		background-color: #fff;
		padding: 35.5rpx 28rpx;
		margin-bottom: 200rpx;
		overflow: hidden;

		.elaborate {
			color: #666666;
			font-size: 32rpx;

		}

		.elaborate_info {
			width: 100%;
			// height: 350rpx;
			font-size: 28rpx;
		}
	}

	.btn_box {
		z-index: 9999;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		background: #FFFFFF;
		display: flex;

		.btn {
			text-align: center;
			line-height: 88rpx;
			// width: 375rpx;
			height: 88rpx;
		}

		.reset {
			border: none;
			background-color: #fff;
			color: #999999;
		}

		.sub {
			color: #fff;
			background-color: $theme-oa-color;
		}
	}
</style>