<template>
	<view>
		<step-title :stepPage="stepsPage" :stepText="stepsText"></step-title>
		<view class="allview">
			<view class="card">
				<u--form labelWidth="auto" :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="CODE">
						<u--input v-model="dataModel.CODE" disabledColor="#ffffff" placeholder="请输入隐患地点" fontSize="14px" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="重大隐患" prop="CHOOSE">
						<u-switch inactiveColor="rgb(230, 230, 230)" size="24" space="4" v-model="dataModel.CHOOSE" @change="changeChoose"></u-switch>
					</u-form-item>
					<u-form-item label="问题描述" prop="EFFECTIVE">
					</u-form-item>
					<u--textarea v-model="dataModel.EFFECTIVE" placeholder="请输入描述内容" border="surround" inputAlign="left">
					</u--textarea>
					<view class="upload-title">隐患照片：</view>
					<u-upload :fileList="pictureLists" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="5" style="margin-bottom: 0;" :previewFullImage="true" uploadIcon="plus"></u-upload>
					<!-- <u-form-item label="上报人" prop="PUSHNAME" v-if="stepsPage === 1">
						<u--input v-model="dataModel.PUSHNAME" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
						</u--input>
					</u-form-item> -->
						<u-form-item label="隐患上报人" prop="REPORTPEO">
							<u--input v-model="dataModel.REPORTPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
						<u-form-item label="隐患确认人" prop="VERIFYPEO">
							<u--input v-model="dataModel.VERIFYPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
						<u-form-item label="整改责任人" prop="DUTYPEO">
							<u--input v-model="dataModel.DUTYPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
						<u-form-item label="整改期限" prop="LIMITPEO">
							<u--input v-model="dataModel.LIMITPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
						<!-- <u-form-item label="整改验收人" prop="CHECKPEO">
							<u--input v-model="dataModel.CHECKPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item> -->
					<u-form-item label="整改落实人" prop="IMPLEMENTPEO" v-if="stepsPage === 0">
						<u--input v-model="dataModel.IMPLEMENTPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="sub-form" >
				<view>
					<u--form labelPosition="left" labelWidth="90px" ref="sForm" class="demo-ruleForm" size="mini">
						<u-form-item label="整改情况" prop="STATUS" >	
						</u-form-item>
						<u--textarea v-model="dataModel.STATUS" placeholder="请输入整改情况" border="surround" inputAlign="left"></u--textarea>
						<u-form-item label="整改附件" prop="Nav_Files" >					
						</u-form-item>
						<full-upload v-model="dataModel.Nav_Files" :isShowBtn='true' :listProp='listPropUpload' :listPropVal='listPropValUpload'></full-upload>
						<u-form-item label="整改落实人" prop="IMPLEMENTPEO" v-if="stepsPage === 1||stepsPage === 2">
							<u--input v-model="dataModel.IMPLEMENTPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
						<u-form-item label="整改验收人" prop="CHECKPEO" v-if="stepsPage === 2">
							<u--input v-model="dataModel.CHECKPEO" disabled disabledColor="#ffffff" border="none" inputAlign="right" fontSize="14px">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
			
			</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 style="padding: 10px 16px;display: flex;flex-direction: row;" v-if="stepsPage === 1" class="bottom-button">
				<button type="default" @click="stepReduce" :plain="true"
					style="margin-right: 5px;background-color: #fff;color: #3d4b70;width: 50%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 14px;">驳回</button>
				<button type="default" @click="stepAddTwo"
					style="margin-left: 5px;background-color: #3d4b70;color: #fff;width: 50%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 14px;">提交</button>
				<!-- <u-button type="primary" @click="stepReduce" color="#3d4b70" :plain="true" style="margin-right: 5px;">上一步</u-button>
				<u-button type="primary" @click="stepAddTwo" color="#3d4b70" style="margin-left: 5px;">下一步</u-button> -->
			</view>
			<view style="padding: 10px 16px;display: flex;flex-direction: row;" v-if="stepsPage === 2" class="bottom-button">
				<u-button type="primary" @click="stepAddThree" color="#3d4b70" style="margin-left: 5px;">提交</u-button>
			</view>

			<view style="padding 10px 16px;display: flex;flex-direction: row;" v-if="stepsPage === 3" class="bottom-button">
				<u-button type="primary" @click="stepAddFour" color="#3d4b70" style="margin-left: 5px;">确认</u-button>
			</view>
		</view>
		<u-datetime-picker :show="showCheckDate1" mode="datetime" v-model=START_TIME @confirm="handleCheckDate1" @close="showCheckDate1 = false;" @cancel="showCheckDate1 = false;"></u-datetime-picker>
		<query-selector :show="selectorInfo.showPopup" :title="selectorInfo.title" :lists="selectorInfo.dataLists" :defaultChecked="selectorInfo.defaultChecked" @search="handleSearch" @select="handleSelected"
			@close="selectorInfo.showPopup=false" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import stepTitle from '@/components/custom/step-title.vue'
	import config from '../../../config/common'

	export default {
		components: {
			stepTitle,
		},
		data() {
			return {
				stepsText: ['隐患落实', '整改确认', '整改验收', '归档'],
				pictureLists: [],
				dataModel: {
					CODE: '',
					CHOOSE: false,
					EFFECTIVE: '',
					DUTY: '',
					LIMIT: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
					CHECK: '',
					PUSHNAME: '',

					REPORTPEO: '',
					VERIFYPEO: '',
					DUTYPEO: '',
					LIMITPEO: '',
					CHECKPEO: '',

					IMPLEMENTPEO: '',
					
					STATUS:'',
					Nav_Files:[]

				},
				listPropUpload: ['PRE_SHIFT_MEETING_RECORD_ID'],
				listPropValUpload: [],
				stepsPage: 0,
				showCheckDate1: false,
				START_TIME: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
				selectorInfo: {
					name: 'user',
					showPopup: false,
					title: '人员选择',
					dataLists: [],
					defaultChecked: []
				},
			}
		},
		// onLoad(opt) {
		// 	this.handleGetJobActivityGet(opt)
		// },
		// onNavigationBarButtonTap(e) {
		// 	this.submitTemp()
		// },
		methods: {
			handleSearch(val) {
				if (val == 'DUTY') {
					this.selectorInfo.dataLists = [{
						name: '如不那',
						code: '',
						index: 1
					}, {
						name: '阿达瓦',
						code: '',
						index: 1
					}, {
						name: '阿迪王',
						code: '',
						index: 1
					}, {
						name: '人参果',
						code: '',
						index: 1
					}, {
						name: '首付',
						code: '',
						index: 1
					}, {
						name: '激发态',
						code: '',
						index: 1
					}]
				}
				if (val == 'CHECK') {
					this.selectorInfo.dataLists = [{
						name: '那',
						code: '',
						index: 2
					}, {
						name: '瓦',
						code: '',
						index: 2
					}, {
						name: '王',
						code: '',
						index: 2
					}, {
						name: '人参果',
						code: '',
						index: 2
					}, {
						name: '首付',
						code: '',
						index: 2
					}, {
						name: '激发态',
						code: '',
						index: 2
					}]
				}

			},
			handleSelected(e) {
				console.log(e, '12')
				this.selectorInfo.showPopup = false
				if (e.index == 1) {
					this.dataModel.DUTY = e.name
				} else {
					this.dataModel.CHECK = e.name
				}

			},
			handleChange(name) {
				this.selectorInfo.title = '人员选择'
				this.selectorInfo.defaultChecked = []
				this.selectorInfo.name = name
				this.selectorInfo.showPopup = true
				this.handleSearch(name)
			},

			handleCheckDate1(e) {
				this.showCheckDate1 = false;
				this.dataModel.LIMIT = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`pictureLists`].length
				lists.map((item) => {
					this[`pictureLists`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`pictureLists`][fileListLen]
					this[`pictureLists`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						IMG_FILE_ID: result.imgFileID
						// url: result
					}))
					fileListLen++
				}
			},
			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)
								}
							}
						}
					});
				})
			},
			deletePic(event) {
				this[`pictureLists`].splice(event.index, 1)
			},
			changeChoose(e) {
				console.log(e, '9899989')
				// this.dataModel.CHOOSE = !this.dataModel.CHOOSE
			},
			stepAdd() {
				this.stepsPage = this.stepsPage + 1
			},
			stepAddTwo() {
				this.stepsPage = this.stepsPage + 1
			},
			stepAddThree() {
				this.stepsPage = this.stepsPage + 1
			},
			stepAddFour() {
				this.stepsPage = this.stepsPage + 1
			},
			stepReduce() {
				this.stepsPage = this.stepsPage - 1
			},
			stepReduceTwo() {
				this.stepsPage = this.stepsPage - 1
			},

			submit() {



			},
			submitTemp() {



			},

		}
	}
</script>

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

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

	.allview {
		padding: 0px 0px 180px 0px;
	}

	.card {
		/* margin-bottom: 18px; */
		margin: 20px 16px 10px 16px;
		/* border: 1px solid #EBEEF5; */
		padding: 20px 30px 10px 30px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		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;
	}

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

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

	/* 	.demo-ruleForm-thr>>>.u-textarea {
		padding: 9px 9px 25px 9px;
	}
	 */
	.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		margin-right: 20px;
		/* justify-content: flex-start; */
	}

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

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

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


	/* .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-form-item__body__right__content__slot {
		justify-content: flex-end;
	}

	.full-upload-border>>>.u-line {
		border-bottom: 0px !important;
	}

	.sub-form {
		margin: 20px 16px 80px 16px;
		padding: 20px 30px 20px 30px;
		background-color: #ffffff;
		border-radius: 10px;
	}
</style>