<template>
	<el-dialog :visible.sync="dialogVisible" width="1370px" :before-close="handleCancle">
		<span slot="title">
			<span v-if="pageType == 'add'">新增</span>
			<span v-if="pageType == 'edit'">修改</span>
			<span v-if="pageType == 'view'">查看</span>
		</span>
		<div>
			<div class="dialog-h-content scroll-h">
				<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" :label-width="'90px'" v-if="pageType != 'view'">
					<el-row>
						<el-col :span="6">
							<el-form-item label="场所名称" prop="placeOrgName">
								<el-input v-model="formData.placeOrgName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="场所类型" prop="placeType">
								<el-select class="u-item-width-normal" :disabled="disabled" v-model="formData.placeType" placeholder="全部" size="small" clearable>
									<el-option v-for="item in placeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="占地面积" prop="areaCovered">
								<el-input v-model="formData.areaCovered" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="场所规模" prop="scaleTotal">
								<el-input
									type="number"
									v-model="formData.scaleTotal"
									:disabled="disabled"
									class="u-item-width-normal"
									size="small"
									clearable
									placeholder="请输入可容纳人数"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="所属组织" prop="gridId">
								<el-select v-model="formData.gridId" class="u-item-width-normal" :disabled="disabled" placeholder="全部" size="small" clearable>
									<el-option v-for="item in gridList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="场所类别" prop="placeCategory">
								<el-select v-model="formData.placeCategory" :disabled="disabled" placeholder="请选择" size="small" clearable class="u-item-width-normal">
									<el-option v-for="item in placeCategoryArray" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="负责人" prop="personInCharge">
								<el-input v-model="formData.personInCharge" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系电话" prop="mobile">
								<el-input v-model="formData.mobile" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="场所地址" prop="address" style="display: block">
								<el-select
									v-model="formData.address"
									:disabled="disabled"
									filterable
									remote
									:reserve-keyword="true"
									placeholder="请输入关键词"
									:remote-method="remoteMethod"
									:loading="loading"
								>
									<el-option
										v-for="(item, index) in searchOptions"
										@click.native="handleClickKey(index)"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<div id="app_event" class="div_map"></div>
				</el-form>
				<el-form :inline="false" :model="formData" ref="form" :label-width="'90px'" v-if="pageType == 'view'">
					<el-row>
						<el-col :span="12">
							<el-form-item label="场所类别" prop="placeCategory">{{ formData.placeCategoryName }}</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="场所类型" prop="placeType">{{ formData.placeTypeName }}</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="占地面积" prop="areaCovered">{{ formData.areaCovered }}</el-form-item>
						</el-col>
						 -->
						<el-col :span="12">
							<el-form-item label="场所区域" prop="gridId">{{ formData.gridName }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="场所名称" prop="placeOrgName">{{ formData.placeOrgName }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="场所规模" prop="scaleTotal">{{ formData.scaleTotal }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="负责人" prop="personInCharge">{{ formData.personInCharge }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系电话" prop="mobile">{{ formData.mobile }}</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="场所地址" prop="address" style="display: block">{{ formData.address }}</el-form-item>
						</el-col>
					</el-row>
					<div id="app_event" class="div_map"></div>
				</el-form>
			</div>
			<div class="div_btn" v-if="pageType != 'view'">
				<el-button size="small" @click="handleCancle">取 消</el-button>
				<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> -->
				<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">保 存</el-button>
			</div>
			<div class="recordBox"><record v-if="pageType != 'add' && detailId" :formType="pageType" :id="detailId" :info="{ agencyId: agencyId }"></record></div>
		</div>

		<span slot="footer" class="dialog-footer">
			<el-button @click="handleCancle">关 闭</el-button>
			<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> -->
		</span>
	</el-dialog>
</template>

<script>
import { isMobile } from '@/utils/validate';
import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request';
import daiMap from '@/utils/dai-map';
import nextTick from 'dai-js/tools/nextTick';
import record from './record';
let loading; // 加载动画
let map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类

export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: ''
		},
		defaultData: {
			type: Object,
			default: null
		},
		pageType: {
			type: String,
			default: ''
		},
		detailId: {
			type: String,
			default: ''
		},
		detailData: {
			type: Object,
			default: null
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},

	data() {
		let checkNum = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('场所规模不能为空'));
			}
			setTimeout(() => {
				if (!Number.isInteger(value)) {
					callback(new Error('请输入数字值'));
				}
			}, 1000);
		};
		let checkMObile = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入联系电话'));
			} else {
				if (!isMobile(value)) {
					callback(new Error('联系电话格式不正确'));
				}
				callback();
			}
		};
		return {
			btnDisable: false,
			user: '',
			agencyId: '',
			gridList: [], //所属网格list--场所区域
			placeTypeList: [], //场所类型
			resultArray: [{ value: '0', label: '合格' }, { value: '1', label: '不合格' }],
			placeCategoryArray: [{ value: '0', label: '九小场所' }, { value: '1', label: '企事业单位' }],
			list: {},
			formData: {
				placeOrgName: '',
				scaleTotal: '',
				gridId: '',
				latestResult: '',
				placeCategory: '',
				placeType: '',
				personInCharge: '',
				address: '',
				mobile: '',
				// result: '',
				remark: ''
			},
			dataRule: {
				placeOrgName: [{ required: true, message: '场所名称不能为空', trigger: 'bulr' }],
				placeCategory: [{ required: true, message: '场所类别不能为空', trigger: 'bulr' }],
				placeType: [{ required: true, message: '场所类型不能为空', trigger: 'bulr' }],
				result: [{ required: true, message: '巡查结果不能为空', trigger: 'bulr' }],
				scaleTotal: [{ required: true, validator: checkNum, trigger: 'bulr' }],
				gridId: [{ required: true, message: '所属组织不能为空', trigger: 'bulr' }],
				personInCharge: [{ required: true, message: '负责人不能为空', trigger: 'bulr' }],
				mobile: [{ required: true, validator: checkMObile, trigger: 'blur' }],
				address: [{ required: true, message: '场所地址不能为空', trigger: 'blur' }]
				// content: [{ required: true, message: '详细说明不能为空', trigger: 'bulr' }, { max: 1000, message: '不能超出1000个字符', trigger: 'blur' }]
			},
			//地图
			loading: false,

			searchValue: '',
			searchOptions: []
		};
	},
	watch: {},
	components: { record },
	created() {},
	async mounted() {
		this.user = this.$store.state.user;
		this.agencyId = this.user.agencyId;
		this.startLoading();
		this.loadGrid();
		this.loadplaceType();
		if (this.pageType != 'add') {
			this.getDetail();
		} else {
			this.initMap();
		}
		await this.endLoading();
		this.endLoading();
	},

	methods: {
		async loadGrid() {
			const url = '/gov/org/customergrid/gridoption';
			let params = {
				agencyId: this.agencyId,
				purpose: 'query'
			};
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.gridList = data;
			} else {
				this.$message.error(msg);
			}
		},
		//场所类型
		async loadplaceType() {
			const url = '/sys/dict/data/dictlist';

			let params = {
				dictType: 'ic_enterprise_place_type'
			};
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.placeTypeList = data;
			} else {
				this.$message.error(msg);
			}
		},
		async getDetail() {
			const url = `/gov/org/enterprise/detail/${this.detailId}`;
			const { data, code, msg } = await requestPost(url);
			if (code === 0) {
				this.formData = { ...data };
				this.initMap();
			} else {
				this.$message.error(msg);
			}
		},

		handleComfirm() {
			this.save();
		},
		async handleAdd() {
			// this.btnDisable = true;
			// setTimeout(() => {
			// 	this.btnDisable = false;
			// }, 10000);
			// nextTick(1000);
			// const form = new Promise((resolve, reject) => {
			// 	this.$refs['form'].validate(valid => {
			// 		if (valid) resolve();
			// 	});
			// });
			// const form1 = new Promise((resolve, reject) => {
			// 	this.$refs['form1'].validate(valid => {
			// 		if (valid) resolve();
			// 	});
			// });
			// Promise.all([form1, form])
			// 	.then(() => {
			// 		this.addFuwu();
			// 	})
			// 	.catch(() => {
			// 		app.util.validateRule(messageObj);
			// 		this.btnDisable = false;
			// 	});
		},

		async save() {
			this.formData.agencyId = this.agencyId;
			var url = '';
			var params = {};
			url = '/gov/org/enterprise/addOrUpdate';
			params = { ...this.formData };
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.$message.success('操作成功');

				this.handleCancle();
				// // this.resetData();
				// this.$emit('handleComfirm');
			} else if (code >= 8000) {
				this.$message.error(msg);
			}
		},
		handleCancle() {
			// this.resetData();
			this.$emit('handleClose');
		},
		resetData() {
			this.$refs.form.resetFields();
		},
		// 开启加载动画
		startLoading() {
			loading = Loading.service({
				lock: true, // 是否锁定
				text: '正在加载……', // 加载中需要显示的文字
				background: 'rgba(0,0,0,.7)' // 背景颜色
			});
		},
		// 结束加载动画
		endLoading() {
			// clearTimeout(timer);
			if (loading) {
				loading.close();
			}
		}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
		initMap() {
			let { latitude, longitude } = this.$store.state.user;

			if (this.formData.latitude && this.formData.longitude) {
				latitude = this.formData.latitude;
				longitude = this.formData.longitude;
			}
			if (!latitude || latitude == '' || latitude == '0') {
				latitude = 39.9088810666821;
				longitude = 116.39743841556731;
			}

			this.$nextTick(() => {
				map = new daiMap(
					document.getElementById('app_event'),
					{ latitude, longitude },
					{
						zoom: 16.2, // 设置地图缩放级别
						pitch: 43.5, // 设置俯仰角
						rotation: 45 // 设置地图旋转角度
					}
				);
				// 监听地图平移结束
				map.on('dragend', e => {
					this.handleMoveCenter(e);
				});

				map.setCenter(latitude, longitude);
				if (this.formData.latitude) {
					map.setMarker(latitude, longitude);
				}
			});
		},
		async handleMoveCenter() {
			//修改地图中心点
			const { lat, lng } = map.getCenter();
			this.formData.latitude = lat;
			this.formData.longitude = lng;
			map.setMarker(lat, lng);

			let { msg, data } = await map.getAddress(lat, lng);
			if (msg == 'success') {
				this.formData.address = data.address;
				this.searchValue = data.address;
				this.searchOptions = [];
			}
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				const { msg, data } = await map.searchNearby(query);
				this.loading = false;
				this.resultList = [];

				if (msg == 'success' && data.resultList && data.resultList.length > 0) {
					if (data.resultList && data.resultList.length > 0) {
						this.resultList = data.resultList;
						this.searchOptions = this.resultList.map(item => {
							return { value: `${item.id}`, label: `${item.address + item.name}` };
						});
					}
				} else {
					this.searchOptions = [
						{
							value: '0',
							label: '未检索到结果'
						}
					];
				}
			} else {
				this.searchOptions = [];
			}
		},
		handleClickKey(index) {
			let selPosition = this.resultList[index];
			let lonlat = selPosition.lonlat.split(' ');
			map.setCenter(lonlat[1], lonlat[0]);
			map.setMarker(lonlat[1], lonlat[0]);
			this.formData.latitude = lonlat[1];
			this.formData.longitude = lonlat[0];
			this.formData.address = selPosition.address + selPosition.name;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/modules/management/form-main.scss';
@import '@/assets/scss/modules/management/form.scss';
// @import '@/assets/scss/modules/visual/a_customize.scss';
</style>
