HS_MZAP/src/views/placeManage/placeRegister/placeRegisterInfo.vue

<template>
	<van-nav-bar fixed title="场所详细信息" left-arrow @click-left="onClickLeft"
		:style="{ 'background-color': selectColor }" />
	<div class="main" style="height: 100vh">
		<div class="banner">
			<img src="../../../../public/loginbg/banner.jpg" alt="" />
		</div>
		<div class="info" style="height: 500px">
			<van-form @submit="submit" @failed="failed" show-error :show-error-message="false">
				<van-tabs v-model:active="active" swipeable>
					<!-- 基础信息 -->
					<van-tab>
						<template #title> <van-icon name="orders-o" />基础信息</template>
						<div style="padding: 0 10px; height: 470px; overflow: auto">
							<div class="imgbox">
								<div class="img-left">
									<van-cell-group>
										<van-field name="uploader" label-align="top" label-width="8em"
											label="场所内外景(主):">
											<template #input>
												<van-uploader readonly v-model="fileList" :max-count="1" accept=""
													:preview-full-image="false" :before-delete="deleteRead"
													@click-upload="chooseImg">
												</van-uploader>
											</template>
										</van-field>
									</van-cell-group>
								</div>
								<div class="img-left">
									<van-cell-group>
										<van-field name="uploader" label-align="top" label-width="9em"
											label="场所内外景(其他):">
											<template #input>
												<van-uploader readonly v-model="fileList4" :max-count="5"
													preview-size="60" accept="" :preview-full-image="false"
													:before-delete="deleteRead4" @click-upload="chooseImg4">
												</van-uploader>
											</template>
										</van-field>
									</van-cell-group>
								</div>
							</div>
							<van-cell-group>
								<van-field v-model="dataitem.name" center required clearable
									:rules="[{ required: true }]" label="场所名称:" input-align="right"
									placeholder="请输入场所名称" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="religiousType" readonly required :rules="[{ required: true }]"
									label="宗教类型:" name="validator" placeholder="请选择教别" input-align="right"
									right-icon="arrow-down" @click="hs_religious = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.tyshxydm" center label-width="7em" clearable
									label="社会信用代码:" input-align="right" placeholder="请输入社会信用代码" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.contact" center label-width="7em" clearable label="场所联系人:"
									input-align="right" placeholder="请填写场所联系人" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.contactNumber" center label-width="7em" clearable
									label="联系电话:" input-align="right" placeholder="请输入联系电话" />
							</van-cell-group>

							<van-cell-group>
								<van-field v-model="placeAddress" center clearable readonly label="场所地点:"
									input-align="right" right-icon="arrow-down" placeholder="请输入场所地点"
									@click="showPlace1 = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.place" center clearable label="详细地点:" input-align="right"
									placeholder="请输入详细场所地点">
									<template #right-icon>
										<van-icon name="location" @click="getLocation" />
									</template>
								</van-field>
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.longitude" center clearable label-width="7em"
									label="场所坐标-经度:" input-align="right" placeholder="请输入场所经度坐标" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.latitude" center clearable label-width="7em"
									label="场所坐标-纬度:" input-align="right" placeholder="请输入场所纬度坐标" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.peopleThreshold" center clearable required
									:rules="[{ required: true }]" label="额定人数:" input-align="right"
									placeholder="请输入场所额定人数" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="placeTypeName" center readonly clearable required
									:rules="[{ required: true }]" label="场所类型:" input-align="right"
									placeholder="请选择场所类型" right-icon="arrow-down" @click="showPicker1 = true">
								</van-field>
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="propertyName" readonly required :rules="[{ required: true }]"
									label="场所性质" placeholder="请选择场所性质" input-align="right" right-icon="arrow-down"
									@click="showPicker3 = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.protectionLevel" center clearable label-width="7em"
									label="文物保护级别:" input-align="right" placeholder="请输入文物保护级别" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="constructionName" center required readonly clearable
									label-width="7em" label="场所建设阶段:" input-align="right" right-icon="arrow-down"
									placeholder="请选择场所建设阶段" @click="showPicker2 = true">
								</van-field>
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="lv" center required readonly clearable :rules="[{ required: true }]"
									label-width="7em" label="场所建筑等级:" input-align="right" right-icon="arrow-down"
									placeholder="请选择场所建筑等级" @click="showlv = true">
								</van-field>
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.coveredArea" center clearable label="建筑面积(㎡):"
									input-align="right" placeholder="请输入场所建筑面积" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.floorSpace" center clearable label="占地面积(㎡):"
									input-align="right" placeholder="请输入场所占地面积" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.plan" center clearable label="场所规划:" input-align="right"
									placeholder="请填写场所规划" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.mainRoads" center clearable label-width="8em"
									label="出入口主要道路:" input-align="right" placeholder="请填写出入口主要道路" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.publicArea" center clearable label-width="7em"
									label="外围公共区域:" input-align="right" placeholder="请填写外围公共区域" />
							</van-cell-group>
							<van-cell-group>
								<van-field name="uploader" label-align="top" label-width="8em" label="宗教礼仪空间:">
									<template #input>
										<van-uploader readonly v-model="fileList2" :max-count="5" accept=""
											:preview-full-image="false" :before-delete="deleteRead2"
											@click-upload="chooseImg2">
										</van-uploader>
									</template>
								</van-field>
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.remake" rows="1" autosize label="备注：" type="textarea"
									placeholder="请输入备注" />
							</van-cell-group>
						</div>
					</van-tab>
					<!-- 备案信息 -->
					<van-tab>
						<template #title> <van-icon name="bulb-o" />备案信息 </template>
						<div style="padding: 0 10px; height: 470px; overflow: auto">
							<van-cell-group>
								<van-field v-model="dataitem.filingNo" center clearable label="场所备案号:"
									input-align="right" placeholder="请输入场所备案号" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.approvedEstablishmentTime" center readonly required
									label-width="8em" :rules="[{ required: true }]" label="批准设立时间:" placeholder="请选择时间"
									input-align="right" right-icon="arrow-down" @click="hs_SetupTime = true" />
							</van-cell-group>

							<van-cell-group>
								<van-field v-model="dataitem.registrationAuthority" center :rules="[{ required: true }]"
									required clearable label="登记机关:" input-align="right" placeholder="请输入登记机关" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.registrationDate" center readonly required
									label-width="8em" :rules="[{ required: true }]" label="登记日期:" placeholder="请选择时间"
									input-align="right" right-icon="arrow-down" @click="hs_SignTime = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.teachingStaff" center clearable label-width="7em"
									label="主要教职人员:" input-align="right" placeholder="请输入主要教职人员" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="dataitem.approveOffice" center clearable label-width="7em"
									label="批准设立机关:" input-align="right" placeholder="请输入批准设立机关" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="religiousDeptManaUserName" center label="宗教管理人员"
									placeholder="请填写宗教管理人员" input-align="right" right-icon="arrow-down"
									@click="showPerson = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field v-model="securityDeptManaUserName" center label="公安管理人员"
									placeholder="请填写公安管理人员" input-align="right" right-icon="arrow-down"
									@click="showReport = true" />
							</van-cell-group>
							<van-cell-group>
								<van-field name="uploader" label-align="top" label-width="10em" label="场所建设审批手续:">
									<template #input>
										<van-uploader readonly v-model="fileList3" :max-count="5" accept=""
											:preview-full-image="false" :before-delete="deleteRead3"
											@click-upload="chooseImg3">
											<van-button>上传文件(可添加图片、音、视频和文本等)</van-button>
										</van-uploader>
									</template>
								</van-field>
							</van-cell-group>
						</div>
					</van-tab>
					<!-- 互联网专区 -->
					<van-tab>
						<template #title>
							<van-icon name="desktop-o" />互联网专区
						</template>
						<div style="padding: 0 10px; height: 470px; overflow: auto">
							<div style="overflow: hidden">
								<p style="font-weight: 700; font-size: 14px">
									直播间<van-button type="primary" size="mini"
										style="margin-left: 10px; vertical-align: middle"
										@click="addForm('直播间')">新增</van-button>
								</p>
								<div v-for="item in internetForm.zbjForm" :key="item.key">
									<van-cell-group>
										<van-field v-model="item.typeName" center clearable readonly label-width="7em"
											label="所属平台:" input-align="right" right-icon="arrow-down"
											placeholder="请选择所属平台" @click="showNew(item.key)" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.account" center clearable label-width="7em"
											label="直播账号:" input-align="right" placeholder="请输入直播账号" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.manager" center clearable label-width="7em"
											label="管理员:" input-align="right" placeholder="请填写管理员" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.contact" center clearable label-width="7em"
											label="联系方式:" input-align="right" placeholder="请输入联系方式" />
									</van-cell-group>
									<van-button @click="removeForm(item, '直播间')" type="danger" size="mini"
										color="#e6a23c">删除</van-button>
								</div>
							</div>
							<div style="overflow: hidden">
								<p style="font-weight: 700; font-size: 14px">
									公众号<van-button type="primary" size="mini" @click="addForm('公众号')"
										style="margin-left: 10px; vertical-align: middle">新增</van-button>
								</p>
								<div v-for="item in internetForm.gzhForm" :key="item.key">
									<van-cell-group>
										<van-field v-model="item.account" center clearable label-width="7em"
											label="公众号账号:" input-align="right" placeholder="请输入公众号账号" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.manager" center clearable label-width="7em"
											label="管理员:" input-align="right" placeholder="请填写管理员" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.contact" center clearable label-width="7em"
											label="联系方式:" input-align="right" placeholder="请输入联系方式" />
									</van-cell-group>
									<van-button @click="removeForm(item, '公众号')" type="danger" size="mini"
										color="#e6a23c">删除</van-button>
								</div>
							</div>
							<div style="overflow: hidden">
								<p style="font-weight: 700; font-size: 14px">
									微信群<van-button type="primary" size="mini"
										style="margin-left: 10px; vertical-align: middle"
										@click="addForm('微信群')">新增</van-button>
								</p>
								<div v-for="item in internetForm.wxqForm" :key="item.key">
									<van-cell-group>
										<van-field v-model="item.account" center clearable label-width="7em"
											label="微信群账号:" input-align="right" placeholder="请输入微信群账号" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.manager" center clearable label-width="7em"
											label="管理员:" input-align="right" placeholder="请填写管理员" />
									</van-cell-group>
									<van-cell-group>
										<van-field v-model="item.contact" center clearable label-width="7em"
											label="联系方式:" input-align="right" placeholder="请输入联系方式" />
									</van-cell-group>
									<van-button @click="removeForm(item, '微信群')" type="danger" size="mini"
										color="#e6a23c">删除</van-button>
								</div>
							</div>
							<div style="overflow: hidden">
								<p style="font-weight: 700; font-size: 14px">网站</p>
								<div>
									<van-cell-group>
										<van-field v-model="dataitem.website" center clearable label-width="7em"
											label="网站地址:" input-align="right" placeholder="请输入网站地址" />
									</van-cell-group>
								</div>
							</div>
						</div>
					</van-tab>
				</van-tabs>
				<div class="btn">
					<van-button type="primary" native-type="submit">确认修改</van-button>
				</div>
			</van-form>
		</div>
		<!-- 宗教类型 -->
		<van-popup v-model:show="hs_religious" round position="bottom">
			<van-picker title="宗教类型" :columns="religious" @cancel="hs_religious = false" @confirm="getreligious" />
		</van-popup>
		<!-- 场所地点 -->
		<van-popup v-model:show="showPlace1" round position="bottom">
			<van-picker title="场所地点" :columns="options" :columns-field-names="customFieldName"
				@cancel="showPlace1 = false" @confirm="getPlace1" />
		</van-popup>
		<!-- 场所类型 -->
		<van-popup v-model:show="showPicker1" round position="bottom">
			<van-picker title="场所类型" :columns="placeType" @cancel="showPicker1 = false" @confirm="getplaceType" />
		</van-popup>
		<!-- 场所性质 -->
		<van-popup v-model:show="showPicker3" round position="bottom">
			<van-picker title="场所性质选择" :columns="property" @cancel="showPicker3 = false" @confirm="getproperty" />
		</van-popup>
		<!-- 场所建设阶段 -->
		<van-popup v-model:show="showPicker2" round position="bottom">
			<van-picker title="场所建设阶段" :columns="construction" @cancel="showPicker2 = false"
				@confirm="getConstruction" />
		</van-popup>
		<!-- 场所建筑等级 -->
		<van-popup v-model:show="showlv" round position="bottom">
			<van-picker title="场所建筑等级" :columns="$dictUtils.getDictList('site_building_grade')" :columns-field-names="{
          text: 'label',
          value: 'value',
        }" @cancel="showlv = false" @confirm="getlv" />
		</van-popup>
		<!-- 宗教管理人员 -->
		<van-dialog v-model:show="showPerson" title="宗教部门管理人员" show-cancel-button @confirm="reselected" width="100%">
			<manage-list @selected="selected" :type="0"></manage-list>
		</van-dialog>
		<!-- 公安部门人员 -->
		<van-dialog v-model:show="showReport" title="公安部门管理人员" show-cancel-button @confirm="reselected2" width="100%">
			<manage-list-2 @selected2="selected2"></manage-list-2>
		</van-dialog>
		<!-- 直播类型 -->
		<van-popup v-model:show="showzbj" round position="bottom">
			<van-picker title="直播类型" :columns="zbj" @cancel="showzbj = false" @confirm="getzbj" />
		</van-popup>
		<!-- 批准设立时间 -->
		<van-popup v-model:show="hs_SetupTime" round position="bottom">
			<van-picker-group title="批准设立时间" :tabs="['选择日期', '选择时间']" next-step-text="下一步" @confirm="getSetupTime"
				@cancel="hs_SetupTime = false">
				<van-date-picker v-model="currentDate" />
				<van-time-picker v-model="currentTime" :columns-type="columnsType" />
			</van-picker-group>
		</van-popup>
		<!-- 登记日期 -->
		<van-popup v-model:show="hs_SignTime" round position="bottom">
			<van-picker-group title="登记日期" :tabs="['选择日期', '选择时间']" next-step-text="下一步" @confirm="getSignTime"
				@cancel="hs_SignTime = false">
				<van-date-picker v-model="currentDate" />
				<van-time-picker v-model="currentTime" :columns-type="columnsType" />
			</van-picker-group>
		</van-popup>
	</div>
</template>

<script>
	import ManageList from "../ManageList.vue";
	import ManageList2 from "../ManageList2.vue";
	import {
		useRouter
	} from "vue-router";
	import {
		onMounted,
		ref,
		getCurrentInstance
	} from "vue";
	import placeRegister from "@/api/placeRegister/placeRegister";
	import tools from "@/api/sys/tools";
	import $base from "@/utils/config";
	import {
		formatDate,
		formatTime
	} from "@/utils/datatime";
	export default {
		components: {
			ManageList,
			ManageList2
		},
		setup() {
			const active = ref(0);
			// 导航栏颜色
			const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
			//场所数据
			let dataitem = ref({});
			//数据接收
			const router = useRouter();
			const current = getCurrentInstance();
			onMounted(() => {
				var id = JSON.parse(router.currentRoute.value.query.id);
				new placeRegister().queryById(id).then((res) => {
					dataitem.value = res;
					const rN = Object.assign(dataitem.value, {
						religiousName: getreligiousT(dataitem.value.religiousType),
						placeSelectLastId: dataitem.value.placeSelectId.split("/")[2],
					});
					dataitem.value = rN;
					religiousType.value = getreligiousT(dataitem.value.religiousType);
					propertyName.value = getpropertyType(dataitem.value.nature);
					constructionName.value = getConstructionType(
						dataitem.value.constructionStage
					);
					placeTypeName.value = getplaceTypeN(dataitem.value.siteType);
					placeAddress.value = dataitem.value.placeSelectName;
					lv.value =
						current.appContext.config.globalProperties.$dictUtils.getDictLabel(
							"site_building_grade",
							dataitem.value.siteBuildingGrade
						);
					dataitem.value.scenesImageMain.split("|").forEach((item) => {
						if (item.trim().length > 0) {
							fileImg.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
							fileList.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),

								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
						}
					});
					dataitem.value.etiquetteSpace.split("|").forEach((item) => {
						if (item.trim().length > 0) {
							fileImg2.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
							fileList2.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),

								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
						}
					});

					dataitem.value.approvalProcedures.split("|").forEach((item) => {
						if (item.trim().length > 0) {
							fileImg3.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
							fileList3.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
						}
					});
					dataitem.value.scenesImage.split("|").forEach((item) => {
						if (item.trim().length > 0) {
							fileImg4.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
							fileList4.value.push({
								name: decodeURIComponent(
									item.substring(item.lastIndexOf("/") + 1)
								),
								url: $base + "/" + item.replace("程序附件//", "程序附件/"),
								id: item.replace("程序附件//", "程序附件/"),
							});
						}
					});
					let id = dataitem.value.id;
					new placeRegister().queryInternetBySiteId(id).then(({
						data
					}) => {
						dynamicFormDataClear();
						dynamicFormDataProceed(data);
					});
				});
			});
			//详细地址定位
			const getLocation = () => {
				xm.getLocation().then((data) => {
					placeActivity.placeData.place = data.POIName;
				});
			};

			// 地区选择
			let placeAddress = ref("");
			const customFieldName = {
				text: "name",
				value: "id",
			};
			// 选项列表，children 代表子选项，支持多级嵌套
			const options = ref([]);
			// 获取地区数据树
			new placeRegister().treeDate().then((res) => {
				options.value.push(...res);
			});
			let showPlace1 = ref(false);
			const getPlace1 = ({
				selectedOptions
			}) => {
				showPlace1.value = false;
				placeAddress.value =
					selectedOptions[0].name +
					"/" +
					selectedOptions[1].name +
					"/" +
					selectedOptions[2].name;
				const json = Object.assign(dataitem.value, {
					placeSelectName: selectedOptions[0].name +
						"/" +
						selectedOptions[1].name +
						"/" +
						selectedOptions[2].name,
					placeSelectId: selectedOptions[0].id +
						"/" +
						selectedOptions[1].id +
						"/" +
						selectedOptions[2].id,
					placeSelectType3: selectedOptions[0].id,
					placeSelectType4: selectedOptions[1].id,
					placeSelectType5: selectedOptions[2].id,
					placeSelectLastId: selectedOptions[2].id,
				});
				dataitem.value = json;
			};
			//宗教类型
			const religiousType = ref("");
			const getreligiousT = (type) => {
				const typeObject = {
					1: "伊斯兰教",
					2: "基督教",
					3: "天主教",
					4: "佛教",
					5: "道教",
				};
				return typeObject[type];
			};
			const religious = [{
					text: "伊斯兰教",
					value: "1"
				},
				{
					text: "基督教",
					value: "2"
				},
				{
					text: "天主教",
					value: "3"
				},
				{
					text: "佛教",
					value: "4"
				},
				{
					text: "道教",
					value: "5"
				},
			];
			let hs_religious = ref(false);
			const getreligious = ({
				selectedOptions
			}) => {
				hs_religious.value = false;
				const json = Object.assign(dataitem.value, {
					religiousType: selectedOptions[0].value,
					religiousName: selectedOptions[0].text,
				});
				dataitem.value = json;
				religiousType.value = selectedOptions[0].text;
			};
			// 场所类型
			const placeTypeName = ref("");
			const placeType = [{
					text: "线上",
					value: "0"
				},
				{
					text: "线下",
					value: "1"
				},
			];
			const getplaceTypeN = (type) => {
				const typeObject = {
					0: "线上",
					1: "线下",
				};
				return typeObject[type];
			};
			let showPicker1 = ref(false);
			const getplaceType = ({
				selectedOptions
			}) => {
				showPicker1.value = false;
				const json = Object.assign(dataitem.value, {
					siteType: selectedOptions[0].value,
				});
				dataitem.value = json;
				placeTypeName.value = selectedOptions[0].text;
			};
			// 场所性质
			const propertyName = ref("");
			const property = [{
					text: "固定场所",
					value: "0"
				},
				{
					text: "寺观教堂",
					value: "1"
				},
			];
			const getpropertyType = (type) => {
				const typeObject = {
					0: "固定场所",
					1: "寺观教堂",
				};
				return typeObject[type];
			};
			let showPicker3 = ref(false);
			const getproperty = ({
				selectedOptions
			}) => {
				showPicker3.value = false;
				const json = Object.assign(dataitem.value, {
					nature: selectedOptions[0].value,
				});
				dataitem.value = json;
				propertyName.value = selectedOptions[0].text;
			};
			// 场所建设
			const constructionName = ref("");
			const construction = [{
					text: "筹备",
					value: "0"
				},
				{
					text: "建设完成",
					value: "1"
				},
			];
			const getConstructionType = (type) => {
				const typeObject = {
					0: "筹备",
					1: "建设完成",
				};
				return typeObject[type];
			};
			let showPicker2 = ref(false);
			const getConstruction = ({
				selectedOptions
			}) => {
				showPicker2.value = false;
				const json = Object.assign(dataitem.value, {
					constructionStage: selectedOptions[0].value,
				});
				dataitem.value = json;
				constructionName.value = selectedOptions[0].text;
			};
			// 场所建筑等级
			const lv = ref("");
			let showlv = ref(false);
			const getlv = ({
				selectedOptions
			}) => {
				showlv.value = false;
				const json = Object.assign(dataitem.value, {
					siteBuildingGrade: selectedOptions[0].value,
				});
				dataitem.value = json;
				lv.value = selectedOptions[0].label;
			};
			//图片上传
			let fileList = ref([]);
			let fileImg = ref([]);
			const chooseImg = () => {

				xm.chooseFile({
					count: 1,
					name: "file",
					url: $base +
						`/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
					headers: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					let data = res[0].data;
					data.name = decodeURIComponent(
						data.id.substring(data.url.lastIndexOf("/") + 1)
					);
					data.url = $base + data.url;
					fileImg.value.push(data);
					fileList.value.push(data);
					xm.showToast({
						message: "上传成功",
					});
				});
			};
			// 删除文件
			const deleteRead = (file) => {
				//删除文件操作
				for (let index = 0; index < fileList.value.length; index++) {
					if (file.id == fileList.value[index].id) {
						fileList.value.splice(index, 1);
						if (fileImg.value[index]) {
							let delurl = fileImg.value[index].url;
							new tools().uploadFiledelete("", delurl).then(({
								data
							}) => {});
							fileImg.value.splice(index, 1);
						}
					}
				}
			};
			let fileList2 = ref([]);
			let fileImg2 = ref([]);
			const chooseImg2 = () => {

				xm.chooseFile({
					count: 1,
					name: "file",
					url: $base +
						`/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
					headers: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					let data = res[0].data;
					data.name = decodeURIComponent(
						data.id.substring(data.url.lastIndexOf("/") + 1)
					);
					data.url = $base + data.url;
					fileImg2.value.push(data);
					fileList2.value.push(data);
					xm.showToast({
						message: "上传成功",
					});
				});
			};
			// 删除文件
			const deleteRead2 = (file) => {
				//删除文件操作
				for (let index = 0; index < fileList2.value.length; index++) {
					if (file.id == fileList2.value[index].id) {
						fileList2.value.splice(index, 1);
						if (fileImg2.value[index]) {
							let delurl = fileImg2.value[index].url;
							new tools().uploadFiledelete("", delurl).then(({
								data
							}) => {});
							fileImg2.value.splice(index, 1);
						}
					}
				}
			};
			let fileList3 = ref([]);
			let fileImg3 = ref([]);
			const chooseImg3 = () => {

				xm.chooseFile({
					count: 1,
					name: "file",
					url: $base +
						`/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
					headers: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					let data = res[0].data;
					data.name = decodeURIComponent(
						data.id.substring(data.url.lastIndexOf("/") + 1)
					);
					data.url = $base + data.url;
					fileImg3.value.push(data);
					fileList3.value.push(data);
					xm.showToast({
						message: "上传成功",
					});
				});
			};
			// 删除文件
			const deleteRead3 = (file) => {
				//删除文件操作
				for (let index = 0; index < fileList3.value.length; index++) {
					if (file.id == fileList3.value[index].id) {
						fileList3.value.splice(index, 1);
						if (fileImg3.value[index]) {
							let delurl = fileImg3.value[index].url;
							new tools().uploadFiledelete("", delurl).then(({
								data
							}) => {});
							fileImg3.value.splice(index, 1);
						}
					}
				}
			};
			let fileList4 = ref([]);
			let fileImg4 = ref([]);
			const chooseImg4 = () => {

				xm.chooseFile({
					count: 1,
					name: "file",
					url: $base +
						`/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
					headers: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					let data = res[0].data;
					data.name = decodeURIComponent(
						data.id.substring(data.url.lastIndexOf("/") + 1)
					);
					data.url = $base + data.url;
					fileImg4.value.push(data);
					fileList4.value.push(data);
					xm.showToast({
						message: "上传成功",
					});
				});
			};
			// 删除文件
			const deleteRead4 = (file) => {
				//删除文件操作
				for (let index = 0; index < fileList4.value.length; index++) {
					if (file.id == fileList4.value[index].id) {
						fileList4.value.splice(index, 1);
						if (fileImg4.value[index]) {
							let delurl = fileImg4.value[index].url;
							new tools().uploadFiledelete("", delurl).then(({
								data
							}) => {});
							fileImg4.value.splice(index, 1);
						}
					}
				}
			};
			//宗教公安人员选择
			const religiousDeptManaUserName = ref("");
			const securityDeptManaUserName = ref("");
			let showPerson = ref(false);
			let showReport = ref(false);
			let list = {
				value: [],
				type: "",
			};
			let list2 = {
				value: [],
				type: "",
			};
			const selected = (val) => {
				list.value = val;
			};
			const selected2 = (val) => {
				list2.value = val;
			};
			const reselected = () => {
				const json = Object.assign(dataitem.value, {
					religiousDeptManaUser: list.value.id,
				});
				dataitem.value = json;
				religiousDeptManaUserName.value = list.value.name;
			};
			const reselected2 = () => {
				const json = Object.assign(dataitem.value, {
					securityDeptManaUser: list2.value.id,
				});
				dataitem.value = json;
				securityDeptManaUserName.value = list2.value.name;
			};
			//批准设立时间
			let currentDate = ref(formatDate(new Date()));
			let currentTime = ref(formatTime(new Date()));
			const columnsType = ["hour", "minute", "second"];
			let hs_SetupTime = ref(false);
			const getSetupTime = ({
				selectedOptions
			}) => {
				hs_SetupTime.value = false;
				dataitem.value.approvedEstablishmentTime = `${currentDate.value.join(
        "-"
      )} ${currentTime.value.join(":")}`;
			};
			//登记时间
			let hs_SignTime = ref(false);
			const getSignTime = ({
				selectedOptions
			}) => {
				hs_SignTime.value = false;
				dataitem.value.registrationDate = `${currentDate.value.join(
        "-"
      )} ${currentTime.value.join(":")}`;
			};
			// 互联网专区
			const internetForm = ref({
				zbjForm: [],
				gzhForm: [],
				wxqForm: [],
				dynamicForm: [],
			});
			const addForm = (type) => {
				let data_add = [];
				if (type == "直播间") {
					data_add = internetForm.value.zbjForm;
				} else if (type == "公众号") {
					data_add = internetForm.value.gzhForm;
				} else {
					data_add = internetForm.value.wxqForm;
				}
				data_add.push({
					key: randomString(12),
					siteId: dataitem.value.id,
					type: type,
					typeChild: "",
					account: "",
					manager: "",
					contact: "",
				});
			};
			const randomString = (len) => {
				len = len || 32;
				var $chars =
					"ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				var maxPos = $chars.length;
				var pwd = "";
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			};
			const removeForm = (item, type) => {
				let data_add = [];
				if (type == "直播间") {
					data_add = internetForm.value.zbjForm;
				} else if (type == "公众号") {
					data_add = internetForm.value.gzhForm;
				} else {
					data_add = internetForm.value.wxqForm;
				}

				let index = data_add.indexOf(item);

				if (index !== -1) {
					data_add.splice(index, 1);
				}
			};
			const hlwToSubmit = () => {
				internetForm.value.dynamicForm = [];
				internetForm.value.zbjForm.forEach((ele) => {
					if (ele.account != "" || ele.manager != "" || ele.contact != "") {
						internetForm.value.dynamicForm.push(ele);
					}
				});
				internetForm.value.gzhForm.forEach((ele) => {
					if (ele.account != "" || ele.manager != "" || ele.contact != "") {
						internetForm.value.dynamicForm.push(ele);
					}
				});
				internetForm.value.wxqForm.forEach((ele) => {
					if (ele.account != "" || ele.manager != "" || ele.contact != "") {
						internetForm.value.dynamicForm.push(ele);
					}
				});
			};
			const dynamicFormDataProceed = (initial_form) => {
				if (!initial_form || initial_form.length == 0) {
					initial_form = [{
							key: randomString(12),
							siteId: dataitem.value.id,
							type: "直播间",
							typeChild: "",
							account: "",
							manager: "",
							contact: "",
						},
						{
							key: randomString(12),
							siteId: dataitem.value.id,
							type: "公众号",
							typeChild: "",
							account: "",
							manager: "",
							contact: "",
						},
						{
							key: randomString(12),
							siteId: dataitem.value.id,
							type: "微信群",
							typeChild: "",
							account: "",
							manager: "",
							contact: "",
						},
					];
				}

				initial_form.forEach((ele) => {
					if (ele.id) {
						ele.key = ele.id;
					}
					if (ele.type == "直播间") {
						ele.typeName = getzbjType2(ele.typeChild);
						internetForm.value.zbjForm.push(ele);
					} else if (ele.type == "公众号") {
						internetForm.value.gzhForm.push(ele);
					} else {
						internetForm.value.wxqForm.push(ele);
					}
				});
			};
			const dynamicFormDataClear = () => {
				internetForm.value.zbjForm = [];
				internetForm.value.gzhForm = [];
				internetForm.value.wxqForm = [];
				internetForm.value.dynamicForm = [];
			};
			// 直播间类型
			// const zbjTypeName = ref("");
			const zbj = [{
					text: "斗鱼",
					value: "0"
				},
				{
					text: "小红书",
					value: "1"
				},
				{
					text: "抖音",
					value: "2"
				},
				{
					text: "哔哩哔哩",
					value: "3"
				},
				{
					text: "虎牙",
					value: "4"
				},
				{
					text: "快手",
					value: "5"
				},
				{
					text: "YY直播",
					value: "6"
				},
				{
					text: "淘宝直播",
					value: "7"
				},
				{
					text: "京东直播",
					value: "8"
				},
			];
			const getzbjType2 = (type) => {
				const typeObject = {
					0: "斗鱼",
					1: "小红书",
					2: "抖音",
					3: "哔哩哔哩",
					4: "虎牙",
					5: "快手",
					6: "YY直播",
					7: "淘宝直播",
					8: "京东直播",
				};
				return typeObject[type];
			};
			const nowIndex = ref("");
			const showNew = (key) => {
				showzbj.value = true;
				nowIndex.value = key;
			};
			let showzbj = ref(false);
			const getzbj = ({
				selectedOptions
			}) => {
				showzbj.value = false;
				internetForm.value.zbjForm.forEach((item) => {
					if (item.key == nowIndex.value) {
						item.typeName = selectedOptions[0].text;
						item.typeChild = selectedOptions[0].value;
					}
				});
			};
			//校验
			const failed = () => {
				xm.showToast({
					message: "请检查表单必填项是否存在填写遗漏！",
				});
			};
			//返回
			const onClickLeft = () => {
				history.back();
			};
			// 数据提交
			const submit = () => {
				hlwToSubmit();
				let dynami = JSON.stringify(internetForm.value.dynamicForm);
				const json = Object.assign(dataitem.value, {
					dynamicFormJson: dynami
				});
				dataitem.value = json;
				//保存前附件处理
				dataitem.value.scenesImageMain = fileImg.value
					.map((option) => option.id)
					.join("|");
				dataitem.value.etiquetteSpace = fileImg2.value
					.map((option) => option.id)
					.join("|");
				dataitem.value.approvalProcedures = fileImg3.value
					.map((option) => option.id)
					.join("|");
				dataitem.value.scenesImage = fileImg4.value
					.map((option) => option.id)
					.join("|");
				new placeRegister().sava(dataitem.value).then((res) => {
					if (res.status == 200) {
						xm.showToast({
							message: "场所修改成功",
						});
						router.push({
							path: "/placeRegisterList",
						});
					} else {
						xm.showToast({
							message: "场所修改失败",
						});
					}
				});
			};
			return {
				onClickLeft,
				dataitem,
				selectColor,
				active,
				//图片上传
				fileList,
				chooseImg,
				deleteRead,
				fileList2,
				chooseImg2,
				deleteRead2,
				fileList3,
				chooseImg3,
				deleteRead3,
				fileList4,
				chooseImg4,
				deleteRead4,
				//宗教类型
				religiousType,
				hs_religious,
				religious,
				getreligious,
				//场所类型
				showPicker1,
				placeType,
				getplaceType,
				placeTypeName,
				//场所性质
				showPicker3,
				property,
				getproperty,
				propertyName,
				//场所建设阶段
				showPicker2,
				construction,
				getConstruction,
				constructionName,
				showlv,
				lv,
				getlv,
				// 详细地址定位
				getLocation,
				// 地区选择
				placeAddress,
				customFieldName,
				showPlace1,
				getPlace1,
				options,
				//宗教公安人员选择
				showPerson,
				showReport,
				selected,
				selected2,
				reselected,
				reselected2,
				religiousDeptManaUserName,
				securityDeptManaUserName,
				// 批准设立时间
				currentDate,
				currentTime,
				columnsType,
				hs_SetupTime,
				getSetupTime,
				// 登记时间
				hs_SignTime,
				getSignTime,
				// 互联网专区
				internetForm,
				addForm,
				removeForm,
				zbj,
				showzbj,
				getzbj,
				showNew,
				//校验
				failed,
				//数据提交
				submit,
			};
		},
	};
</script>

<style lang="less">
	.main {
		.imgbox {
			width: 100%;
			overflow: hidden;

			.img-left {
				float: left;
				width: 50%;
			}

			.img-right {
				float: left;
				width: 50%;
			}
		}
	}

	.btn {
		margin: 10px auto;

		.van-button {
			width: 100%;
			height: 50px;
		}
	}
</style>