<template>
	<view>
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					{{pageTitle}}
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 50 + 'px'}">
			<view class="type flex">
				<view class="name"><text class="star">*</text>巡检点名称：</view>
				<!-- <input class="inpuStyle" v-model="form.checkingPointName" placeholder="请输入"></input> -->
				<view class="value">{{form.checkingPointName}}</view>
			</view>
			<view class="type flex">
				<view class="name"><text class="star">*</text>巡检点位置：</view>
				<!-- <input class="inpuStyle" v-model="form.position" placeholder="请输入"></input> -->
				<view class="value">{{form.position}}</view>
			</view>
			<view class="type flex">
				<view class="name"><text class="star">*</text>所属区域：</view>
				<!-- <picker mode="selector" :range="pointAreaList" range-key="regionName" @change="handleChangeRegion" filterable>
					<view class="picker">
						<view class="" style="color: #c0c4cc; font-size: 28rpx;" v-if="!form.qualityRegionId">
							请选择
						</view>
						<view class="" v-else>
							{{areaData.regionName}}
						</view>
					</view>
				</picker> -->
				<view class="value">{{areaData.regionName}}</view>
			</view>
			<view class="type flex">
				<view class="name"><text class="star">*</text>责任企业：</view>
				<!-- <g-picker style="flex: 1" v-model="enterpriseName" :columns="enterpriseList" :filter="{label: 'enterpriseName', value: 'id'}" input-align="left" @confirm="handleChangeEnterprise"></g-picker> -->
				<view class="value">{{enterpriseName}}</view>
			</view>
			<view class="type flex">
				<view class="name"><text class="star">*</text>责任人：</view>
				<!-- <g-picker style="flex: 1" v-model="inspectUserName" :columns="chargerList" :filter="{label: 'realName', value: 'userId'}" input-align="left" @confirm="handleChangeCharger"></g-picker> -->
				<view class="value">{{inspectUserName}}</view>
			</view>
			<view class="type flex">
				<view class="name large"><text class="star">*</text>最低巡检时长：</view>
				<!-- <input v-model="form.minInspectTime" type="number" placeholder="请输入" /> -->
				<view class="value">{{form.minInspectTime}}分钟</view>
			</view>
			<view class="type flex">
				<view class="name">巡检点定位：</view>
				<view v-if="form.addr" class="areaStyle">
					{{form.addr}}
				</view>
				<image class="location_ic" src="@/static/icon/location.svg"></image>
			</view>
			<view class="type flex">
				<view class="name large-2"><text class="star">*</text>自定义范围：</view>
				<!-- <picker mode="selector" :range="standOptions" @change="handleChangeStandArea" filterable>
					<view class="picker">
						<view class="" style="color: #c0c4cc; font-size: 28rpx;" v-if="!form.standArea">
							请选择
						</view>
						<view class="" v-else>
							{{form.standArea}}
						</view>
					</view>
				</picker> -->
				<view class="value">{{form.standArea}}米</view>
			</view>
			<view class="dy_form">
				<view class="dy_head">
					<view class="head_left">
						<image class="ic" src="@/static/icon/form.svg"></image>
						<text class="title">动态表单</text>
					</view>
				</view>
				<view class="dy_content" v-for="(item, index) in dyFormData" :key="index">
					<view class="c_colum">
						<!-- <input v-model="item.title" /> -->
						<view>{{item.title}}</view>
					</view>
					<view class="c_body">
						<input disabled="true" class="c_input" v-model="item.value" :placeholder="`请输入${item.title}`" />
						<radio-group>
							<radio disabled="true" style="margin-right: 12rpx;" value="1" :checked="item.isRequired == '1'">必填</radio>
							<radio disabled="true" value="2" :checked="item.isRequired == '2'">非必填</radio>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gPicker from "@/components/g-picker/g-picker.vue"
	export default {
		components: {
			gPicker
		},
		data() {
			return {
				editId: "",
				standOptions: [30, 50, 100, 200, 300],
				mobileTopHeight: 0,
				projectSn: '',
				userInfo: {},
				pointAreaList: [],
				areaData: {},
				enterpriseData: {},
				chargerList: [],
				enterpriseList: [],
				pageTitle: "巡检点详情",
				checkEnterpriseName: "",
				enterpriseName: "",
				inspectUserName: "",
				form: {
					checkingPointName: "",
					position: "",
					qualityRegionId: "", // 区域ID
					enterpriseId: "", // 责任企业
					inspectUserIds: "", //检查人
					noticeUserIds: "", //通知人
					startTime: "",
					endTime: "",
					frequencyType: 1,
					frequencyNum: 1,
					minInspectTime: undefined,
					standArea: 100, //范围
					latitude: "", //纬度
					longitude: "", //经度
					addr: "", //地图区域
				},
				dyFormData: [{
					title: "表单标题",
					name: "",
					isRequired: "1",
					value: "",
				}]
			}
		},
		onLoad(option) {
			let that = this;
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			
			this.editId = ""
			
			// 编辑
			if(option.id) {
				this.editId = option.id;
				this.init();
			}
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo',res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight',this.mobileTopHeight)
		},
		methods: {
			// 消除异步
			async init() {
				await this.getPointAreaFn();
				await this.getData()
			},
			// 编辑回显
			getData() {
			 	return new Promise((resolve, reject) => {
					console.info("getData", new Date().getTime())
					this.sendRequest({
						url: 'xmgl/checkingPoint/queryById',
						method: 'get',
						data: {
							id: this.editId
						},
						success: (res) => {
							if(res.code === 200) {
								this.form = res.result
								
								// 区域
								const obj = this.pointAreaList.find(item => item.id === this.form.qualityRegionId)
								this.areaData = obj || {}
								
								// 责任企业
								this.enterpriseList = this.areaData.enterpriseInfos || [];
								const eObj = this.enterpriseList.filter(item => this.form.enterpriseId.includes(item.id))
								this.enterpriseName = eObj.map(item => item.enterpriseName).join(',')
								
								// 责任人
								this.chargerList = this.areaData.systemUsers.filter((item) => {
								  return this.form.enterpriseId.includes(item.enterpriseId);
								}) || [];
								this.inspectUserName = this.chargerList.filter(item => this.form.inspectUserIds.includes(item.userId)).map(item => item.realName).join(',')
								
								let tempArr = JSON.parse(this.form.template) || []
								tempArr.forEach(item => item.isRequired = item.isRequired ? "1" : "2")
								// 动态表单
								this.dyFormData = tempArr
								
								console.info(eObj, 'eObj', this.dyFormData, tempArr)
								resolve(res)
							}
							console.log(res, 'xiangqing');
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			// 获取区域列表
			getPointAreaFn() {
				return new Promise((resolve, reject) => {
					console.info("getPointAreaFn", new Date().getTime())
					let requestData = {
						projectSn: this.projectSn,
					};
					this.sendRequest({
						url: 'xmgl/qualityRegion/notTreeList',
						method: 'post',
						data: requestData,
						success: (res) => {
							console.log(res);
							this.pointAreaList = res.result;
							console.info("getPointAreaFn处理结束", new Date().getTime())
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="less">
	
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		.headerName{
			z-index: 1;
		}
		/deep/ .headerBox {
			background-color: #5181F6;
			color: white;
			.uni-icons{
				color: white !important;
			}
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}
	
	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.flex3 {
		display: flex;
	}
	
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20px 30rpx;
	}
	
	.type {
		font-size: 30rpx;
		line-height: 40px;
		margin-bottom: 8px;
		/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
	}
	
	.type .name {
		margin-right: 6px;
		width: 185rpx;
		text-align: left;
		white-space: nowrap;
		&.large {
			width: 300rpx;
		}
		&.large-2 {
			width: 240rpx;
		}
	}
	.type .value {
		text-align: right;
		color: #000;
		flex: 1;
	}
	.uni-input {
		line-height: 32px;
	}
	
	.textarea {
		width: calc(79% - 32px);
		border-radius: 5px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 50px;
	}
	
	.inpuStyle {
		width: calc(80% - 35px);
		border-radius: 5px;
		// border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 35px;
		color: #000;
	}
	.areaStyle {
		// width: calc(80% - 35px);
		flex: 1;
		margin-right: 56rpx;
		color: #000;
		line-height: 35rpx;
		height: 35px;
		display: flex;
		align-items: center;
		text-align: right;
	}
	.dy_form {
		display: flex;
		flex-direction: column;
		width: 100%;
		.dy_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
			.head_left {
				display: flex;
				align-items: center;
				.ic {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}
				.title {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					font-weight: 600;
				}
			}
			.add_btn {
				margin: 0;
			}
		}
		.dy_content {
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.c_colum {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: solid 1px rgba(187, 187, 187, 0.14);
				padding: 0 0 16rpx 16rpx;
				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
				.del_btn {
					margin: 0;
				}
			}
			.c_body {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 32rpx;
				.c_input {
					flex: 1;
					border: 2rpx solid rgba(220, 224, 231, 0.4);
					border-radius: 6rpx;
					height: 72rpx;
					padding: 0 12rpx;
					margin-right: 52rpx;
				}
			}
		}
	}
	.save-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.location_ic {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 30rpx;
	}
</style>