<template>
	
	<view>
		<view class="uni-list" v-for="(item, findex) in surveyModalForm.details" :key="findex">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					物业<text class="require">*</text>
				</view>
				<view class="uni-list-cell-db">
					<text class="cu-tag">{{estateNameList[findex]}}</text>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					联系人<text class="require">*</text>
				</view>
				<view class="uni-list-cell-db">
					<input  v-model="surveyModalForm.details[findex].contact_name" maxlength="20" placeholder="请输入，最多50字" />
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					联系人电话<text class="require">*</text>
				</view>
				<view class="uni-list-cell-db">
					<input  v-model="surveyModalForm.details[findex].contact_phone"  />
				</view>
			</view>

			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					小片区<text class="require">*</text>
				</view>
				<view class="uni-list-cell-db" v-if="smallAreaList.length > 0">
					<picker @change="onChangeSelect($event, 'small_area',findex)" :value="selectSmallAreaIndex[findex].index" range-key="name"
						:range="smallAreaList">
						<view>
							{{smallAreaList[selectSmallAreaIndex[findex].index]?smallAreaList[selectSmallAreaIndex[findex].index].name:''}}
						</view>
					</picker>
				</view>
			</view>

			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					查勘员<text class="require">*</text>
				</view>
				<view class="uni-list-cell-db">
					<picker @change="onChangeSelect($event, 'surveyor',findex)" :value="selectSurveyorIndex[findex].index" range-key="userNickName"
						:range="surveyorList">
						<view>{{surveyorList[selectSurveyorIndex[findex].index]?surveyorList[selectSurveyorIndex[findex].index].userNickName:''}}
						</view>
					</picker>
				</view>
			</view>

			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					查勘备注
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-list-cell-db">
						<textarea class="uni-input" v-model="surveyModalForm.details[findex].remark" auto-height=true maxlength="150"
							placeholder="请输入" />
					</view>
				</view>
			</view>
            <view class='line'></view>
			
		</view>
		<view class="button-sp-area">
			<button class='mini-btn' @click='cancel()' type="primary" size='mini'>取消</button>
			<button class='mini-btn' @click='suveryApply()' type="primary" size='mini'>提交</button>
		</view>
	</view>
</template>

<script>
	import {
		reqPropertyInfo,
		getSmallArea,
		getRole,
		askSurvey

	} from '@/api/inquiry/inquiry'
	
	import { toast } from '@/utils/common'
	export default {

		data() {

			return {
				estateNameList:[],
				surveyModalForm: {
				        //order_no: this.$route.query.order_no,
						order_no: this.$route.query.order_no,
				        details: [
				          {
				            property_cert_info_id: '',
				            contact_name: '',
				            contact_phone: '',
				            area: '',
				            area_id: '',
				            remark: '',
				            survey_user_id: '',
				            survey_user_name: ''
				          }
				        ]
				      },
				selectSmallAreaIndex: [{index:0}],
				selectSurveyorIndex: [{index:0}],
				

				smallAreaList: [],
				surveyorList: []

			}
		},
		
		async created() {
			
			await this.initSmallArea(this.$route.query.city_id);
			await this.initSurveyor();
			await this.initEstateInfo(this.$route.query.inquiry_id);

		},

		methods: {
			async initSurveyor() {
				let params = {roleCode:"Surveyor"}
				await getRole(params).then(res => {
					if (res.code === 1) {
						this.surveyorList = res.data
					} else {
						toast(res.msg)
						
					}
				})
			},
			async initEstateInfo(inquiry_id) {
				let params = {quot_id:inquiry_id}
				await reqPropertyInfo(params).then(res => {
					if (res.code === 1) {
						let estateList = res.data
						console.log("initEstateInfo initEstateInfo:",estateList );
						estateList.forEach((item,index)=>{
							this.estateNameList.push(item.building_name)
							if(index == 0) {
								this.surveyModalForm.details[0].property_cert_info_id = item.id
								this.surveyModalForm.details[0].area = this.smallAreaList[0].name
								this.surveyModalForm.details[0].area_id = this.smallAreaList[0].id
								this.surveyModalForm.details[0].survey_user_id = this.surveyorList[0].userId
								this.surveyModalForm.details[0].survey_user_name = this.surveyorList[0].userNickName
							}else {
								this.selectSmallAreaIndex.push({index:0})
								this.selectSurveyorIndex.push({index:0})
								this.surveyModalForm.details.push({
								  property_cert_info_id: item.id,
								  contact_name: '',
								  contact_phone: '',
								  area: this.smallAreaList[0].name,
								  area_id: this.smallAreaList[0].id,
								  remark: '',
								  survey_user_id: this.surveyorList[0].userId,
								  survey_user_name: this.surveyorList[0].userNickName
								})
							}
						})
					} else {
						
						toast(res.msg)
					}
				})
			},
			async initSmallArea(city_id) {
				let params = {id:city_id}
				await getSmallArea(params).then(res => {
					if (res.code === 1) {
					     let samllAreaObj = res.data	
						 for (let i in samllAreaObj) {
						     let id = i;
						     let name = samllAreaObj[i];
						     this.smallAreaList.push({id:id,name:name});
						 }
					} else {
						toast(res.msg)	
					}
				})
			},
			suveryApply() {
				askSurvey(this.surveyModalForm).then(res => {
					if (res.code === 1) {
						this.$tab.navigateTo('/pages/inquiry/index')
					} else {
						toast(res.msg)
					}
				})
			},
			cancel() {
				this.$tab.navigateTo('/pages/inquiry/index')
			},
			onChangeSelect(event, name, index, item) {
				if (!event) {
					return
				}
				
				switch (name) {

					case 'small_area':
						this.selectSmallAreaIndex[index].index = event.detail.value
						this.surveyModalForm.details[index].area = this.smallAreaList[this.selectSmallAreaIndex[index].index].name
						this.surveyModalForm.details[index].area_id = this.smallAreaList[this.selectSmallAreaIndex[index].index].id
												 
						break
                    case 'surveyor':
					    this.selectSurveyorIndex[index].index = event.detail.value
					    this.surveyModalForm.details[index].survey_user_id = this.surveyorList[this.selectSurveyorIndex[index].index].userId
						this.surveyModalForm.details[index].survey_user_name = this.surveyorList[this.selectSurveyorIndex[index].index].userNickName
				}
			},
		}
	}
</script>

<style>
	/* 将 mask 缩小到一行 */
	.uni-popup-mask {
		height: 1px;
	}

	/* 将 mask 演示为浅蓝色 */
	.uni-popup-mask::before {
		background-color: #e6f1ff;
	}

	.uni-list-cell {
		line-height: 90rpx;
		display: flex;
		align-items: center;
	}


	.btn {
		color: #ff6a00;
		border: 1px;
		border-color: blue;
	}

	.require {
		color: red;
	}

	.line {
		width: 100%;
		height: 5rpx;
		background-color: #E6E6E6;
	}

	.line2 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 80%;
		text-align: center;
	}

	.mini-btn {
		margin-right: 20rpx;
	}
</style>
