<template>
	<view class="page-wrap">
		<view class="card">
			<view class="background"></view>
			<!-- <uni-card margin="0" :is-shadow="true"> -->
				<u--form labelPosition="left" labelWidth="auto" labelAlign="center" :model="model" :rules="rules"
					ref="wForm" errorType="border-bottom" class="demo-ruleForm">

					<u-form-item label="交接班时间：" prop="CHANGE_SHIFT_TIME" borderBottom @click="showCheckDate = true;">
						<u--input v-model="model.CHANGE_SHIFT_TIME" disabled disabledColor="#fff" placeholder="请选择交接班时间"
							border="none" inputAlign="right"  fontSize="14px"></u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="arrow-down" size="12"></u-icon>
					</u-form-item>
					<u-form-item label="交接班地点：" prop="ADDRESS" borderBottom>
						<u--input v-model="model.ADDRESS" placeholder="请输入交接班地点" border="none"
							inputAlign="right"  fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="设备工具材料存放情况" prop="DEVICE_STORAGE" borderBottom>
						<u--input disabled disabledColor="#fff" v-model="model.DEVICE_STORAGE" border="none"
							inputAlign="right" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="本班运行情况：" prop="CURRENT_CLASS_STATUS_SHOW">
						<u--input :value="model.CURRENT_CLASS_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择本班运行情况" fontSize="14px" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="存在问题：" prop="CURRENT_CLASS_QUESTION" borderBottom
						v-if="model.CURRENT_CLASS_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.CURRENT_CLASS_QUESTION" border="surround"
						v-if="model.CURRENT_CLASS_STATUS==1" disabled></u--textarea>
					<u-form-item label="处理情况：" prop="CURRENT_CLASS_MEASURE" borderBottom
						v-if="model.CURRENT_CLASS_STATUS==1" disabled>
					</u-form-item>
					<u--textarea v-model="model.CURRENT_CLASS_MEASURE" border="surround"
						v-if="model.CURRENT_CLASS_STATUS==1" disabled></u--textarea>

					<u-form-item label="设备运行情况：" prop="DEVICE_STATUS_SHOW">
						<u--input :value="model.DEVICE_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择设备运行情况" fontSize="14px" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="存在问题：" prop="DEVICE_QUESTION" borderBottom v-if="model.DEVICE_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.DEVICE_QUESTION" border="surround" v-if="model.DEVICE_STATUS==1"
						disabled></u--textarea>
					<u-form-item label="处理情况：" prop="DEVICE_MEASURE" borderBottom v-if="model.DEVICE_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.DEVICE_MEASURE" border="surround" v-if="model.DEVICE_STATUS==1"
						disabled></u--textarea>

					<u-form-item label="现场环境情况：" prop="ENVIRONMENT_STATUS_SHOW">
						<u--input :value="model.ENVIRONMENT_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择本班运行情况" fontSize="14px" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="存在问题：" prop="ENVIRONMENT_QUESTION" borderBottom
						v-if="model.ENVIRONMENT_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.ENVIRONMENT_QUESTION" border="surround"
						v-if="model.ENVIRONMENT_STATUS==1" disabled></u--textarea>
					<u-form-item label="处理情况：" prop="ENVIRONMENT_MEASURE" borderBottom
						v-if="model.ENVIRONMENT_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.ENVIRONMENT_MEASURE" border="surround"
						v-if="model.ENVIRONMENT_STATUS==1" disabled></u--textarea>

					<u-form-item label="劳保用品情况：" prop="SUPPLIES_STATUS_SHOW" borderBottom>
						<u--input :value="model.SUPPLIES_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择劳保用品情况" border="none" fontSize="14px" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="存在问题：" prop="SUPPLIES_QUESTION" borderBottom v-if="model.SUPPLIES_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.SUPPLIES_QUESTION" border="surround" v-if="model.SUPPLIES_STATUS==1"
						disabled></u--textarea>
					<u-form-item label="处理情况：" prop="SUPPLIES_MEASURE" borderBottom v-if="model.SUPPLIES_STATUS==1">
					</u-form-item>
					<u--textarea v-model="model.SUPPLIES_MEASURE" border="surround" v-if="model.SUPPLIES_STATUS==1"
						disabled></u--textarea>


					<u-form-item label="上班运行记录：" prop="LAST_CLASS_RECORD_STATUS_SHOW"
						@click="handleShowSheet({title: '运行情况', name: 'LAST_CLASS_RECORD_STATUS'})">
						<u--input :value="model.LAST_CLASS_RECORD_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择上班运行记录" border="none" inputAlign="right" fontSize="14px"></u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="arrow-down" size="12"></u-icon>
					</u-form-item>
					<u-form-item label="上班工作完成情况：" prop="LAST_CLASS_FINISH_STATUS_SHOW"
						@click="handleShowSheet({title: '运行情况', name: 'LAST_CLASS_FINISH_STATUS'})">
						<u--input :value="model.LAST_CLASS_FINISH_STATUS_SHOW" disabled disabledColor="#fff"
							placeholder="请选择上班工作完成情况" border="none" inputAlign="right" fontSize="14px"></u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="arrow-down" size="12"></u-icon>
					</u-form-item>
					<u-form-item label="上班运行记录存在问题：" prop="LAST_CLASS_RECORD_QUESTION" borderBottom>
					</u-form-item>
					<u--textarea v-model="model.LAST_CLASS_RECORD_QUESTION" placeholder="请输入运行记录存在问题"
						border="surround"></u--textarea>
					<u-form-item label="上班工作完成情况：" prop="LAST_CLASS_FINISH_QUESTION" borderBottom>
					</u-form-item>
					<u--textarea v-model="model.LAST_CLASS_FINISH_QUESTION" placeholder="请输入上班工作完成情况"
						border="surround"></u--textarea>
					<u-form-item label="交班人员：" prop="PreUsers" borderBottom>
						<u--input v-html="model.PreUsers" border="none" slot="right" fontSize="14px"></u--input>
					</u-form-item>
					<!-- <u-form-item v-if="!isCreate" label="接班人员：" prop="AfterUsers" borderBottom>
						<u--input v-html="model.AfterUsers" border="none" slot="right" fontSize="14px"></u--input>
					</u-form-item> -->
					<u-form-item label="接班人员：">
						<u-icon name="man-add" @click="handleShowUserSelector()" size="24" color="#3d9cff"
							slot="right" ></u-icon>
					</u-form-item>
					<view v-show="!!model.Nav_AfterUsers.length" class="tag-view">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_AfterUsers.filter(i => !i.IS_DELETED)" :key="k"
							:inverted="true" :text="i.NAME" type="primary" />
					</view>
					<view class="upload-title">附件</view>
					<full-upload v-model="model.Nav_Files" :listProp='listPropUpload'
						:listPropVal='listPropValUpload' :isShowBtn="false"></full-upload>
					<u-datetime-picker :show="showCheckDate" mode="datetime" v-model="model.CHANGE_SHIFT_TIME"
						@confirm="handleCheckDate" @close="showCheckDate = false;"
						@cancel="showCheckDate = false;"></u-datetime-picker>
				</u--form>
			<!-- </uni-card> -->
		</view>

		<people-selector-fo :defaultChecked="peopleSelectOption.defaultChecked" :show="peopleSelectOption.showSelector"
			@select="handleSelectorPeople" @close="peopleSelectOption.showSelector = false">
		</people-selector-fo>
		<u-picker :defaultIndex="[0]" :show="comPickerInfo.showSheet" :columns="comPickerInfo.columns"
			@confirm="onConfirmPicker" @close="closePicker" @cancel="closePicker" keyName="NAME"></u-picker>
		<view class="bottom-button"  style="padding: 10px 16px;" >
			<u-button type="primary" @click="submit"  color="#3d4b70">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendOrder,
		extendRule,
		guid,
		initFilter,
		initFilterGroup
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices';
	import config from '../../../../config/common'

	export default {
		data() {
			return {
				listPropUpload: ['CHANGE_SHIFT_RECORD_ID'],
				listPropValUpload: [],
				userLists: [],
				model: {Nav_AfterUsers: [{
						USER_ID: '',
						NAME: '',
						Nav_User: {
							NAME: ''
						}
					}],
					CURRENT_CLASS_STATUS: 0,
					CHANGE_SHIFT_TIME: uni.$u.timeFormat(Date(), 'yyyy-mm-dd hh:MM:ss'),
				},
				subModel: {
					Nav_User: {},
					USER_ID: ""
				},
				rules: {
					'ACTIVITY_CONTENT': {
						type: 'string',
						required: true,
						trigger: ['blur', 'change']
					}
				},
				comPickerInfo: {
					showSheet: false,
					columns: [],
					title: '',
					dataIndex: undefined,
					formIndex: undefined,
					name: ''
				},
				peopleSelectOption: {
					showSelector: false,
					value: null,
					index: 0,
					defaultChecked: []
				},
				currentOperateUser: {},
				showPopup: false,
				tableKey: '0',
				TaskID: '',
				isLoadOK: false,
				showDelModalIndex: undefined,
				showCheckDate: false,
				isCreate: false,
				ORG_ID: uni.getStorageSync('orgId'),
			}
		},
		onLoad(option) {
			this.model.ID = option.ID;
			this.TaskID = option.taskID ? option.taskID : '';
			this.tableKey = option.tableKey ? option.tableKey : '0';
			this.loadData();
		},
		methods: {
			loadData() {
				const json = initFilter(this.ORG_ID, "", "")
				if (this.listPropValUpload.length == 0) {
					this.listPropValUpload.push(this.model.ID)
				}
				extendInclude(json, "Nav_Department")
				extendInclude(json, "Nav_DepartmentPost")
				extendInclude(json, "Nav_Class")
				extendInclude(json, "Nav_Files.Nav_ImgFile")
				extendInclude(json, "Nav_PreUsers.Nav_User")
				extendInclude(json, "Nav_AfterUsers.Nav_User")

				extendRule(json, 'ID', 1, this.model.ID)
				getRequest(json, "/FO/ChangeShiftRecord/Get").then(res => {
					this.model = res;
					this.model.CURRENT_CLASS_STATUS == 0 ? this.model.CURRENT_CLASS_STATUS_SHOW = "正常" : this.model
						.CURRENT_CLASS_STATUS_SHOW = "不正常";
					this.model.DEVICE_STATUS == 0 ? this.model.DEVICE_STATUS_SHOW = "正常" : this.model
						.DEVICE_STATUS_SHOW = "正常";
					this.model.ENVIRONMENT_STATUS == 0 ? this.model.ENVIRONMENT_STATUS_SHOW = "正常" : this.model
						.ENVIRONMENT_STATUS_SHOW = "正常";
					this.model.SUPPLIES_STATUS == 0 ? this.model.SUPPLIES_STATUS_SHOW = "正常" : this.model
						.SUPPLIES_STATUS_SHOW = "正常";
					this.model.SUPPLIES_USED == 0 ? this.model.SUPPLIES_USED_SHOW = "否" : this.model
						.SUPPLIES_USED_SHOW = "是";
					this.model.LAST_CLASS_RECORD_STATUS == 0 ? this.model.LAST_CLASS_RECORD_STATUS_SHOW = "完整" :
						this.model.LAST_CLASS_RECORD_STATUS_SHOW = "不完整";
					this.model.LAST_CLASS_FINISH_STATUS == 0 ? this.model.LAST_CLASS_FINISH_STATUS_SHOW = "完成" :
						this.model.LAST_CLASS_FINISH_STATUS_SHOW = "未完成";


					let strUserName = '';
					if (res.Nav_PreUsers && res.Nav_PreUsers.length > 0) {
						for (let i = 0; i < res.Nav_PreUsers.length; i++) {
							if (res.Nav_PreUsers[i].USER_SHIFT_STATUS == 0) {
								strUserName += (strUserName.length > 0 ? "," : "") + "<text style='color:red'>" +
									res.Nav_Users[i].Nav_User.NAME + "</text>";
							} else {
								strUserName += (strUserName.length > 0 ? "," : "") + res.Nav_PreUsers[
									i].Nav_User.NAME;
							}

						}
					}
					this.model.PreUsers = strUserName;
					strUserName = '';
					let temp=[];
					if (res.Nav_AfterUsers && res.Nav_AfterUsers.length > 0) {
						for (let i = 0; i < res.Nav_AfterUsers.length; i++) {
							if (res.Nav_AfterUsers[i].USER_SHIFT_STATUS == 0) {
								strUserName += (strUserName.length > 0 ? " " : "") +
									"&nbsp;<text style='color:red'>" +
									res.Nav_AfterUsers[i].Nav_User.NAME + "</text>";
							} else {
								strUserName += (strUserName.length > 0 ? " " : "") + res.Nav_AfterUsers[
									i].Nav_User.NAME;
							}
							temp.push(res.Nav_AfterUsers[i]);
						}
					} else {
						this.isCreate = true;
					}
					if (temp != null && temp.length > 0) {
						temp.forEach(e => e.NAME = e.Nav_User.NAME)
					}
					this.model.AfterUsers = strUserName;
					this.model.Nav_AfterUsers = temp;
				})
			},
			onConfirmPicker(e) {
				const {
					name,
					formIndex
				} = this.comPickerInfo
				this.model[name] = e.value[0].ID
				this.model[name + '_SHOW'] = e.value[0].NAME
				this.comPickerInfo.showSheet = false
			},

			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},
			handleCheckDate(e) {
				this.showCheckDate = false
				this.model.CHANGE_SHIFT_TIME = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
			},
			handleSelectorPeople(e) {
				const {
					index: key
				} = this.peopleSelectOption
				this.model.Nav_AfterUsers = e.map(i => {
					return {
						USER_ID: i.USER_ID,
						ID: i.ID || guid(),
						CHANGE_SHIFT_RECORD_ID: this.model.ID,
						ORG_ID: this.ORG_ID,
						IS_DELETED: i.IS_DELETED,
						NAME: i.NAME,
						Nav_User: {
							NAME: i.NAME,
							ID: i.USER_ID
						}
					}
				})
			},
			handleShowUserSelector() {
				this.peopleSelectOption = {
					showSelector: true,
					defaultChecked: this.model.Nav_AfterUsers.map(i => {
						return {
							...i,
							NAME: i.Nav_User.NAME,
							USER_ID: i.Nav_User.ID,
						}
					})
				}
				console.log(this.peopleSelectOption.defaultChecked)
			},
			submit() {
				const ele = this.$refs
				ele['wForm'].validate().then(res => {
					this.model.PUBLISH = "SaveAndNotify";
					this.model.TaskID = this.TaskID;
					getRequest(this.model, "/FO/FOChangeShiftRecord/SaveAndNotice").then(res => {
						if (res) {
							uni.$showMsgFunc('操作成功!', () => {
								uni.navigateBack()
							}, 'success', 1000)
						}
					})
				}).catch(err => {
					uni.$showErrorInfo('请检查必填项，必填项不能为空')
				})
			},
			async handleShowSheet(p) {
				let column = []
				if (p.name === 'LAST_CLASS_RECORD_STATUS') {
					column = [{
							NAME: '完整',
							ID: 0
						},
						{
							NAME: '不完整',
							ID: 1
						}
					]
				} else if (p.name === 'LAST_CLASS_FINISH_STATUS') {
					column = [{
							NAME: '完成',
							ID: 0
						},
						{
							NAME: '未完成',
							ID: 1
						}
					]
				}

				if (column.length) {
					this.comPickerInfo = {
						showSheet: true,
						title: p.title,
						name: p.name,
						formIndex: p.formIndex,
						columns: [column]
					}
				} else {
					// 暂无数据
				}
			},
		}
	}
</script>

<style scoped>
	.page-wrap {
		/* padding: 16px 16px 66px; */
	}


	.background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #edf1fd;
		z-index: -1;
	}
	.card {
		margin: 20px 16px 100px 16px;
		/* border: 1px solid #EBEEF5; */
		padding: 20px 30px 40px 30px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		background-color: #ffffff;
		border-radius: 10px;
	}
	.upload-title {
		font-size: 14px;
		color: #8e8b9c;
		line-height: 22px;
		padding: 8px 0px;
	}
	.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;
	}

	.sub-form {
		margin-bottom: 16px;
	}

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



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