<template>
	<view class="form-wrap form-component">
		<view v-for="(item, index) in formData" :key="index">
			<!-- 文本输入框 -->
			<view v-if="item.controller == 'Text'" class="order-wrap">
				<view class="order-cell">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box">
						<input 
							type="text" 
							:placeholder="item.value.placeholder" 
							placeholder-class="placeholder color-tip" 
							v-model="item.val"
						/>
					</view>
				</view>
			</view>
			
			<!-- 多行文本输入框 -->
			<view v-if="item.controller == 'Textarea'" class="order-wrap">
				<view class="order-cell flex-box textarea">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box">
						<textarea 
							:placeholder="item.value.placeholder" 
							placeholder-class="placeholder color-tip" 
							v-model="item.val"
						></textarea>
					</view>
				</view>
			</view>
			
			<!-- 下拉选择器 -->
			<view v-if="item.controller == 'Select'" class="order-wrap">
				<picker 
					mode="selector" 
					:range="item.value.options" 
					@change="pickerChange($event, index)"
				>
					<view class="order-cell">
						<view class="name">
							<text class="tit">{{ item.value.title }}</text>
							<text class="required">{{ item.value.required ? '*' : '' }}</text>
						</view>
						<view class="box">
							<text v-if="item.val != ''">{{ item.val }}</text>
							<text v-else class="color-tip">请选择</text>
						</view>
						<text class="iconfont icon-right"></text>
					</view>
				</picker>
			</view>
			
			<!-- 复选框 -->
			<view v-if="item.controller == 'Checkbox'" class="order-wrap">
				<view class="order-cell">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box check-group-box">
						<checkbox-group @change="checkboxChange($event, index)">
							<label v-for="(v, k) in item.option_lists" :key="k">
								<checkbox :value="v.value" :checked="v.checked"></checkbox>
								<view class="checkbox">
									<text 
										:class="[
											'iconfont',
											!v.checked ? 'icon-fuxuankuang2' : '',
											v.checked ? 'icon-fuxuankuang1 color-base-text' : ''
										]"
									></text>
									{{ v.value }}
								</view>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
			
			<!-- 单选框 -->
			<view v-if="item.controller == 'Radio'" class="order-wrap">
				<view class="order-cell">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box radio-group-box">
						<radio-group @change="radioChange($event, index)">
							<label v-for="(v, k) in item.option_lists" :key="k">
								<radio :value="v.value" :checked="item.val == v.value"></radio>
								<view class="radio-box">
									<text 
										:class="[
											'iconfont',
											item.val != v.value ? 'icon-yuan_checkbox' : '',
											item.val == v.value ? 'icon-yuan_checked color-base-text' : ''
										]"
									></text>
									{{ v.value }}
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			
			<!-- 图片上传 -->
			<view v-if="item.controller == 'Img'" class="order-wrap">
				<view class="order-cell flex-box">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box img-boxs">
						<view v-for="(v, k) in item.img_lists" :key="k" class="img-box" @tap="uploadImg(index)">
							<image :src="$util.img(v)" mode="aspectFill"></image>
							<text class="iconfont icon-guanbi" @tap.stop="delImg(k, index)"></text>
						</view>
						<view class="img-box" @tap="addImg(index)">
							<text class="iconfont icon-add1"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 日期选择器 -->
			<view v-if="item.controller == 'Date'" class="order-wrap">
				<view class="order-cell">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box box-flex">
						<picker 
							mode="date" 
							:value="item.val" 
							@change="bindDateChange($event, index)"
						>
							<view :class="['uni-input', !item.val ? 'color-tip' : '']">
								{{ item.val ? item.val : item.value.placeholder }}
							</view>
						</picker>
					</view>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			
			<!-- 日期范围选择器 -->
			<view v-if="item.controller == 'Datelimit'" class="order-wrap">
				<view class="order-cell flex-box">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box date-boxs">
						<view class="date-box">
							<picker 
								mode="date" 
								:value="item.start_date" 
								@change="bindStartDateChange($event, index)"
							>
								<view class="picker-box">
									<view :class="['uni-input', !item.start_date ? 'color-tip' : '']">
										{{ item.start_date ? item.start_date : item.value.placeholder_start }}
									</view>
								</view>
							</picker>
						</view>
						<view class="interval iconfont icon-jian"></view>
						<view class="date-box">
							<picker 
								mode="date" 
								:value="item.end_date" 
								@change="bindEndDateChange($event, index)"
							>
								<view class="picker-box">
									<view :class="['uni-input', !item.end_date ? 'color-tip' : '']">
										{{ item.end_date ? item.end_date : item.value.placeholder_end }}
									</view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 时间选择器 -->
			<view v-if="item.controller == 'Time'" class="order-wrap">
				<view class="order-cell">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box box-flex">
						<picker 
							mode="time" 
							:value="item.val" 
							@change="bindTimeChange($event, index)"
						>
							<view :class="['uni-input', !item.val ? 'color-tip' : '']">
								{{ item.val ? item.val : item.value.placeholder }}
							</view>
						</picker>
					</view>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			
			<!-- 时间范围选择器 -->
			<view v-if="item.controller == 'Timelimit'" class="order-wrap">
				<view class="order-cell flex-box">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box date-boxs">
						<view class="date-box">
							<picker 
								mode="time" 
								:value="item.start_time" 
								@change="bindStartTimeChange($event, index)"
							>
								<view class="picker-box">
									<view :class="['uni-input', !item.start_time ? 'color-tip' : '']">
										{{ item.start_time ? item.start_time : item.value.placeholder_start }}
									</view>
								</view>
							</picker>
						</view>
						<view class="interval iconfont icon-jian"></view>
						<view class="date-box">
							<picker 
								mode="time" 
								:value="item.end_time" 
								@change="bindEndTimeChange($event, index)"
							>
								<view class="picker-box">
									<view :class="['uni-input', !item.end_time ? 'color-tip' : '']">
										{{ item.end_time ? item.end_time : item.value.placeholder_end }}
									</view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 城市选择器 -->
			<view v-if="item.controller == 'City'" class="order-wrap">
				<view class="order-cell box-flex">
					<view class="name">
						<text class="tit">{{ item.value.title }}</text>
						<text class="required">{{ item.value.required ? '*' : '' }}</text>
					</view>
					<view class="box">
						<pick-regions 
							:defaultRegions="item.default_regions"
							:selectArr="item.select_arr"
							@getRegions="handleGetRegions($event, index)"
						>
							<view :class="['select-address', !item.val ? 'empty' : '', !item.val ? 'color-tip' : '']">
								{{ item.val ? item.val : (item.select_arr == '2' ? '请选择省市' : '请选择省市区/县') }}
							</view>
						</pick-regions>
					</view>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ns-form',
	components: {
		pickRegions: () => import('@/components/pick-regions/pick-regions.vue'),
	},
	props: {
		data: {
			type: Array,
			default: () => ({})
		},
		customAttr: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			formData: this.data
		}
	},
	created() {
		this.setFormData();
	},
	watch: {
		data: {
			handler() {
				this.setFormData();
			},
			deep: true
		}
	},
	methods: {
		setFormData() {
			this.formData = this.data;
			this.formData.forEach((item) => {
				// 初始化默认值
				if (!item.val) {
					item.val = item.value.default ? item.value.default : '';
				}
				
				// 处理选项列表
				if (item.value.options) {
					item.option_lists = [];
					item.value.options.forEach((option, index) => {
						let optionItem = {};
						optionItem.value = option;
						optionItem.checked = false;
						
						if (item.controller == 'Radio') {
							if ((!item.val && index == 0) || (item.val && item.val == option)) {
								optionItem.checked = true;
								item.val = option;
							}
						}
						
						if (item.controller == 'Checkbox' && item.val) {
							let valArray = item.val.split(',');
							optionItem.checked = valArray.indexOf(option) != -1;
						}
						
						item.option_lists.push(optionItem);
					});
				}
				
				// 处理图片列表
				if (item.controller == 'Img') {
					item.img_lists = item.val ? item.val.split(',') : [];
				}
				
				// 处理日期
				if (item.controller == 'Date' && !item.val) {
					if (item.value.is_show_default) {
						if (item.value.is_current) {
							item.val = this.getDate();
						} else {
							item.val = item.value.default;
						}
					} else {
						item.val = '';
					}
				}
				
				// 处理日期范围
				if (item.controller == 'Datelimit') {
					if (item.val) {
						let dateArray = item.val.split(' - ');
						item.start_date = dateArray[0];
						item.end_date = dateArray[1];
					} else {
						item.val = '';
						
						// 开始日期
						if (item.value.is_show_default_start) {
							if (item.value.is_current_start) {
								item.start_date = this.getDate();
							} else {
								item.start_date = item.value.default_start;
							}
						} else {
							item.start_date = '';
						}
						
						// 结束日期
						if (item.value.is_show_default_end) {
							if (item.value.is_current_end) {
								item.end_date = this.getDate();
							} else {
								item.end_date = item.value.default_end;
							}
						} else {
							item.end_date = '';
						}
						
						if (item.start_date && item.end_date) {
							item.val = item.start_date + ' - ' + item.end_date;
						}
					}
				}
				
				// 处理时间
				if (item.controller == 'Time' && !item.val) {
					if (item.value.is_show_default) {
						if (item.value.is_current) {
							item.val = this.getTime();
						} else {
							item.val = item.value.default;
						}
					} else {
						item.val = '';
					}
				}
				
				// 处理时间范围
				if (item.controller == 'Timelimit') {
					if (item.val) {
						let timeArray = item.val.split(' - ');
						item.start_time = timeArray[0];
						item.end_time = timeArray[1];
					} else {
						item.val = '';
						
						// 开始时间
						if (item.value.is_show_default_start) {
							if (item.value.is_current_start) {
								item.start_time = this.getTime();
							} else {
								item.start_time = item.value.default_start;
							}
						} else {
							item.start_time = '';
						}
						
						// 结束时间
						if (item.value.is_show_default_end) {
							if (item.value.is_current_end) {
								item.end_time = this.getTime();
							} else {
								item.end_time = item.value.default_end;
							}
						} else {
							item.end_time = '';
						}
						
						if (item.start_time && item.end_time) {
							item.val = item.start_time + ' - ' + item.end_time;
						}
					}
				}
				
				// 处理城市选择
				if (item.controller == 'City') {
					item.full_address = '';
					item.select_arr = item.value.default_type == 1 ? '2' : '3';
					if (item.val) {
						item.default_regions = item.val.split('-');
					} else {
						item.default_regions = [];
					}
				}
			});
		},
		
		// 表单验证
		verify() {
			for (let i = 0; i < this.formData.length; i++) {
				let item = this.formData[i];
				
				// 文本验证
				if (item.controller == 'Text') {
					if (item.value.required && !item.val) {
						this.$util.showToast({ title: '请输入' + item.value.title });
						return false;
					}
					
					if (item.name == 'ID_CARD' && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(item.val)) {
						if (!item.value.required) {
							this.$util.showToast({ title: '身份证输入不合法' });
							return false;
						}
						if (item.val != '') {
							this.$util.showToast({ title: '身份证输入不合法' });
							return false;
						}
					}
					
					if (item.name == 'MOBILE' && !this.$util.verifyMobile(item.val)) {
						if (!item.value.required) {
							this.$util.showToast({ title: '手机号输入不合法' });
							return false;
						}
						if (item.val != '') {
							this.$util.showToast({ title: '手机号输入不合法' });
							return false;
						}
					}
				}
				
				// 多行文本验证
				if (item.controller == 'Textarea' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请输入' + item.value.title });
					return false;
				}
				
				// 下拉选择验证
				if (item.controller == 'Select' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请选择' + item.value.title });
					return false;
				}
				
				// 复选框验证
				if (item.controller == 'Checkbox' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请至少选择一个' + item.value.title });
					return false;
				}
				
				// 图片上传验证
				if (item.controller == 'Img' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请至少上传一张' + item.value.title });
					return false;
				}
				
				// 日期验证
				if (item.controller == 'Date' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请选择' + item.value.title });
					return false;
				}
				
				// 日期范围验证
				if (item.controller == 'Datelimit') {
					if (item.value.required && !item.val) {
						this.$util.showToast({ title: '请选择' + item.value.title });
						return false;
					}
					
					if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
						this.$util.showToast({ title: '结束日期不能小于开始日期' });
						return false;
					}
				}
				
				// 时间验证
				if (item.controller == 'Time' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请选择' + item.value.title });
					return false;
				}
				
				// 时间范围验证
				if (item.controller == 'Timelimit') {
					if (item.value.required && !item.val) {
						this.$util.showToast({ title: '请选择' + item.value.title });
						return false;
					}
					
					if (item.start_time >= item.end_time) {
						this.$util.showToast({ title: '结束时间必须大于开始时间' });
						return false;
					}
				}
				
				// 城市选择验证
				if (item.controller == 'City' && item.value.required && !item.val) {
					this.$util.showToast({ title: '请选择' + item.value.title });
					return false;
				}
			}
			
			return this.formData;
		},
		
		// 下拉选择改变
		pickerChange(event, index) {
			this.formData[index].val = this.data[index].value.options[event.detail.value];
			this.$forceUpdate();
		},
		
		// 复选框改变
		checkboxChange(event, index) {
			this.formData[index].val = event.detail.value.toString();
			this.formData[index].option_lists.forEach((option) => {
				option.checked = event.detail.value.indexOf(option.value) != -1;
			});
			this.$forceUpdate();
		},
		
		// 单选框改变
		radioChange(event, index) {
			this.formData[index].val = event.detail.value;
			this.$forceUpdate();
		},
		
		// 上传图片
		uploadImg(index) {
			let self = this;
			this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
				if (res.length > 0) {
					res.forEach(function(img) {
						if (self.formData[index].img_lists.length >= Number(self.formData[index].value.max_count)) {
							self.$util.showToast({ title: '最多上传' + self.formData[index].value.max_count + '张图片' });
							return false;
						}
						self.formData[index].img_lists.push(img);
					});
					self.formData[index].val = self.formData[index].img_lists.toString();
					self.$forceUpdate();
				}
			});
		},
		
		// 添加图片
		addImg(index) {
			let self = this;
			if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
				this.$util.showToast({ title: '最多上传' + this.formData[index].value.max_count + '张图片' });
				return false;
			}
			
			this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
				if (res.length > 0) {
					res.forEach(function(img) {
						self.formData[index].img_lists.push(img);
					});
					self.formData[index].val = self.formData[index].img_lists.toString();
					self.$forceUpdate();
				}
			});
		},
		
		// 删除图片
		delImg(imgIndex, formIndex) {
			this.formData[formIndex].img_lists.splice(imgIndex, 1);
			this.formData[formIndex].val = this.formData[formIndex].img_lists.toString();
			this.$forceUpdate();
		},
		
		// 获取当前日期
		getDate() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		
		// 获取当前时间
		getTime() {
			let date = new Date();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			hours = hours > 9 ? hours : '0' + hours;
			minutes = minutes > 9 ? minutes : '0' + minutes;
			return `${hours}:${minutes}`;
		},
		
		// 日期改变
		bindDateChange(event, index) {
			this.formData[index].val = event.detail.value;
			this.$forceUpdate();
		},
		
		// 开始日期改变
		bindStartDateChange(event, index) {
			this.$set(this.formData[index], 'start_date', event.detail.value);
			this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
			this.$forceUpdate();
		},
		
		// 结束日期改变
		bindEndDateChange(event, index) {
			this.$set(this.formData[index], 'end_date', event.detail.value);
			this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
			this.$forceUpdate();
		},
		
		// 时间改变
		bindTimeChange(event, index) {
			this.formData[index].val = event.detail.value;
			this.$forceUpdate();
		},
		
		// 开始时间改变
		bindStartTimeChange(event, index) {
			this.formData[index].start_time = event.detail.value;
			this.$forceUpdate();
		},
		
		// 结束时间改变
		bindEndTimeChange(event, index) {
			this.formData[index].end_time = event.detail.value;
			this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
			this.$forceUpdate();
		},
		
		// 处理地区选择
		handleGetRegions(regions, index) {
			this.formData[index].val = '';
			this.formData[index].val += regions[0] != undefined ? regions[0].label : '';
			this.formData[index].val += regions[1] != undefined ? '-' + regions[1].label : '';
			this.formData[index].val += regions[2] != undefined ? '-' + regions[2].label : '';
			this.$forceUpdate();
		}
	}
}
</script>

<style lang="scss" scoped>
.order-wrap {
	padding: 20rpx 0;
	
	&:last-child {
		margin-bottom: 0;
		border-bottom: 0;
	}
	
	.order-cell {
		align-items: center;
		background: #fff;
		position: relative;
		
		&.textarea {
			align-items: unset;
		}
		
		&.clear-flex {
			display: block;
			
			.box {
				margin-top: 16rpx;
				text-align: left;
			}
		}
		
		&:last-child {
			margin-bottom: 0;
			border-bottom: solid 1px #eee;
		}
		
		&.align-top {
			align-items: flex-start;
		}
		
		text {
			font-size: 28rpx;
		}
		
		.name {
			width: 160rpx;
			margin-bottom: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			.tit {
				text-align: left;
				font-size: 32rpx;
				color: #888;
				
				text {
					font-size: 28rpx;
				}
			}
			
			.required {
				color: red;
				font-size: 28rpx;
				margin-left: 4rpx;
				width: 14rpx;
				text-align: left;
				display: inline-block;
			}
		}
		
		.box {
			flex: 1;
			padding: 0 0rpx;
			line-height: inherit;
			text-align: left;
			
			input {
				font-size: 28rpx;
				text-align: left;
				height: 70rpx;
				border: solid 2rpx #eee;
				line-height: 70rpx;
				padding: 0 16rpx;
			}
			
			textarea {
				font-size: 28rpx;
				width: 100%;
				height: 88rpx;
				line-height: 44rpx;
				text-align: left;
			}
			
			checkbox-group {
				display: flex;
				flex-wrap: wrap;
			}
			
			radio-group {
				display: flex;
				flex-wrap: wrap;
			}
			
			label {
				display: flex;
				align-items: center;
				line-height: 1;
				margin-right: 30rpx;
			}
			
			&.img-boxs {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				
				.img-box {
					margin: 10rpx 20rpx 10rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 100rpx;
					border: 1rpx solid #eee;
					border-radius: 4rpx;
					position: relative;
					
					.icon-guanbi {
						position: absolute;
						top: -14rpx;
						right: -14rpx;
						display: inline-block;
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						color: #909399;
					}
					
					.icon-add1 {
						font-size: 40rpx;
					}
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			&.box-flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			&.date-boxs {
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				
				.interval {
					margin: 0 12rpx;
					color: #000;
					font-weight: 700;
				}
				
				.date-box {
					.picker-box {
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}
		
		.radio-group-box {
			radio {
				display: none;
			}
			
			.radio-box {
				display: flex;
				align-items: center;
				line-height: 1;
				
				.iconfont {
					font-size: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
		
		.check-group-box {
			checkbox {
				display: none;
			}
			
			.checkbox {
				display: flex;
				align-items: center;
				line-height: 1;
				
				.iconfont {
					font-size: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
		
		.iconfont {
			color: #909399;
			font-size: 28rpx;
		}
		
		.box-flex {
			picker {
				display: block;
				width: 100%;
			}
		}
		
		.icon-right {
			line-height: 1;
			position: unset;
		}
	}
}
</style>