shuju_ui/test/add/pages/addvacfrom/addvacfrom.vue

<template>
	 <view class="vac-form" v-if="2<1">
		 <uni-forms :modelValue="formData" label-width="110">
			 <!-- 基本信息 -->
			 <uni-group title="基本信息" top="0">
				<uni-forms-item required label="身份证号" >
					<image src="@/static/image/icon_xz_pz.png" @click="takePhoto" style="z-index: 100; width: 26px; height: 22px; position: absolute; right: 5px; top: 5px; "></image>
					<uni-easyinput @blur="getIdcardInfo" :inputBorder="false" style="width: 80%; z-index: 80;" v-model="formData.idCard" placeholder="请输入身份证号码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required label="姓名">
					<uni-easyinput type="text" :inputBorder="false" v-model="formData.userName" placeholder="请输入姓名"></uni-easyinput>
				</uni-forms-item>
				<!-- <uni-forms-item required label="出生日期">
					<uni-easyinput :clearable="false" @focus="showDatePicker" type="text" :inputBorder="false" v-model="formData.birthday" placeholder="请选择出生日期"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item required label="年龄">
					<uni-easyinput type="number" :inputBorder="false" v-model="formData.age" placeholder="请输入年龄"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required label="受种者编号">
					<uni-easyinput type="number" :inputBorder="false" v-model="formData.code" placeholder="请输入编号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="formData.genderIndex" :localdata="sexRange" ></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="联系号码">
					<uni-easyinput type="text" :inputBorder="false" v-model="formData.phoneNum" placeholder="请输入联系号码"></uni-easyinput>
				</uni-forms-item>
				<!-- <uni-forms-item label="编号">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.email" placeholder="请输入编号"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item label="工作单位">
					<uni-easyinput type="text" :inputBorder="false" v-model="formData.workUnit" placeholder="请输入工作单位"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="重点行业">
					<view @click="showTrdesSelect" class="pick-line">
						<text v-if='formData.keyIndustries'>{{formData.keyIndustries}}</text>
						<text v-else style="color: grey;">请选择重点行业</text>
					</view>
				</uni-forms-item>
			</uni-group>
			<!-- 户籍信息 -->
			<uni-group title="户籍信息">
				<uni-forms-item label="户主">
					<uni-data-checkbox v-model="formData.houseTypeValue" :localdata="isUPN" ></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required label="户籍地址">
					<view @click="showbirPicker" class="pick-line">
						<text v-if='birAddress'>{{birAddress}}</text>
						<text v-else style="color: grey;">请选择户籍地址</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="详细地址" label-position="top">
					 <textarea 
					 placeholder="请输入详细地址...." v-model="formData.nowIn"
					 style="width: 100%;background: #F2F2F2;height: 112rpx;border-radius: 10rpx; "/>
				</uni-forms-item>
				<uni-forms-item required label="现居地">
					<pick-regions class="pick-line" :defaultRegion="defaultRegion" @getRegion="regionPickerChange">
						<view >
							<text v-if='formData.province'>{{formData.province + formData.city + formData.region}}</text>
							<text v-else style="color: grey;">请选择省市区</text>
						</view>
					</pick-regions>
				</uni-forms-item>
				<uni-forms-item label="详细地址" label-position="top">
					 <textarea 
					 placeholder="请输入详细地址...." v-model="formData.domicile"
					 style="width: 100%; background: #F2F2F2;height: 112rpx;border-radius: 10rpx;"/>
				</uni-forms-item>
				<!-- <uni-forms-item label="其他" label-position="top">
					 <textarea 
					 placeholder="请输入其他信息...." 
					 v-model="formData.other"
					 style="width: 100%;background: #F2F2F2;height: 150rpx;border-radius: 10rpx;"/>
				</uni-forms-item> -->
				<uni-forms-item label="备注" label-position="top">
					 <textarea 
					 placeholder="请输入备注信息...." 
					 v-model="formData.remark"
					 style="width: 100%;background: #F2F2F2;height: 160rpx;border-radius: 10rpx;"/>
				</uni-forms-item>
			</uni-group>
			
			<uni-group title="是否接种" >
				<uni-forms-item label="是否接种">
					<uni-data-checkbox v-model="formData.isVaccinationValue" @change="isVaccinationChange" :localdata="vaccination" ></uni-data-checkbox>
				</uni-forms-item>
			</uni-group>
				
			<uni-group title="未接种详情" v-if='formData.isVaccinationValue == 1'>
				<!-- <uni-forms-item label="人群分类">
					<uni-easyinput type="text" :inputBorder="false" v-model="" placeholder="请输入人群分类"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item label="禁忌症">
					<view @click="showMonList" class="pick-line">
						<text v-if='formData.contraindication'>{{formData.contraindication}}</text>
						<text v-else style="color: grey;">请选择禁忌症</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="禁忌症附件">
					<view style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in formData.urlArr" :key="index" class="re img-add"
							style="overflow: inherit;">
							<view class="ab delPop" @click="removeImg(index, 'url')">
								<view class="circleRed"></view>
							</view>
							<image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="item" mode="aspectFill"></image>
						</view>
						<view class="img-add" @click="chooseImg('url')">
							<view class="add re">
								<image style="width: 48rpx;height: 48rpx;" src="../../static/image/add.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="暂缓">
					<view @click="showWaitList" class="pick-line">
						<text v-if='formData.suspend'>{{formData.suspend}}</text>
						<text v-else style="color: grey;">请选择暂缓原由</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="暂缓附件">
					<view style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in formData.suspendUrlArr" :key="index" class="re img-add"
							style="overflow: inherit;">
							<view class="ab delPop" @click="removeImg(index, 'suspendUrl')">
								<view class="circleRed"></view>
							</view>
							<image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="item" mode="aspectFill"></image>
						</view>
						<view class="img-add" @click="chooseImg('suspendUrl')">
							<view class="add re">
								<image style="width: 48rpx;height: 48rpx;" src="@/static/image/add.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="其他">
					<view @click="showOthersPicker" class="pick-line">
						<text v-if='formData.other'>{{formData.other}}</text>
						<text v-else style="color: grey;">请选择其他原由</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="其他附件">
					<view style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in formData.otherUrlArr" :key="index" class="re img-add"
							style="overflow: inherit;">
							<view class="ab delPop" @click="removeImg(index, 'otherUrl')">
								<view class="circleRed"></view>
							</view>
							<image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="item" mode="aspectFill"></image>
						</view>
						<view class="img-add" @click="chooseImg('otherUrl')">
							<view class="add re">
								<image style="width: 48rpx;height: 48rpx;" src="@/static/image/add.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</uni-forms-item>
				
				<!-- <uni-forms-item label="死亡">
					<uni-data-checkbox v-model="item.value" :localdata="vaccination" ></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="失恋失踪">
					<uni-data-checkbox v-model="item.value" :localdata="vaccination" ></uni-data-checkbox>
				</uni-forms-item> -->
				<!-- <uni-forms-item label="应种未种">
					<uni-data-checkbox v-model="item.value" :localdata="vaccination" ></uni-data-checkbox>
				</uni-forms-item> -->
				<!-- <uni-forms-item label="应续未续">
					<uni-data-checkbox v-model="item.value" :localdata="vaccination" ></uni-data-checkbox>
				</uni-forms-item> -->
			</uni-group>
			
			
			<!-- 接种信息 -->
			<div v-for="(item,index) in formData.vaccineInfoUserList" :key="index" v-if='formData.isVaccinationValue == 0&&2<1'>
				<uni-group title="接种信息" v-if='item.isDel != "Y"'>
					<!-- <uni-forms-item label="人群分类">
						<uni-easyinput type="text" :inputBorder="false" v-model="item.inputValue" placeholder="请输入人群分类"></uni-easyinput>
					</uni-forms-item> -->
					<uni-forms-item required label="疫苗名称">
						<view @click="showVacPicker(index)" class="pick-line">
							<text v-if='item.vaccineName'>{{item.vaccineName}}</text>
							<text v-else style="color: grey;">请选择疫苗名称</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="接种时间">
						<view @click="showVacTime(index)" class="pick-line">
							<text v-if='item.vaccinationTime'>{{item.vaccinationTime}}</text>
							<text v-else style="color: grey;">请选择接种时间</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="接种地点">
						<view @click="showVacArea(index)" class="pick-line">
							<text v-if='item.vaccinationPlace'>{{item.vaccinationPlace}}</text>
							<text v-else style="color: grey;">请选择接种地点</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="剂次">
						<view @click="showJiciPicker(index)" class="pick-line">
							<text v-if='item.jici'>{{item.jici}}</text>
							<text v-else style="color: grey;">请选择剂次</text>
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item required label="进度">
						<uni-data-checkbox v-model="item.progressValue" :localdata="vacPro" :disabled="true" ></uni-data-checkbox>
					</uni-forms-item> -->
					<uni-forms-item label="附件">
						<view style="display: flex;flex-wrap: wrap;width: 100%;">
							<view v-for="(imgItem, imgIndex) in item.urlArr" :key="imgIndex" class="re img-add"
								style="overflow: inherit;">
								<view class="ab delPop" @click="removeImg(imgIndex, 'vacUrl', index)">
									<view class="circleRed"></view>
								</view>
								<image style="width: 100%;height: 100%;border-radius: 10rpx;" :src="imgItem" mode="aspectFill"></image>
							</view>
							<view class="img-add" @click="chooseImg('vacUrl', index)">
								<view class="add re">
									<image style="width: 48rpx;height: 48rpx;" src="@/static/image/add.png"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
					</uni-forms-item>
				</uni-group>
				
				<view class="flew flew-align-center flew-between" style=" background: #F2F2F2;font-size: 30rpx;padding: 20rpx;" >
					<view class="flew flew-align-center" @click="addInfo(item)"  :class="index == (formData.vaccineInfoUserList.length - 1) ?'' : 'visibility-hidden'" >
						<image  class="from_image" src="@/static/image/icon_xz_addjz.png" mode=""></image><text style="color: #009FE8;">添加上方接种信息</text>
					</view>
					<view class="flew flew-align-center" @click="delVacInfoDialog(item,index)" v-if='item.isDel != "Y"'>
						<image class="from_image" src="@/static/image/icon_xz_deljz.png" mode=""></image><text style="color: #F21919;">删除上方接种信息</text>
					</view>
				</view>
			</div>
			<view class="pb-4" style="background: #F2F2F2;padding-top:20rpx">
				<button class="margin0-auto" style="width: 90%;" type="primary" @click="$noMultipleClicks(submit)">提交</button>
			</view>
		</uni-forms>
		
		<!-- 时间选择器-->
		<dataTimePicke ref="setpicker" type="date" toolBarTitle="请选择出生日期"></dataTimePicke>
		<!-- 疫苗选择器 -->
		<selectPicker ref="vacselet" :list="vacTitle" title="选择疫苗名称" @vacChange="vacNameChange"></selectPicker>
		<!-- 重点行业 -->
		<selectPicker ref="tredselet" :list="trades" title="选择重点行业"  @vacChange="trdesChange"></selectPicker>
		<!-- 户籍地选择 -->
		<selectMuPicker ref="birselet"  model="muitl-column-auto" :list="birthplace"  title="选择户籍地" @vacChange="birRegion"></selectMuPicker>
		<!-- 模态框 -->
		<hModal ref="h_modal" :content="modalContent"></hModal>
		<!-- 接种时间 -->
		<dataTimePicke ref="vacTime" :startYear="2021" type="datetime-all" toolBarTitle="请选择接种时间" @change='vacTimeChange'></dataTimePicke>
		<!-- 禁忌症 -->
		<selectPicker ref="con_selet" :list="contraindication" title="请选择禁忌症" @vacChange="conChange"></selectPicker>
		<!-- 暂缓 -->
		<selectPicker ref="mor_selet" :list="moratorium" title="请选择暂缓原由" @vacChange="morChange"></selectPicker>
		<!-- 其他 -->
		<selectPicker ref="others_selet" :list="othersOption" title="请选择其他原因" @vacChange="othersChange"></selectPicker>
		<!-- 剂次 -->
		<selectPicker ref="jici_select" :list="jiciOption" title="请选择剂次" @vacChange="jiciChange"></selectPicker>
		<!-- 接种地点 -->
		<selectPicker ref="vacareaselet" :list="vacArea" title="请选择接种地点" @vacChange="vacAreaChange"></selectPicker>
		<areaP ref="area" ></areaP>
		
		<uni-popup ref="delPopup" type="center">
			<uni-popup-dialog type="info" title="提示" content="确定删除该接种信息吗？" @confirm="delConfirm" ></uni-popup-dialog>
		</uni-popup>
	 </view>
</template>
	
<script>
	import senSetPicker from '@/_components/picker/dateTimePicker.vue'
	import hUploadImage from '@/_components/hUploadImage.vue'
	import selectMuPicker from '@/_components/picker/selectMutilPicker.vue'
	import selectPicker from '@/_components/picker/selectPicker.vue'
	import hModal from '@/_components/hModal.vue'
	import dataTimePicke from '@/_components/picker/dataTimePicke.vue'
	import areaP from '@/_components/picker/areaP.vue'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import hostUrl from "@/util/url";
	let {host, imgDomain} = hostUrl
	
	export default {
		components:{uniPopup, uniPopupDialog,pickRegions,senSetPicker,hUploadImage,selectPicker,hModal,selectMuPicker,dataTimePicke,areaP},
		data() {
			return {
				birAddress: '',
				jiciOption: [],// 剂次选项
				curItem: {},
				curIndex: 0,
				noClick: true,// $noMultipleClicks变量
				defaultRegion: ['安徽省', '安庆市', '潜山市'], // 初始值必须为空，否则更换默认值时不能生效
				searchRegion: [],
				formData: {
					"id": '',
					'villageTowns':'',
					'village': '',
					'birthday': '',
					'age': '',
					'code': '',
					'villagerGroup':'',
					'houseTypeValue': 0,
					'houseType':'',
					'domicile':'',
					'province':'',
					'city':'',
					'region':'',
					'userName':'',
					'genderIndex': 0,
					'idCard':'',
					'phoneNum':'',
					'keyIndustries':'',
					"isVaccinationValue": 0,
					"isVaccination": "是",
					// "vaccinationPlace": null,
					"contraindication": null,
					"suspend": "",
					"death": "",
					"lostInMissing": "",
					"shouldBe": "",
					"other": "",
					// "nowIn": "安徽省安庆市潜山市现居地",
					'nowIn': '',
					"remark": "",
					"status": "",
					"createBy": null,
					"createTime": null,
					"updateBy": null,
					"updateTime": null,
					"isDel": null,
					"urlArr":[], // 禁忌症文件上传地址
					'url': [],//提交的数据
					"suspendUrlArr": [], // 暂缓接种附件
					'suspendUrl': [],// 提交的数据
					"otherUrlArr": [], // 其他附件
					'otherUrl': [],// 提交的数据
					"vaccineInfoUserList": [{
						"vaccineName": "",
						"vaccinationTime": "",
						"vaccinationPlace": "",
						"jici": "",
						'progressValue': 1,
						"progress": "未完成",
						'urlArr': [],// 附件
						'isDel': 'N'
					}],
					// "code": "123",
					// "crowd_classification": "人群分类"
				},
				areaList: [],
				inputValue : '',
				shixian : false,
				imageValue:{},
				sexRange: [{"value": 0,"text": "男"    },{"value": 1,"text": "女"}],// 性别
				isUPN: [{"value": 0,"text": "是"    },{"value": 1,"text": "否"}], // 是否户主
				vaccination: [{"value": 0,"text": "是"    },{"value": 1,"text": "否"}] ,// 是否接种
				vacPro:[{"value": 0,"text": "已完成"    },{"value": 1,"text": "未完成"}], // 接种进度
				vacTitle: [], // 疫苗名称
				birthplace:[], // 户籍地
				trades:[], // 重点行业
				contraindication:[], // 禁忌症
				othersOption: [],// 其他原因
				moratorium:[], // 暂缓接种
				vacTimes:[], // 接种疫苗剂次
				vacArea:[],// 疫苗接种地点
				modalContent:''
			}
		},
		methods:{
			takePhoto() {
				console.log('---------')
				var that = this
				uni.chooseImage({
					count: 1,
					sourceType: 'camera',
					success(res){
						var file = res.tempFilePaths[0]
						that.ocrParse(file)
					}
				})
			},
			ocrParse(filePath) {
				var url = host + '/boman-file/ocrIdCard'
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				uni.showLoading()
				uni.uploadFile({
					url: url,
					filePath: filePath,
					name: 'file',
					header: {
						// 'Content-type': 'multipart/form-data',
						'Authorization': token
					},
					success: res => {
						uni.hideLoading()
						console.log(JSON.stringify(res))
						var data = JSON.parse(res.data)
						this.formData.idCard = data.data.id
						this.formData.userName = data.data.name
						this.formData.age = this.getAge(data.data.birth)
						this.formData.gender = data.data.gender
						if (this.formData.gender == '男') {
							this.formData.genderIndex = 0
						} else {
							this.formData.genderIndex = 1
						}
					},
					fail: err => {
						uni.hideLoading();
						console.log(JSON.stringify(err))
						uni.showToast({
							title: err.errMsg,
							icon: "none"
						})
					}
				})
			},
			isVaccinationChange(e) {
				console.log('isVaccinationChange ' + JSON.stringify(e))
				console.log(this.formData.isVaccinationValue)
			},
			vacTimeChange(e) {
				var curItem = this.formData.vaccineInfoUserList[this.curIndex]
				this.$set(curItem, 'vaccinationTime', e)
			},
			submit() {
				if (this.formData.houseTypeValue == 0) {
					this.formData.houseType = '是'
				} else {
					this.formData.houseType = '否'
				}
				if (this.formData.genderIndex == 0) {
					this.formData.gender = '男'
				} else {
					this.formData.gender = '女'
				}
				if (this.formData.isVaccinationValue == 0) {
					this.formData.isVaccination = '是'
				} else {
					this.formData.isVaccination = '否'
					this.formData.vaccineInfoUserList = []
				}
				var tempArr = []
				if (this.formData.urlArr != undefined && this.formData.urlArr != '') {
					for (var i = 0; i < this.formData.urlArr.length; i++) {
						var img = this.formData.urlArr[i]
						var item = {
							'name': '禁忌症附件',
							'url': img
						}
						tempArr.push(item)
					}	
					this.formData.url = JSON.stringify(tempArr)
				} else {
					this.formData.url = ''
				}
				
				if (this.formData.suspendUrlArr != undefined && this.formData.suspendUrlArr != '') {
					tempArr = []
					for (var i = 0; i < this.formData.suspendUrlArr.length; i++) {
						var img = this.formData.suspendUrlArr[i]
						var item = {
							'name': '暂缓附件',
							'url': img
						}
						tempArr.push(item)
					}	
					this.formData.suspendUrl = JSON.stringify(tempArr)
				} else {
					this.formData.suspendUrl = ''
				}
				
				if (this.formData.otherUrlArr != undefined && this.formData.otherUrlArr != '') {
					tempArr = []
					for (var i = 0; i < this.formData.otherUrlArr.length; i++) {
						var img = this.formData.otherUrlArr[i]
						var item = {
							'name': '其他附件',
							'url': img
						}
						tempArr.push(item)
					}	
					this.formData.otherUrl = JSON.stringify(tempArr)
				} else {
					this.formData.otherUrl = ''
				}
				
				console.log('vaccineInfoUserList ' + JSON.stringify(this.formData.vaccineInfoUserList))
				if (this.formData.vaccineInfoUserList != undefined && this.formData.vaccineInfoUserList != '') {
					for (var i = 0; i < this.formData.vaccineInfoUserList.length; i++) {
						var item = this.formData.vaccineInfoUserList[i]
						if (item.urlArr != undefined && item.urlArr != '') {
							tempArr = []
							for (var j = 0; j < item.urlArr.length; j++) {
								var img = item.urlArr[j]
								var subItem = {
									'name': '附件',
									'url': img
								}
								tempArr.push(subItem)
							}
							item.url = JSON.stringify(tempArr)
						} else {
							item.url = ''
						}
					}
				}
				
				console.log(JSON.stringify(this.formData))
				if (this.formData.id) {
					this.$http.put('boman-web-core/core/info', this.formData).then(res=>{
						if(res.code == 200 ) {
							uni.showToast({
								title: '提交成功',
								icon: "none"
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
					})
				} else {
					this.$http.post('boman-web-core/core/info', this.formData).then(res=>{
						if(res.code == 200 ) {
							uni.showToast({
								title: '提交成功',
								icon: "none"
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
					})
				}
			},
			regionPickerChange(region) {
				this.searchRegion = region
				console.log(this.searchRegion,'searchRegion')
				var codeArray = this.searchRegion.map(item=>item?item.code:undefined)
				var nameArray = this.searchRegion.map(item=>item?item.name:undefined)
				this.formData.province = nameArray[0]
				this.formData.city = nameArray[1]
				this.formData.region = nameArray[2]
			},
			uploadFile(filePath, type) {
				var that = this
				uni.showLoading()
				var url = host + '/boman-file/upload'
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				uni.uploadFile({
					url: url,
					filePath: filePath,
					name: 'file',
					header: {
						// 'Content-type': 'multipart/form-data',
						'Authorization': token
					},
					success: res => {
						uni.hideLoading()
						console.log(JSON.stringify(res))
						var data = JSON.parse(res.data)
						var imgUrl = data.data.url
						console.log('imgUrl ' + imgUrl)
						// var regexp = new RegExp("((http|ftp|https)://)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*/?", "g");
						// imgUrl = imgUrl.replace(regexp, imgDomain + '/');
						console.log('imgUrl ' + imgUrl)
						if (type == 'url') {// 禁忌症附件
							that.formData.urlArr.push(imgUrl)
						} else if (type == 'suspendUrl') {// 暂缓接种附件
							that.formData.suspendUrlArr.push(imgUrl)
						} else if (type == 'otherUrl') {// 其他附件
							that.formData.otherUrlArr.push(imgUrl)
						} else if (type == 'vacUrl') {// 接种信息每行的附件
							var curItem = that.formData.vaccineInfoUserList[that.curIndex]
							console.log('--------curItem ' + JSON.stringify(curItem))
							curItem.urlArr.push(imgUrl)
							that.$set(curItem, 'urlArr', curItem.urlArr)
						}
						console.log('=========' + JSON.stringify(that.formData))
					},
					fail: err => {
						uni.hideLoading();
						console.log(JSON.stringify(err))
						uni.showToast({
							title: err.errMsg,
							icon: "none"
						})
					}
				})
			},
			chooseImg(type, index) {
				console.log('type ' + type + ' index ' + index)
				var that = this
				if (index) {
					that.curIndex = index 
					console.log('curIndex ' + that.curIndex)
				}
				var count = 1
				// if (type == 'company') {
				// 	count = 9
				// }
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log("res.tempFilePaths", res.tempFilePaths)
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let imgSrc = res.tempFilePaths[i]
							that.uploadFile(imgSrc, type)
						}
					}
				})
			},
			removeImg(index, type) {
				if (type == 'url') {// 禁忌症附件
					this.formData.urlArr.splice(index, 1)
				} else if (type == 'suspendUrl') {// 暂缓接种附件
					this.formData.suspendUrlArr.splice(index, 1)
				} else if (type == 'otherUrl') {// 其他附件
					this.formData.otherUrlArr.splice(index, 1)
				} else if (type == 'vacUrl') {//接种附件
					var curItem = this.formData.vaccineInfoUserList[this.curIndex]
					curItem.urlArr.splice(index, 1)
				}
			},
			getOthersOption() {
				this.$http.get('system/dict/data/type/other_status').then(res=>{
					if(res.code == 200) {
						this.othersOption = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue, children: v.children}
						})
						console.log('othersOption ' + JSON.stringify(this.othersOption))
					}
				})
			},
			/* 获取疫苗名称 */
			getVacTitle () {
				this.$http.get('system/dict/data/type/vaccine_name').then(res=>{
					if(res.code == 200) {
						this.vacTitle = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue, children: v.children}
						})
						// 如果是“编辑”模式，根据每行的疫苗厂商，设置剂次选项
						if (this.formData.id) {
							for (var i = 0; i < this.formData.vaccineInfoUserList.length; i++) {
								var curItem = this.formData.vaccineInfoUserList[i]
								console.log('------curItem ' + JSON.stringify(curItem))
								for (var j = 0; j < this.vacTitle.length; j++) {
									var item = this.vacTitle[j]
									console.log('======item ' + JSON.stringify(item))
									if (item.label == curItem.vaccineName) {
										this.$set(curItem, 'jiciOption', item.children)
									}
								}
							}
						}
						console.log('vacTitle ' + JSON.stringify(this.vacTitle))
					}
				})
			},
			/* 获取户籍地 */
			getBirthplace () {
				this.$http.get('/boman-web-core/administrativeInfo/treeSelect').then(res=>{
					if(res.code == 200) {
						this.birthplace = res.data
					}
				})
			},
			/* 重点行业 */ 
			getTrade () {
				this.$http.get('/system/dict/data/type/key_trades').then(res=>{
					if(res.code == 200) {
						this.trades = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue}
						})
					}
				})
			},
			/* 禁忌症 */
			getContraindication() {
				this.$http.get('/system/dict/data/type/contraindication').then(res=>{
					if(res.code == 200) {
						this.contraindication = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue}
						})
					}
				})
			},
			/* 获取暂缓接种 */
			getMonVac() {
				this.$http.get('/system/dict/data/type/moratorium_on_vaccination').then(res=>{
					if(res.code == 200) {
						this.moratorium = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue}
						})
					}
				})
			},
			/* 获取疫苗剂次 */
			getVacDictValue (val) {
				let url = '/system/dict/data/type/' + val
				this.$http.get(url).then(res=>{
					if(res.code == 200) {
						this.vacTimes = res.data
					}
				})
			},
			/* 获取接种地点 */
			getVacArea () {
				this.$http.get('/system/dict/data/type/vaccination_site').then(res=>{
					console.log(res)
					if(res.code == 200) {
						this.vacArea = res.data.map(v=>{
							return {label: v.dictLabel,vlaue:v.dictValue}
						})
					}
				})
			},
			/* 初始化 */
			init() {
				this.getVacTitle()
				this.getBirthplace()
				this.getTrade()
				this.getContraindication(),
				this.getMonVac()
				this.getVacArea()
				this.getOthersOption()
			},
			getDetail() {
				this.$http.get('boman-web-core/core/info/' + this.formData.id).then(res=>{
					if(res.code == 200 ) {
						this.init()
						
						this.formData = res.data
						if (this.formData.houseType == '是') {
							this.formData.houseTypeValue = 0
						} else {
							this.formData.houseTypeValue = 1
						}
						if (this.formData.gender == '男') {
							this.formData.genderIndex = 0
						} else {
							this.formData.genderIndex = 1
						}
						if (this.formData.isVaccination == '是') {
							this.formData.isVaccinationValue = 0
						} else {
							this.formData.isVaccinationValue = 1
						}
						this.birAddress = ''
						if (this.formData.villageTowns) {
							this.birAddress += this.formData.villageTowns
						}
						if (this.formData.village) {
							this.birAddress += this.formData.village
						}
						if (this.formData.villagerGroup) {
							this.birAddress += this.formData.villagerGroup
						}
						var tempArr = []
						// for (var i = 0; i < this.formData.urlArr.length; i++) {
						// 	var img = this.formData.urlArr[i]
						// 	var item = {
						// 		'name': '禁忌症附件',
						// 		'url': img
						// 	}
						// 	tempArr.push(item)
						// }	
						// this.formData.url = JSON.stringify(tempArr)
						
						// tempArr = []
						// for (var i = 0; i < this.formData.suspendUrlArr.length; i++) {
						// 	var img = this.formData.suspendUrlArr[i]
						// 	var item = {
						// 		'name': '暂缓附件',
						// 		'url': img
						// 	}
						// 	tempArr.push(item)
						// }	
						// this.formData.suspendUrl = JSON.stringify(tempArr)
						
						// tempArr = []
						// for (var i = 0; i < this.formData.otherUrlArr.length; i++) {
						// 	var img = this.formData.otherUrlArr[i]
						// 	var item = {
						// 		'name': '其他附件',
						// 		'url': img
						// 	}
						// 	tempArr.push(item)
						// }	
						// this.formData.otherUrl = JSON.stringify(tempArr)
						
						for (var i = 0; i < this.formData.vaccineInfoUserList.length; i++) {
							var item = this.formData.vaccineInfoUserList[i]
							// 设置“进度”
							if (item.progress == '已完成') {
								this.$set(item, 'progressValue', 0)
							} else {
								this.$set(item, 'progressValue', 1)
							}
							if (item.url != undefined && item.url != '') {
								var urlArr = JSON.parse(item.url)
								tempArr = urlArr.map(v=>{
									return v.url
								})
								this.$set(item, 'urlArr', tempArr)
							} else {
								this.$set(item, 'urlArr', [])
							}
							console.log('============' + JSON.stringify(item))
						}
					}
				})
			},
			/* 上传后端获取身份证信息 */
			getIdcardInfo (val) {
				if (this.formData == undefined) {
					return
				}
				console.log(this.formData.idCard)
				if (this.formData.idCard == undefined || this.formData.idCard == '') {
					return
				}
				this.$http.post('boman-web-core/core/info/findHjInfo',{
					idCard: this.formData.idCard
				}).then(res=>{
					if(res.code == 200 ) {
						this.formData.userName = res.data.userName
						this.formData.age = res.data.age
						this.formData.gender = res.data.gender
						if (this.formData.gender == '男') {
							this.formData.genderIndex = 0
						} else {
							this.formData.genderIndex = 1
						}
					}
				})
			},
			// 疫苗选择组件
			showVacPicker (index) {
				if (this.formData.id != undefined && this.formData.id != "") {
					return
				}
				this.curIndex = index
				this.$refs.vacselet.show()
			},
			/* 成功选择疫苗 */
			vacNameChange (e) {
				console.log(JSON.stringify(e))
				var curItem = this.formData.vaccineInfoUserList[this.curIndex]
				console.log('------' + JSON.stringify(curItem))
				var label = e[0].label
				for (var i = 0; i < this.vacTitle.length; i++) {
					var item = this.vacTitle[i]
					console.log('0000000' + JSON.stringify(item))
					if (label == item.label) {
						this.$set(curItem, 'vaccineName', label)
						this.$set(curItem, 'jiciOption', item.children)
						this.$set(curItem, 'vaccineNum', item.children.length)
					}
				}
				console.log('======' + JSON.stringify(this.formData.vaccineInfoUserList[this.curIndex]))
			},
			// 剂次选择组件
			showJiciPicker (index) {
				if (this.formData.id != undefined && this.formData.id != "") {
					return
				}
				this.curIndex = index
				var curItem = this.formData.vaccineInfoUserList[this.curIndex]
				console.log('curItem ' + JSON.stringify(curItem))
				// this.jiciOption = curItem.jiciOption
				this.jiciOption = curItem.jiciOption.map(v=>{
					return {label: v.dictLabel, vlaue:v.dictValue}
				})
				console.log('jiciOption ' + JSON.stringify(this.jiciOption))
				this.$refs.jici_select.show()
			},
			jiciChange (e) {
				console.log(JSON.stringify(e[0]))
				var curItem = this.formData.vaccineInfoUserList[this.curIndex]
				console.log('curItem ' + JSON.stringify(curItem))
				this.$set(curItem, 'jici', e[0].label)
				var selectedIndex
				for (var i = 0; i < curItem.jiciOption.length; i++) {
					var item = curItem.jiciOption[i]
					console.log('item ' + JSON.stringify(item))
					if (item.dictLabel == curItem.jici) {
						selectedIndex = i 
					}
				}
				if (selectedIndex == curItem.jiciOption.length - 1) {// 位置为最后一剂次，设置已完成
					this.$set(curItem, 'progressValue', 0)
				} else {
					this.$set(curItem, 'progressValue', 1)
				}
				
			},
			showOthersPicker(index) {
				this.curIndex = index
				this.$refs.others_selet.show();
			},
			/* 其他 */
			othersChange(e) {
				console.log(JSON.stringify(e[0]))
				this.formData.other = e[0].label
			},
			/* 户籍地选择组件 */
			showbirPicker () {
				this.$refs.birselet.show()
			},
			/* 成功选择户籍 */
			birRegion (e) {
				console.log('---------' + JSON.stringify(e))
				this.formData.villageTowns = e[0].label
				this.formData.village = e[1].label
				this.formData.villagerGroup = e[2].label
				this.birAddress = this.formData.villageTowns + this.formData.village + this.formData.villagerGroup
			},
			/* 出生日期组件 */
			showDatePicker () {
				this.$refs.setpicker.show();
								
			},
			/* 重点行业选择组件 */
			showTrdesSelect () {
				this.$refs.tredselet.show();
			},
			/* 成功选择行业 */
			trdesChange (e) {
				this.formData.keyIndustries = e[0].label
			},
			/* 接种时间组件 */
			showVacTime (index) {
				if (this.formData.id != undefined && this.formData.id != "") {
					return
				}
				this.curIndex = index
				this.$refs.vacTime.show();
			},
			/* 禁忌症组件 */
			showMonList () {
				this.$refs.con_selet.show();
			},
			/* 成功选择禁忌症 */
			conChange(e) {
				console.log(JSON.stringify(e))
				this.formData.contraindication = e[0].label
			},
			/* 暂缓接种组件 */
			showWaitList () {
				this.$refs.mor_selet.show();
			},
			/* 成功选择暂缓原由 */
			morChange (e) {
				this.formData.suspend = e[0].label
			},
			/* 接种地点组件 */
			showVacArea (index) {
				if (this.formData.id != undefined && this.formData.id != "") {
					return
				}
				this.curIndex = index
				this.$refs.vacareaselet.show();
			},
			/* 成功选择接种地点 */
			vacAreaChange (e) {
				console.log(JSON.stringify(e[0]))
				var curItem = this.formData.vaccineInfoUserList[this.curIndex]
				this.$set(curItem, 'vaccinationPlace', e[0].label)
			},
			/* 省市区组件 */
			showArea () {
				this.$refs.area.show();
			},
			// quxiaobutton() {
			// 	this.shixian = false;
			// },
			// quedingbutton (bangdingyear,bangdingmonth,bangdingday){
			// 	this.shixian = false;
			// 	this.inputValue = bangdingyear + "-" + bangdingmonth + "-" + bangdingday;
				
			// },
			/* 添加接种信息 */
			addInfo (item) {
				if(this.formData.vaccineInfoUserList.length >= 3) {
					this.modalContent = '最多可添加三次接种信息'
					this.$refs.h_modal.show()
					return false
				}
				let obj = {
					"vaccineName": "",
					"vaccinationTime": "",
					"vaccinationPlace": "",
					"jici": "",
					'progressValue': 1,
					"progress": "未完成",
					'urlArr': [],// 附件
					'isDel': 'N'
				}
				this.formData.vaccineInfoUserList.push(obj)
				console.log(this.formData.vaccineInfoUserList)
			},
			delVacInfoDialog(item, index) {
				this.curItem = item
				this.curIndex = index
				this.$refs.delPopup.open()
			},
			/* 删除接种信息 */
			delConfirm (done) {
				done()
				if(this.formData.vaccineInfoUserList.length <= 1) {
					this.modalContent = '至少需要填写一次接种信息'
					this.$refs.h_modal.show()
					return false
				}
				// this.formData.vaccineInfoUserList.splice(index,1)
				this.$set(this.formData.vaccineInfoUserList[this.curIndex], 'isDel', 'Y')
			},
			getAge(strAge) {
				var birArr = strAge.split("-");
				var birYear = birArr[0];
				var birMonth = birArr[1];
				var birDay = birArr[2];

				d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1; //记得加1
				var nowDay = d.getDate();
				var returnAge;

				if (birArr == null) {
					return false
				};
				var d = new Date(birYear, birMonth - 1, birDay);
				if (d.getFullYear() == birYear && (d.getMonth() + 1) == birMonth && d.getDate() == birDay) {
					if (nowYear == birYear) {
						returnAge = 0; // 
					} else {
						var ageDiff = nowYear - birYear; // 
						if (ageDiff > 0) {
							if (nowMonth == birMonth) {
								var dayDiff = nowDay - birDay; // 
								if (dayDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							} else {
								var monthDiff = nowMonth - birMonth; // 
								if (monthDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							}
						} else {
							return  "出生日期晚于今天，数据有误"; //返回-1 表示出生日期输入错误 晚于今天
						}
					}
					return returnAge;
				} else {
					return ("输入的日期格式错误！");
				}
			}
		},
		onLoad(option) {
			console.log('onLoad')
			if (option.id) {
				this.formData.id = option.id
				uni.setNavigationBarTitle({
					title: '修改'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '新增'
				})
			}
		},
		mounted () {
			if (this.formData.id) {// “编辑”模式下，先获取详情，再获取选项列表
				this.getDetail()
			} else {// “新增”模式下，获取选项列表
				this.init()
			}
		}
	}
</script>

<style>
	.vac-form textarea {
		display: block;
		padding:16rpx 36rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
</style>

<style scoped lang="scss">
	.pick-line {
		width: 100%; 
		height: 100%; 
		display: flex; 
		flex-direction: row; 
		align-items: center; 
		padding-left: 20rpx;
	}
	.from_image{
		width: 30rpx;
		height: 30rpx;
	}
	.delPop {
		z-index: 2;
		top: -10rpx;
		right: -10rpx;
	
		.circleRed {
			width: 40rpx;
			height: 40rpx;
			background-color: red;
			border-radius: 50%;
	
			&::after,
			&::before {
				content: '';
				width: 25rpx;
				height: 5rpx;
				position: absolute;
				background-color: white;
				top: 50%;
				left: 50%;
				// transform-origin:center;
			}
	
			&::after {
				transform: translate(-50%, -50%) rotate(45deg);
			}
	
			&::before {
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}
	}
	
	.img-add {
		width: 120rpx;
		height: 120rpx;
		margin: 10rpx 3% 10rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
		justify-content: center;
	
		.add {
			padding-top: 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			image {}
	
			.font {
				color: #8a8a8a;
				font-size: 26rpx;
			}
		}
	
	}
</style>