<template>
	<view>
		<step-title :stepPage="stepsPage" :stepText="stepsText"></step-title>
		<view>
			<view class="card" v-if="stepsPage === 0">
				<u--form label-width="90px" :model="dataModel" ref="wForm" class="demo-ruleForm">
					<view style="position: relative;">
						<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
					</view>

					<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">基本信息填写</view>
					<!-- <u-form-item label="审核意见：" prop="CONTEXT" borderBottom v-if="dataModel.IS_PUBLISH==9">
					</u-form-item>
					<u--textarea v-html="dataModel.CONTEXT" border="surround" v-if="dataModel.IS_PUBLISH==9"
						disabled></u--textarea> -->
					<u-form-item label="制定时间" prop="SET_TIME">
						<u--input v-model="dataModel.SET_TIME" disabled disabledColor="#ffffff" placeholder="请输入制定时间" border="none" fontSize="14px" customStyle="margin:0px;display:flex;padding:3px 9px">
						</u--input>
					</u-form-item>
					<u-form-item label="制定部门" prop="DepartmentName">
						<u--input v-model="dataModel.Nav_Department.NAME" disabled disabledColor="#ffffff" placeholder="请输入制定部门" border="none" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="制定人员" prop="UserName">
						<u--input v-model="dataModel.Nav_User.NAME" disabled disabledColor="#ffffff" placeholder="请输入制定人员" border="none" fontSize="14px" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="年度" prop="YEAR">
						<u--input v-model="dataModel.YEAR" disabled disabledColor="#ffffff" placeholder="请输入年度" border="none" fontSize="14px" customStyle="margin:0px;display:flex;padding:3px 9px">
						</u--input>
					</u-form-item>
					<u-form-item label="考核层级" prop="DEPARTMENT_TYPE_SHOW">
						<u--input v-model="dataModel.DEPARTMENT_TYPE_SHOW" disabled disabledColor="#ffffff" placeholder="请输入征集截至时间" fontSize="14px" border="none" customStyle="margin:0px;display:flex;padding:3px 9px">
						</u--input>
					</u-form-item>
					<u-form-item label="附件" prop="Nav_Files">
						<full-upload v-model="dataModel.Nav_Files"></full-upload>
					</u-form-item>
				</u--form>
			</view>
			<view style="padding: 10px 16px;" v-if="stepsPage === 0" class="bottom-button">
				<u-button type="primary" @click="stepAdd" color="#3d4b70">下一步</u-button>
			</view>
			<view class="sub-form" v-if="stepsPage === 1">
				<view>
					<u--form labelPosition="left" labelWidth="auto" :model="subDataModel" ref="sForm2" class="demo-ruleForm">
						<view v-if="dataModel.Nav_DepartmentDetail.length!==0">
							<view v-for="(item, index) in dataModel.Nav_DepartmentDetail" :key="index">
								<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding-bottom: 10px;"
									:style="index > 0?'border-top: #e7e6e4 1px solid;padding-top:10px':''">
									<view style="font-size: 15px; font-weight: bold;color: #3d4b70;display: flex;flex-direction: row;align-items: center;">
										考核部门
										<u-badge :value="index+1" bgColor="#3d4b70" style="margin-left: 5px;"></u-badge>
										<view v-if="index>0" style="margin-left: 10px;">
											<view style="display: flex;align-items: center;" v-if="thisDep.indexOf(index)!==-1" @click="handleDepartmentPush(index)">
												<u-icon name="arrow-down"></u-icon>
											</view>
											<view style="display: flex;align-items: center;" v-if="thisDep.indexOf(index)==-1" @click="handleDepartmentPush(index)">
												<u-icon name="arrow-up"></u-icon>
											</view>
										</view>
									</view>
									<view style="font-size: 15px;align-items: center;" v-if="thisDep.indexOf(index)!==-1">
										{{item['Nav_Department'].NAME}}
									</view>

								</view>
								<view v-if="thisDep.indexOf(index)==-1 && item.Nav_Department">
									<u-form-item label="部门名称" prop="ChildDepartName">
										<u--input disabled disabledColor="#fff" fontSize="14px" v-model="item.Nav_Department.NAME" border="none" inputAlign="right"></u--input>
									</u-form-item>
									<u-form-item label="部门负责人" prop="ChildUserName">
										<u--input disabled disabledColor="#fff" fontSize="14px" v-model="item.Nav_Department.Nav_User.NAME" border="none" inputAlign="right"></u--input>
									</u-form-item>
									<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
										<u-form-item label="安全生产目标与指标" prop="DepartNames">
										</u-form-item>
										<u-icon name="plus-circle" color="#3D4B70" size="20" @click="handleAddDep(index)"></u-icon>
									</view>
									<view style="margin-bottom: 10px;">
										<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;margin: 10px 0px;" v-for="(item1,index1) in item.Nav_DetailContent" :key="index1">
											<u-badge :value="index1+1" bgColor="#7591d7" style="margin-right: 20px;"></u-badge>
											<u--textarea v-model="item.Nav_DetailContent[index1].NAME" inputAlign="left" placeholder="请输入内容" autoHeight maxlength='-1'>
											</u--textarea>
											<view @click="handleDelRowBefore(index,index1)" style="padding: 0px 0px 0px 20px;">
												<u-icon name="trash" size="24" color="#3d4b70"></u-icon>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view v-else style="padding: 20px 0px 40px 0px;">
							<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无考核部门 , 请继续下一步">
							</u-empty>
						</view>
					</u--form>
				</view>
			</view>
			<view style="padding: 10px 16px;display: flex;flex-direction: row;align-items: center;" v-if="stepsPage === 1" class="bottom-button">
				<u-button type="primary" @click="stepReduce" color="#3d4b70" :plain="true" style="margin-right: 5px;">上一步</u-button>
				<u-button type="primary" @click="stepAddOne" color="#3d4b70">下一步</u-button>
			</view>
			<view class="sub-form" v-if="stepsPage === 2">
				<view>
					<u--form labelPosition="left" labelWidth="auto" :model="subDataModel" ref="sForm2" class="demo-ruleForm">
						<view v-for="(item, index) in dataModel.Nav_TeamDetail" :key="index">
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding-bottom: 10px;" :style="index > 0?'border-top: #e7e6e4 1px solid;padding-top:10px':''">
								<view style="font-size: 15px; font-weight: bold;color: #3d4b70;display: flex;flex-direction: row;align-items: center;">
									考核人员
									<u-badge :value="index+1" bgColor="#3d4b70" style="margin-left: 5px;"></u-badge>
									<view v-if="index>0" style="margin-left: 10px;">
										<view style="display: flex;align-items: center;" v-if="thisPer.indexOf(index)!==-1" @click="handlePersonPush(index)">
											<u-icon name="arrow-down"></u-icon>
										</view>
										<view style="display: flex;align-items: center;" v-if="thisPer.indexOf(index)==-1" @click="handlePersonPush(index)">
											<u-icon name="arrow-up"></u-icon>
										</view>
									</view>
								</view>
								<view style="font-size: 15px;align-items: center;" v-if="thisPer.indexOf(index)!==-1">
									{{item['Nav_User'].NAME}}
								</view>

							</view>
							<view v-if="thisPer.indexOf(index)==-1 && item.Nav_User">
								<u-form-item label="岗位" prop="PostName">
									<u--input disabled disabledColor="#fff" fontSize="14px" v-model="item['Nav_User']['Nav_Person']['Nav_Post'].NAME" border="none" inputAlign="right"></u--input>
								</u-form-item>
								<u-form-item label="人员" prop="PersonName">
									<u--input disabled disabledColor="#fff" fontSize="14px" v-model="item['Nav_User'].NAME" border="none" inputAlign="right"></u--input>
								</u-form-item>
								<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
									<u-form-item label="安全生产目标与指标" prop="DepartNames">
									</u-form-item>
									<u-icon name="plus-circle" color="#3D4B70" size="20" @click="handleAddPer(index)"></u-icon>
								</view>
								<view style="margin-bottom: 10px;">
									<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;margin: 10px 0px;" v-for="(item1,index1) in item.Nav_DetailContent" :key="index1">
										<u-badge :value="index1+1" bgColor="#7591d7" style="margin-right: 20px;"></u-badge>
										<u--textarea v-model="item.Nav_DetailContent[index1].NAME" inputAlign="left" placeholder="请输入内容" autoHeight maxlength='-1'>
										</u--textarea>
										<view @click="handleDelPerRowBefore(index,index1)" style="padding: 0px 0px 0px 20px;">
											<u-icon name="trash" size="24" color="#3d4b70"></u-icon>
										</view>
									</view>
								</view>
							</view>

						</view>
					</u--form>
				</view>
			</view>
			<view style="padding: 10px 16px;display: flex;flex-direction: row;align-items: center;" v-if="stepsPage === 2" class="bottom-button">
				<u-button type="primary" @click="stepReduce" color="#3d4b70" :plain="true" style="margin-right: 5px;">上一步</u-button>
				<u-button type="primary" @click="submit" color="#3d4b70">提交</u-button>
			</view>
			<!-- <view class="bottom-button">
				<button type="primary" @click="submit">提交</button>
			</view> -->
		</view>
		<u-modal :show="showDelModalIndex >= 0" @confirm="confirmDel" @cancel="cacelDel" :showCancelButton="true" title="确认删除？"></u-modal>
		<u-modal :show="showDelPerModalIndex >= 0" @confirm="confirmPerDel" @cancel="cacelPerDel" :showCancelButton="true" title="确认删除？"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendOrder,
		extendRule,
		guid,
		initFilter,
		initFilterGroup,
		extendIgnoreDataRule
	} from '../../../../utils/common'
	import {
		getRequest,
		saveformulationDepartment
	} from '../../../../services/apply/subPages/SCPT/PTServices'
	import {
		getUserLists,
	} from '../../../../services/apply/FOServices/FOServices.js'
	import config from '../../../../config/common'
	import stepTitle from '@/components/custom/step-title.vue'

	export default {
		components: {
			stepTitle,
		},
		data() {
			return {
				stepsPage: 0,
				stepsText: ['基本信息', '考核部门', '考核人员'],
				ID: null,
				TaskID: null,
				tableKey: 0,
				curTotal: 0,
				isLoadOK: false,
				showDelModalIndex: undefined,
				defaultIndex: undefined,
				showDelPerModalIndex: undefined,
				defaultPerIndex: undefined,
				userLists: [],
				thisDep: [],
				thisPer: [],
				dataModel: {
					SET_TIME: null,
					Nav_Department: {
						NAME: ''
					},
					Nav_User: {
						NAME: ''
					},
					Nav_DepartmentDetail: {
						DepartNames: {},
						Nav_Department: {
							NAME: '',
							Nav_User: {
								NAME: ''
							},
						},
						Nav_DetailContent: {
							NAME: ''
						}
					},
					Nav_Files:[]
				},
				subDataModel: {
					Nav_DepartmentDetail: {
						Nav_DetailContent: {
							NAME: ''
						},
					},
					Nav_TeamDetail: {
						Nav_DetailContent: {
							NAME: ''
						},
					}
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				comPickerInfo: {
					showSheet: false,
					columns: [],
					title: '',
					dataIndex: undefined,
					formIndex: undefined,
					name: ''
				},
				currentOperateUser: {},
				showPopup: false,
				// rules: {
				// 	'YEAR': {
				// 		type: 'string',
				// 		required: true,
				// 		trigger: ['blur', 'change']
				// 	},
				// },
			}
		},
		onLoad(opt) {
			this.handleGetLicenseGet(opt)
		},
		methods: {
			handleDelRowBefore(index, index1) {
				this.showDelModalIndex = index1
				this.defaultIndex = index
			},
			handleDelPerRowBefore(index, index1) {
				this.showDelPerModalIndex = index1
				this.defaultPerIndex = index
			},
			confirmDel() {
				this.dataModel.Nav_DepartmentDetail[this.defaultIndex].Nav_DetailContent.splice(this.showDelModalIndex, 1)
				this.showDelModalIndex = undefined
			},
			cacelDel() {
				this.showDelModalIndex = undefined
			},
			confirmPerDel() {
				this.dataModel.Nav_TeamDetail[this.defaultPerIndex].Nav_DetailContent.splice(this.showDelPerModalIndex, 1)
				this.showDelPerModalIndex = undefined
			},
			cacelPerDel() {
				this.showDelPerModalIndex = undefined
			},
			handleAddDep(index) {
				const persons = JSON.parse(JSON.stringify(this.subDataModel.Nav_DepartmentDetail.Nav_DetailContent))
				this.dataModel.Nav_DepartmentDetail[index].Nav_DetailContent.push(persons)
			},
			handleAddPer(index) {
				const persons = JSON.parse(JSON.stringify(this.subDataModel.Nav_TeamDetail.Nav_DetailContent))
				this.dataModel.Nav_TeamDetail[index].Nav_DetailContent.push(persons)
			},
			handleDepartmentPush(index) {
				if (this.thisDep.indexOf(index) == -1) {
					this.thisDep.push(index)
				} else {
					this.thisDep = this.thisDep.filter(item => item != index)
				}
			},
			handlePersonPush(index) {
				if (this.thisPer.indexOf(index) == -1) {
					this.thisPer.push(index)
				} else {
					this.thisPer = this.thisPer.filter(item => item != index)
				}
			},
			stepAdd() {
				this.stepsPage = this.stepsPage + 1
			},
			stepAddOne() {
				this.numA = 0;
				this.numB = 0;
				this.numC = 0;
				this.dataModel.Nav_DepartmentDetail.map((item, index) => {
					item.Nav_DetailContent.map((item1, index1) => {
						if (item1.NAME == '') {
							// uni.$showErrorInfo('添加安全生产目标与指标不能为空')
							return
						}
						this.numB = this.numB + 1
					})
					if (item.Nav_DetailContent.length == 0) {
						this.numC = 1;
						return
					}
					this.numA = this.numA + item.Nav_DetailContent.length
				})
				if (this.numB !== this.numA) {
					uni.$showErrorInfo('添加安全生产目标与指标不能为空')
				} else if (this.numC == 1) {
					uni.$showErrorInfo('安全生产目标与指标为必填项')
				} else {
					this.stepsPage = this.stepsPage + 1
				}
			},
			stepReduce() {
				this.stepsPage = this.stepsPage - 1
			},
			handleGetLicenseGet(opt) {
				this.TaskID = opt.taskID ? opt.taskID : null;
				this.ID = opt.ID ? opt.ID : null;
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "")
				extendRule(json, 'ID', 1, opt.ID)
				// TODO: id 未获取
				getRequest(json, "/PT/PTIndicatorFormulationDepartment/GetEdit").then(res => {
					this.dataModel = res
					if (res.DEPARTMENT_TYPE == 0) {
						res.DEPARTMENT_TYPE_SHOW = '部门'
					} else if (res.DEPARTMENT_TYPE == 1) {
						res.DEPARTMENT_TYPE_SHOW = '车间'
					} else if (res.DEPARTMENT_TYPE == 2) {
						res.DEPARTMENT_TYPE_SHOW = '班组'
					} else {
						res.DEPARTMENT_TYPE_SHOW = '公司'
					}
					//数据组装

					// if (res.Nav_DepartmentDetail && res.Nav_DepartmentDetail.length > 0) {
					// 	for (let i = 0; i < res.Nav_DepartmentDetail.length; i++) {
					// 		let strconfirmFiles = ''
					// 		let details = res.Nav_DepartmentDetail[i];
					// 		if (details.Nav_DetailContent && details.Nav_DetailContent.length > 0) {
					// 			for (let j = 0; j < details.Nav_DetailContent.length; j++) {
					// 				let depart = details.Nav_DetailContent[j].NAME;
					// 				console.log(depart,'080900')
					// 				// strconfirmFiles +=  depart;
					// 				details.DepartNames = depart
					// 			}
					// 		}
					// 	}
					// }
					// if (res.Nav_TeamDetail && res.Nav_TeamDetail.length > 0) {
					// 	for (let i = 0; i < res.Nav_TeamDetail.length; i++) {
					// 		let strconfirmFiles = ''
					// 		let details = res.Nav_TeamDetail[i];
					// 		if (details.Nav_DetailContent && details.Nav_DetailContent.length > 0) {
					// 			for (let j = 0; j < details.Nav_DetailContent.length; j++) {
					// 				let user = details.Nav_DetailContent[j].NAME;
					// 				strconfirmFiles += (strconfirmFiles.length > 0 ? "</br>" : "") + user;
					// 				details.UserNames = strconfirmFiles
					// 			}
					// 		}
					// 	}
					// }

					this.isLoadOK = true
				})
			},
			submit() {
				// const ele = this.$refs
				// ele['wForm'].validate().then(res => {
				this.numA = 0;
				this.numB = 0;
				this.numC = 0;
				this.dataModel.Nav_TeamDetail.map((item, index) => {
					item.Nav_DetailContent.map((item1, index1) => {
						if (item1.NAME == '') {
							// uni.$showErrorInfo('添加安全生产目标与指标不能为空')
							return
						}
						this.numB = this.numB + 1
					})
					if (item.Nav_DetailContent.length == 0) {
						this.numC = 1;
						return
					}
					this.numA = this.numA + item.Nav_DetailContent.length
				})
				const result = this.dataModel.Nav_Files.map((obj) => {
					// const {
					// 	IMG_FILE_ID,PRE_OPER_SCH_ID,ORG_ID
					// } = obj
						return Object.assign({}, obj, {
							IMG_FILE_ID: obj.responseText.imgFileID,
							INDICATOR_FORMULATION_DEPARTMENT_ID:this.dataModel.ID,
							ORG_ID:uni.getStorageSync('orgId')
						})
					return obj
				})
				
				this.dataModel.Nav_Files = result
				if (this.numB !== this.numA) {
					uni.$showErrorInfo('添加安全生产目标与指标不能为空')
				} else if (this.numC == 1) {
					uni.$showErrorInfo('安全生产目标与指标为必填项')
				} else {
					// this.stepsPage = this.stepsPage + 1
					this.dataModel.PUBLISH = "SaveAndNotify";
					if (this.TaskID != "") {
						this.dataModel.TaskID = this.TaskID;
					}

					this.dataModel.ID = this.ID;
					this.dataModel.ORG_ID = uni.getStorageSync('orgId')
					saveformulationDepartment(this.dataModel).then(res => {
						uni.$showMsgFunc('操作成功!', () => {
							// if (this.tableKey == null || this.tableKey == 0) {
							// 	uni.navigateTo({
							// 		url: 'jobTaskLicenseRecord'
							// 	})
							// } else {
							// uni.navigateBack()
							uni.switchTab({
								url: '/pages/index/index2'
							})
							// }
						}, 'success', 1000)
					})
				}

				// }).catch(err => {
				// 	uni.$showErrorInfo('请检查必填项，必填项不能为空')
				// })
			},
			uploadFilePromise(url) {
				const appInfoData = uni.getStorageSync('appInfo')
				const userId = appInfoData?.User?.ID || ''
				const orgId = uni.getStorageSync('orgId')
				const tenant = uni.getStorageSync('Tenant') || ''
				const remoteUrl = config.serviceHost('/PF/File/UploadFile')
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: remoteUrl,
						filePath: url,
						fileList: url,
						name: 'file',
						formData: {
							OrgId: orgId
						},
						header: {
							Tenant: tenant,
							userid: userId
						},
						success: (res) => {
							if (res.statusCode === 200) {
								const uploadResult = JSON.parse(res.data)
								if (uploadResult.IsSuccessful) {
									resolve(uploadResult.Data)
								}
							}
						}
					});
				})
			},
		}
	}
</script>

<style scoped>
	/* @import url("../../../../style/css/editTemplate.css"); */

	.page-wrap {
		/* padding: 16px 16px 166px; */
	}

	.card {
		margin: 20px 16px 10px 16px;
		padding: 20px 30px 10px 30px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.sub-form {
		margin: 20px 16px 180px 16px;
		padding: 20px 30px 10px 30px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 16px;
		box-sizing: border-box;
		background: #edf1fd;
		z-index: 999;
	}

	.upload-title {
		color: #303133;
		font-size: 15px;
		line-height: 22px;
		padding: 8px 0;
	}

	.page-wrap>>>.u-upload__button {
		margin-bottom: 0;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-textarea {
		font-size: 14px;
	}
</style>