<template>
	<view class="page">
		<l-select :disabled="disabled" v-model="queryData.Creater" :range="dataSource.Creater" title="填报人员" :placeholder="title.Creater" />
		<l-date-picker v-model="queryData.CreateTime" title="填报时间" placeholder="" :end="todayTime" />
		<l-select v-model="queryData.Type" :range="dataSource.Type" title="类别" placeholder="请选择" />
		<l-select v-if="!DepartFlag" v-model="queryData.Department" :range="dataSource.Department" title="所在部门" placeholder="请选择" />
		<l-input v-if="DepartFlag" v-model="queryData.StudentSource" title="所在班级" placeholder="请填写所在班级" right />
		<l-select v-model="queryData.HealthSituation" :range="dataSource.HealthSituation" title="健康状况" placeholder="请选择" />
		<l-select v-model="queryData.Gender" :range="dataSource.Gender" title="性别" placeholder="请选择" />
		<l-input v-model="queryData.HomeAddress" title="家庭住址" placeholder="请填写家庭住址" right />
		<l-input v-model="queryData.Mobile" title="联系方式" placeholder="请填写联系方式" right />
		<l-input v-model="queryData.Objective" title="当前地址" placeholder="请填写当前地址" right />
		<l-select v-model="queryData.IsOut" :range="dataSource.YesOrNoInt" title="*是否外出" placeholder="请选择" @change="change('PassPlaces')" />
		<view class="checkInBox" v-show="queryData.IsOut == 1">
			<view class="checkInCon" v-for="(item, i) in queryData.PassPlaces" :key="item.Time">
				<view class="checkInT">
					经过地点记录（{{ i + 1 }}）
					<text @click="remove('PassPlaces', i)" class="remove" v-show="queryData.PassPlaces.length > 1">删除</text>
				</view>
				<l-select v-model="item.PassType" :range="dataSource.EpiPassType" title="类别" placeholder="请选择" />
				<location-picker v-model="item.ProvinceArea" :code="item.ProvinceArea"></location-picker>
				<l-input v-model="item.Address" title="详细住址" placeholder="请填写详细住址" right />
				<l-datetime-picker v-model="item.Time" title="隔离时间" />
				<l-select v-model="item.Vehicle" :range="dataSource.Vehicle" title="交通工具" placeholder="请选择交通工具" />
				<l-input v-model="item.VehicleNo" title="班次号" placeholder="请填写班次号" right />
			</view>
			<view class="checkInBtn" @click="add('PassPlaces')">
				<text class="text-xxl cuIcon cuIcon-add"></text>
				增加经过地点记录
			</view>
		</view>
		<l-select v-model="queryData.HasFamily" :range="dataSource.YesOrNoInt" title="*家人异常" placeholder="请选择" @change="change('ContactsDetails')" />
		<view class="checkInBox" v-show="queryData.HasFamily == 1">
			<view class="checkInCon" v-for="(item, i) in queryData.ContactsDetails" :key="item.QTTime">
				<view class="checkInT">
					接触家人（{{ i + 1 }}）
					<text @click="remove('ContactsDetails', i)" class="remove" v-show="queryData.ContactsDetails.length > 1">删除</text>
				</view>
				<l-input v-model="item.Name" title="名字" placeholder="请填写名字" right />
				<l-select v-model="item.Gender" :range="dataSource.Gender" title="性别" placeholder="请选择性别" />
				<l-input v-model="item.Mobile" title="联系方式" placeholder="请填写联系方式" right />
				<l-select v-model="item.QTType" :range="dataSource.QTType" title="隔离方式" placeholder="请选择隔离方式" />
				<location-picker v-model="item.ProvinceArea" :code="item.ProvinceArea"></location-picker>
				<l-input v-model="item.QTAddress" title="隔离地点" placeholder="请填写隔离地点" right />
				<l-datetime-picker v-model="item.QTTime" title="隔离时间" />
				<l-datetime-picker v-model="item.QTContactTime" title="接触隔离时间" />
				<l-select v-model="item.Fever" :range="dataSource.HealthSituation" title="健康状况" placeholder="请选择健康状况" />
			</view>
			<view class="checkInBtn" @click="add('ContactsDetails')">
				<text class="text-xxl cuIcon cuIcon-add"></text>
				增加接触家人
			</view>
		</view>
		<l-select v-model="queryData.HasPeople" :range="dataSource.YesOrNoInt" title="*疫区人异常" placeholder="请选择" @change="change('PeopleDetails')" />
		<view class="checkInBox" v-show="queryData.HasPeople == 1">
			<view class="checkInCon" v-for="(item, i) in queryData.PeopleDetails" :key="item.QTTime">
				<view class="checkInT">
					接触人（{{ i + 1 }}）
					<text @click="remove('PeopleDetails', i)" class="remove" v-show="queryData.PeopleDetails.length > 1">删除</text>
				</view>
				<l-input v-model="item.Name" title="名字" placeholder="请填写名字" right />
				<l-select v-model="item.Gender" :range="dataSource.Gender" title="性别" placeholder="请选择性别" />
				<l-input v-model="item.Mobile" title="联系方式" placeholder="请填写联系方式" right />
				<l-select v-model="item.QTType" :range="dataSource.QTType" title="隔离方式" placeholder="请选择隔离方式" />
				<location-picker v-model="item.ProvinceArea" :code="item.ProvinceArea"></location-picker>
				<l-input v-model="item.QTAddress" title="隔离地点" placeholder="请填写隔离地点" right />
				<l-datetime-picker v-model="item.QTTime" title="隔离时间" />
				<l-datetime-picker v-model="item.QTContactTime" title="接触隔离时间" />
				<l-select v-model="item.Fever" :range="dataSource.HealthSituation" title="健康状况" placeholder="请选择健康状况" />
			</view>
			<view class="checkInBtn" @click="add('PeopleDetails')">
				<text class="text-xxl cuIcon cuIcon-add"></text>
				增加接触人
			</view>
		</view>
		<view class="btn" @click="submit">{{ submitTxt}}</view>
	</view>
</template>

<script>
import moment from 'moment';
import get from 'lodash/get';
import set from 'lodash/set';
import todayTime from '@/common/js/todayTime.js';
import locationPicker from '@/components/location/location.vue';
export default {
	components: {
		locationPicker
	},
	data() {
		return {
			scheme: {
				Creater: {
					type: 'select',
					dataSource: '1',
					dataSourceId: 'BaseUser,f_realname,f_userid'
				}
			},
			title:{
				Creater: '请选择...',
			},
			disabled: false,
			submitTxt: '',
			select3: '0',
			pageInfo: null,
			userInfo: null,
			todayTime: todayTime.fmtDate().ymd,
			DepartFlag: true,
			//下拉
			dataSource: {
				Creater: [],
				Type: [],
				HealthSituation: [],
				Gender: [],
				YesOrNoInt: [],
				Department: [],
				EpiPassType: [],
				Vehicle: [],
				QTType: [],
				PassPlaces: {
					EpiPassType: '',
					ProvinceArea: '',
					Address: '',
					Time: '',
					Vehicle: '',
					VehicleNo: ''
				},
				ContactsDetails: {
					Name: '',
					Gender: '',
					Mobile: '',
					QTType: '',
					ProvinceArea: '',
					QTAddress: '',
					QTTime: '',
					QTContactTime: '',
					Fever: ''
				},
				PeopleDetails: {
					Name: '',
					Gender: '',
					Mobile: '',
					QTType: '',
					ProvinceArea: '',
					QTAddress: '',
					QTTime: '',
					QTContactTime: '',
					Fever: ''
				}
			},
			queryData: {
				keyValue: '',
				Creater: '',
				Type: '',
				Department: '',
				CreateTime: todayTime.fmtDate().ymd,
				StudentSource: '',
				HealthSituation: '',
				Gender: '',
				HomeAddress: '',
				Mobile: '',
				Objective: '',
				IsOut: '',
				PassPlaces: [
					{
						PassType: '',
						ProvinceArea: '',
						Address: '',
						Time: '',
						Vehicle: '',
						VehicleNo: ''
					}
				],
				HasFamily: '',
				ContactsDetails: [
					{
						Name: '',
						Gender: '',
						Mobile: '',
						QTType: '',
						ProvinceArea: '',
						QTAddress: '',
						QTTime: '',
						QTContactTime: '',
						Fever: ''
					}
				],
				HasPeople: '',
				PeopleDetails: [
					{
						Name: '',
						Gender: '',
						Mobile: '',
						QTType: '',
						ProvinceArea: '',
						QTAddress: '',
						QTTime: '',
						QTContactTime: '',
						Fever: ''
					}
				]
			}
		};
	},
	methods: {
		async init() {
			let _this = this;
			// 拉取加载列表和数据源
			await Promise.all([
				this.FETCH_DATASOURCE('classdata').then(data => {
					//console.log(data)
					this.dataSource.Department = data.data.map(t => ({
						text: t.f_fullname,
						value: t.f_parentid
					}));
				}),
				this.FETCH_DATASOURCE('BaseUser').then(data => {
					// console.log(data)
					this.dataSource.Creater = data.data.map(t => ({
						text: t.f_realname,
						value: t.f_userid
					}));
				}),
		
				() => {}
			]);
		
			let dataDictionary = this.GET_GLOBAL('dataDictionary');
			this.dataSource.Type = Object.values(dataDictionary.EUserType).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.HealthSituation = Object.values(dataDictionary.EpiHealth).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.Gender = Object.values(dataDictionary.usersex).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.YesOrNoInt = Object.values(dataDictionary.YesOrNoInt).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.EpiPassType = Object.values(dataDictionary.EpiPassType).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.Vehicle = Object.values(dataDictionary.Vehicle).map(t => ({ value: t.value, text: t.text }));
			this.dataSource.QTType = Object.values(dataDictionary.QuarantineType).map(t => ({ value: t.value, text: t.text }));
			// console.log(this.dataSource.YesOrNoInt);
		
			// 拉取加载列表和数据源
			_this.pageInfo = _this.GET_PARAM(); //获取页面传递参数
			// console.log(_this.pageInfo);
			_this.queryData.keyValue = _this.pageInfo.keyValue;
			_this.userInfo = _this.GET_GLOBAL('loginUser');
			// console.log(_this.userInfo);
			//新建时获取登陆人信息
			if (_this.pageInfo.type == 'add') {
				_this.submitTxt = '提交';
				_this.dataSource.Creater = [
					{
						text: _this.userInfo.realName,
						value: _this.userInfo.userId
					}
				];
		
				_this.queryData.Creater = _this.userInfo.userId;
				_this.queryData.Department = _this.userInfo.departmentId;
				_this.queryData.Gender = JSON.stringify(_this.userInfo.gender);
				_this.queryData.Mobile = _this.userInfo.mobile;
				_this.queryData.IsOut = '0';
				_this.queryData.HasFamily = '0';
				_this.queryData.HasPeople = '0';
				_this.queryData.HealthSituation = '0';
		
				//定位
				// $page.find('#Objective').val(returnCitySN.cname)
				if (_this.userInfo.Description == '学生') {
					_this.queryData.Type = '5';
					_this.LOADING('加载数据中…');
					_this.HTTP_GET('learun/PersonnelManagement/EpidemicSituationCopy/getStuSource', _this.userInfo.account, '加载数据时出错').then(data => {
						this.HIDE_LOADING();
						if (data) {
							_this.queryData.HomeAddress = data.Address;
							_this.queryData.StudentSource = data.res;
						}
					});
				} else {
					_this.LOADING('加载数据中…');
					_this.HTTP_GET('learun/PersonnelManagement/EpidemicSituationCopy/getUserSource', _this.userInfo.userId, '加载数据时出错').then(data => {
						this.HIDE_LOADING();
						if (data) {
							_this.queryData.HomeAddress = data.Address;
						}
					});
				}
		
				if (_this.userInfo.Description != '学生') {
					_this.DepartFlag = false;
				}
			}else{
				_this.LOADING('加载数据中…');
				_this.HTTP_GET('learun/PersonnelManagement/EpidemicSituationCopy/form', _this.pageInfo.keyValue, '加载数据时出错').then(data => {
					this.HIDE_LOADING();
					if (data) {
						console.log(data)
						// data.EpidemicSituation.forEach((n, i) => {
						// 	console.log(i)
						// })
						_this.disabled = 'disabled';
						for(let j in data.EpidemicSituation){
							// console.log(j)
							let txt = data.EpidemicSituation[j];
							_this.queryData[j] = txt;
						}
						if(data.EpidemicSituation.IsOut == 1){
							_this.queryData.PassPlaces.length = 0;
							_this.queryData.PassPlaces = this.COPY(data.PassPlaces);
							_this.queryData.PassPlaces.forEach((n,i)=>{
								n.ProvinceArea = n.Province + ',' + n.City + ',' + n.Area;
								for(let j in n){
									if(typeof n[j] == 'number'){
										n[j] = JSON.stringify(n[j]);
									}
								}
							})
						}
						if(data.EpidemicSituation.HasPeople == 1){
							_this.queryData.PeopleDetails.length = 0;
							_this.queryData.PeopleDetails = this.COPY(data.PeopleDetails);
							_this.queryData.PeopleDetails.forEach((n,i)=>{
								n.ProvinceArea = n.Province + ',' + n.City + ',' + n.Area;
								for(let j in n){
									if(typeof n[j] == 'number'){
										n[j] = JSON.stringify(n[j]);
									}
								}
							})
						}
						if(data.EpidemicSituation.HasFamily == 1){
							_this.queryData.ContactsDetails.length = 0;
							_this.queryData.ContactsDetails = this.COPY(data.ContactsDetails);
							_this.queryData.ContactsDetails.forEach((n,i)=>{
								n.ProvinceArea = n.Province + ',' + n.City + ',' + n.Area;
								for(let j in n){
									if(typeof n[j] == 'number'){
										n[j] = JSON.stringify(n[j]);
									}
								}
							})
						}
						_this.queryData.Department = JSON.stringify(_this.queryData.Department);
						_this.queryData.Gender = JSON.stringify(_this.userInfo.gender);
						_this.queryData.IsOut = JSON.stringify(_this.queryData.IsOut);
						_this.queryData.HasFamily = JSON.stringify(_this.queryData.HasFamily);
						_this.queryData.HasPeople = JSON.stringify(_this.queryData.HasPeople);
						_this.queryData.Type = JSON.stringify(_this.queryData.Type);
						_this.title.Creater = _this.displayListItem({Creater: _this.queryData.Creater}, 'Creater');
						
						
						console.log(_this.queryData)
					}
				});
				_this.submitTxt = '修改';
			}
		},
		change(e) {
			//console.log(e);
		},
		submit() {
			console.log(this.queryData);
			let _postData = {};
			_postData.keyValue = this.pageInfo.keyValue;
			let pageForm = {
				Creater: this.queryData.Creater,
				CreateTime: this.queryData.CreateTime,
				Type: this.queryData.Type,
				Department: this.queryData.Department,
				StudentSource: this.queryData.StudentSource,
				HealthSituation: this.queryData.HealthSituation,
				Gender: this.queryData.Gender,
				HomeAddress: this.queryData.HomeAddress,
				Mobile: this.queryData.Mobile,
				Objective: this.queryData.Objective,
				IsOut: this.queryData.IsOut,
				HasFamily: this.queryData.HasFamily,
				HasPeople: this.queryData.HasPeople,
				Provice: this.queryData.Provice,
				OutArea: this.queryData.OutArea,
				City: this.queryData.City
			};
			if (this.queryData.IsOut == 1) {
				console.log(this.queryData.PeopleDetails)
				pageForm.Provice = '';
				pageForm.OutArea = '';
				pageForm.City = '';

				this.queryData.PassPlaces.forEach((n, i) => {
					let areaInfo = n.ProvinceArea.split(',');
					n.Province = areaInfo[0];
					n.City = areaInfo[1];
					n.Area = areaInfo[2];
				});
				_postData.strpassPlaceList = JSON.stringify(this.queryData.PassPlaces);
			} else {
				_postData.strpassPlaceList = '[]';
			}
			if (this.queryData.HasPeople == 1) {
				console.log(this.queryData.PeopleDetails)
				this.queryData.PeopleDetails.forEach((n, i) => {
					let areaInfo = n.ProvinceArea.split(',');
					n.Province = areaInfo[0];
					n.City = areaInfo[1];
					n.Area = areaInfo[2];
				});
				_postData.strpeopleDetailsList = JSON.stringify(this.queryData.PeopleDetails);
			} else {
				_postData.strpeopleDetailsList = '[]';
			}

			if (this.queryData.HasFamily == 1) {
				console.log(this.queryData.ContactsDetails)
				this.queryData.ContactsDetails.forEach((n, i) => {
					let areaInfo = n.ProvinceArea.split(',');
					n.Province = areaInfo[0];
					n.City = areaInfo[1];
					n.Area = areaInfo[2];
				});
				_postData.strcontactsDetailsList = JSON.stringify(this.queryData.ContactsDetails);
			} else {
				_postData.strcontactsDetailsList = '[]';
			}
			_postData.strEntity = JSON.stringify(pageForm);
			// console.log(this.queryData);
			// console.log(_postData);
			var _this = this;
			this.LOADING('正在提交数据…');
			this.HTTP_POST('learun/PersonnelManagement/EpidemicSituationCopy/save', _postData, '加载数据时出错').then(data => {
				this.HIDE_LOADING();
				if (data) {
					// _this.$parent.refreshList();
					// console.log(data)
					this.EMIT('EpidemicSituationCopy') 
					this.NAV_BACK()
					this.TOAST('提交保存成功', 'success') 
				}
			});
		},
		add(str) {
			let json = this.COPY(this.dataSource[str]);
			this.queryData[str].push(json);
		},
		remove(str, i) {
			this.CONFIRM('删除', '确定删除该条数据吗', true).then(res => {
				if (res) {
					this.queryData[str].splice(i, 1);
				}
			});
		},
		// 显示列表中的标题项
		displayListItem(item, field) {
			const fieldItem = this.scheme[field];
			const value = item[field];
		
			switch (fieldItem.type) {
				case 'currentInfo':
				case 'organize':
					return fieldItem.dataType === 'time' ? value : get(this.GET_GLOBAL(fieldItem.dataType), `${value}.name`, '');
		
				case 'radio':
				case 'select':
					const selectItem = this.dataSource[field].find(t => t.value === String(value));
					return get(selectItem, 'text', '');
		
				case 'checkbox':
					if (!value || value.split(',').length <= 0) {
						return '';
					}
					const checkboxItems = value.split(',');
					return this.dataSource[field]
						.filter(t => checkboxItems.includes(t.value))
						.map(t => t.text)
						.join('，');
		
				case 'datetime':
					if (!value) {
						return '';
					}
					return moment(value).format(Number(fieldItem.dateformat) === 0 ? 'YYYY年 M月 D日' : 'YYYY-MM-DD HH:mm');
		
				default:
					return value === null || value === undefined ? '' : value;
			}
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
@import '~@/common/css/sidepage.less';
@import '~@/common/css/customlist.less';
@import '~@/common/css/common.less';

.checkInT {
	padding: 0.5px 15px;
	line-height: 40px;
	font-size: 12px;
}
.checkInBtn {
	text-align: center;
	line-height: 40px;
	color: @pubColor;
	background-color: #fff;
	border-bottom: 0.5px solid #eee;
}
.checkInBtn text {
	position: relative;
	top: 2px;
	margin-right: 5px;
	font-size: 20px;
}
.remove {
	float: right;
}
</style>
