pbl_admin_table/src/views/kanBan/components/AschoolFeature.vue

<template>
	<div
		v-if="Object.keys(Alldata).length > 0"
		v-loading="AllLoading"
		class="Asc"
		style="display: flex; flex-direction: column; gap: 20px; height: 100%"
	>
		<div class="Ktop">
			<div class="topTit">
				<div>
					<div>校区简介</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>

				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(0)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>
			<div style="height: auto; padding: 30px 0">

				<div
					class="CarO"
					style="border-radius: 10px; overflow: hidden"
					v-if="CampusF.GroupImgList && CampusF.GroupImgList.length"
				>
					<el-carousel
						indicator-position="outside"
						height="420px"
					>
						<el-carousel-item
							v-for="(i, index) in CampusF.GroupImgList"
							:key="index"
						>
							<el-image
								style="
									width: 100%;
									border-radius: 10px;
									height: 100%;
								"
								class="imgCar"
								:src="i"
								:preview-src-list="CampusF.GroupImgList"
							>
							</el-image>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>

			<div class="TopbriKl">
				{{
					Alldata.admin.CampusF ? Alldata.admin.CampusF.GroupBri : "暂无简介"
				}}
			</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>办学特色</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(1)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>

			<div class="featureAll">
				<template v-if="featureList.length">
					<div
						class="featureCon"
						v-for="(i, index) in featureList"
						:key="index"
					>
						<img
							style="width: 34px; height: 34px; object-fit: cover"
							:src="i.icon"
							alt=""
						/>
						<el-tooltip
							class="item"
							effect="dark"
							:content="i.name"
							placement="bottom"
						>
							<div class="featureConTit">{{ i.name }}</div>
						</el-tooltip>
						<el-tooltip
							class="item"
							effect="dark"
							:content="i.bri"
							placement="bottom"
						>
							<div class="Topbri2">{{ i.bri }}</div>
						</el-tooltip>
					</div>
				</template>
				<div v-else>暂无数据</div>
			</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>师资力量</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
				<div>
					<img
						v-if="userinfo.role == 1 && userinfo.type == 1"
						class="topTitEdit"
						@click="editregion(2)"
						src="../../../assets/img/bianji.svg"
						alt=""
					/>
				</div>
			</div>
			<div class="TopbriKl">
				{{
					Alldata.admin.CampusF
						? Alldata.admin.CampusF.teacherN.teaBri
						: "暂无简介"
				}}
			</div>

			<div class="featureAll" v-if="teaData.length">
				<div class="featureCon2" v-for="(i, index) in teaData" :key="index">
					<el-tooltip
						class="item"
						effect="dark"
						:content="i.bri"
						placement="bottom"
					>
						<div class="featureConTit2">{{ i.bri }}</div>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="dark"
						:content="i.bri"
						placement="bottom"
					>
						<div class="Topbri">{{ i.name }}</div>
					</el-tooltip>
				</div>
			</div>
			<div v-else>暂无数据</div>
		</div>

		<div class="feature">
			<div class="topTit">
				<div>
					<div>特色应用</div>
					<div
						style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"
					></div>
				</div>
			</div>

			<div
				style="display: flex; flex-direction: column; gap: 10px"
				v-for="(item, index) in CampusF.appList"
				:key="index + 'b'"
			>
				<div style="display: flex; justify-content: space-between">
					<div></div>
					<div
						style="
							display: flex;
							justify-content: space-between;
							gap: 10px;
							align-items: center;
						"
					>
						<img
							@click="(isBtn = 3), editFea(index)"
							class="topTitEdit"
							:src="
								editIndex == index
									? require('../../../assets/kanban/bz.svg')
									: require('../../../assets/kanban/feaB.svg')
							"
							alt=""
						/>
						<img
							@click="(isBtn = 3), delFe(index)"
							class="topTitEdit"
							src="../../../assets/kanban/delK.svg"
							alt=""
						/>
					</div>
				</div>

				<div>
					<div style="display: flex; justify-content: space-between; gap: 30px">
						<!-- 左边区域 -->
						<div
							class="diaFea"
							@click="openNewWindow(item)"
							style="
								height: 122px;
								width: 30%;
								min-width: 200px;
								max-width: 300px;
								cursor: pointer;
							"
						>
							<img
								v-if="editIndex == index"
								style="
									border: 1px #0663fe solid;
									padding: 3px;
									box-sizing: border-box;
								"
								class="diaFeaImgT"
								@click="uploadisBtn(3, index)"
								:src="item.setIcon ? item.setIcon : item.json.icon"
								alt=""
							/>
							<img
								v-else
								class="diaFeaImgT"
								:src="item.setIcon ? item.setIcon : item.json.icon"
								alt=""
							/>

							<div class="AppStoreConTit">{{ item.name }}</div>
						</div>

						<!-- 右边区域 -->
						<div style="flex: 1">
							<div class="AppStoreConBri" v-if="item.detailWri">
								<el-input
									v-if="editIndex == index"
									:style="{
										border: editIndex == index ? '1px dashed #9747FF !important' : '',
									}"
									resize="none"
									style="border-radius: 10px; height: 100%"
									type="textarea"
									placeholder="请输入内容"
									v-model="item.detailWri"
								>
								</el-input>
								<div v-else style="font-weight: 600">{{ item.detailWri }}</div>
							</div>

							<div class="AppStoreConBri" v-else>
								<el-input
									v-if="editIndex == index"
									resize="none"
									:style="{
										border: editIndex == index ? '1px dashed #9747FF !important' : '',
									}"
									style="border-radius: 10px"
									type="textarea"
									placeholder="请输入内容"
									v-model="item.detail"
								>
								</el-input>

								<div v-else style="font-weight: 600">{{ item.detail }}</div>
							</div>
						</div>
					</div>

					<div class="diaBtn" style="padding: 0" v-if="editIndex == index">
						<div style="color: #000" @click="feaClo(index)">取消</div>
						<div
							style="background: #fff"
							:style="{
								border:
									editBtnType == 1 ? '1px #9747FF solid' : '1px #0663fe solid',
								color: editBtnType == 1 ? '#9747FF' : '#0663fe',
							}"
							@click="setJsonL(index)"
						>
							保存
						</div>
					</div>
				</div>
			</div>
			<div class="FedialogJIa" style="display: flex" @click="lookMore()">
				<div style="width: 100%; border: 1px #000 dashed; cursor: pointer">
					<img src="../../../assets/kanban/jia.svg" alt="" />
				</div>
			</div>
		</div>

		<template v-if="CampusF.customTemplate && CampusF.customTemplate.length">
			<div class="feature" v-for="(i,index) in CampusF.customTemplate" :key="index">
				<!-- 标题区域 -->
				<div class="topTit">
					<div>
						<div>{{ i.tit }}</div>
						<div
							style="
								height: 4px;
								background-color: #0663fe;
								width: 2rem;
								margin-top: 6px;
							"
						></div>
					</div>
					
					<div v-if="userinfo.role == 1 && userinfo.type == 1" style="display: flex;gap: 10px;">
						<img
							class="topTitEdit"
							@click="editregion(4,index)"
							src="../../../assets/kanban/feaB.svg"
							alt=""
						/>
						<img
							@click="delTemFe(index)"
							class="topTitEdit"
							src="../../../assets/kanban/delK.svg"
							alt=""
						/>
					</div>
				</div>
				<!-- 简介区域 -->
				<div class="TopbriKl">
					{{
						i.bri
							? i.bri
							: "暂无简介"
					}}
				</div>
				<!-- 内容区域  -->
				<div class="featureAll" v-if="i.list.length">
					<div class="featureCon2" v-for="(k, index) in i.list" :key="index+'a'">
						<el-tooltip
							class="item"
							effect="dark"
							:content="k.bri"
							placement="bottom"
						>
							<div class="featureConTit2">{{ k.bri }}</div>
						</el-tooltip>
						<el-tooltip
							class="item"
							effect="dark"
							:content="k.bri"
							placement="bottom"
						>
							<div class="Topbri">{{ k.name }}</div>
						</el-tooltip>
					</div>
				</div>
			</div>
		</template>
		
		<template v-if="userinfo.role == 1 && userinfo.type == 1">
			<div class="feature">
				<div class="topTit">
					<div>
						<div>添加自定义模块</div>
						<div
							style="
								height: 4px;
								background-color: #0663fe;
								width: 2rem;
								margin-top: 6px;
							"
						></div>
					</div>
				</div>
				<div class="FedialogJIa" style="display: flex" @click="addTemVisible = true">
					<div style="width: 100%; border: 1px #000 dashed; cursor: pointer">
						<img src="../../../assets/kanban/jia.svg" alt="" />
					</div>
				</div>
			</div>
		</template>
		

		<!-- 修改校区特色弹框 -->
		<el-dialog
			:title="editTitle"
			:visible.sync="editVisible"
			close-on-click-modal
			class="Fedialog"
			:before-close="handleClose"
		>
			<div v-loading="diaLoad" style="display: flex; flex-direction: column">
				<div class="diaCon" id="bottomElement">
					<!-- 集团简介 -->
					<div class="diaTop" v-if="isBtn === 0">
						<el-input
							resize="none"
							style="
								border: 1px #0663fe dashed !important;
								border-radius: 10px;
								outline: none;
							"
							type="textarea"
							:rows="4"
							placeholder="请输入内容"
							v-model="CampusF.GroupBri"
						>
						</el-input>

						<div class="FedialogJIa">
							<template
								v-if="CampusF.GroupImgList && CampusF.GroupImgList.length"
							>
								<div
									class="imgBoc"
									v-for="(i, index) in CampusF.GroupImgList"
									:key="index"
								>
									<i @click="delImg(index)" class="el-icon-circle-close"></i>
									<img
										style="width: 100%; object-fit: contain"
										:src="i"
										alt=""
									/>
								</div>
							</template>
							<div @click="uploadisBtn(isBtn)">
								<img src="../../../assets/kanban/jia.svg" alt="" />
							</div>
						</div>
						<div
							style="
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 12px;
							"
						>
							请尽量上传10M以内的横版照片
						</div>
					</div>

					<!-- 办学特色 isBtn === 1-->
					<div
						style="display: flex; flex-direction: column; gap: 10px"
						v-if="isBtn === 1"
					>
						<div
							class="diaFea"
							:style="{
								border:
									editIndex == index
										? editBtnType == 1
											? '2px dashed #9747FF'
											: '2px dashed #3681FC'
										: '',
							}"
							v-for="(i, index) in CampusF.feature"
							:key="index + 'b'"
						>
							<!-- 办学特色顶部 -->
							<div
								style="
									display: flex;
									justify-content: space-between;
									gap: 16px;
									height: 28px;
								"
							>
								<el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px"
									placeholder="请输入内容"
									v-model="i.name"
								>
								</el-input>
								<div v-else class="itemTit">{{ i.name }}</div>

								<!-- 编辑与删除 -->
								<div
									style="
										flex-shrink: 0;
										display: flex;
										justify-content: space-between;
										gap: 16px;
										align-items: center;
									"
								>
									<img
										@click="editFea(index)"
										class="topTitEdit"
										v-if="!(editBtnType == 2 && editIndex == index)"
										:src="
											editIndex == index
												? editBtnType == 1
													? require('../../../assets/kanban/bz.svg')
													: require('../../../assets/kanban/lj.svg')
												: require('../../../assets/kanban/feaB.svg')
										"
										alt=""
									/>
									<img
										@click="delFe(index)"
										class="topTitEdit"
										src="../../../assets/kanban/delK.svg"
										alt=""
									/>
								</div>
							</div>

							<!-- 图标 -->
							<div
								class="djjC"
								:style="{
									border:
										editIndex == index
											? editBtnType == 1
												? '1px dashed #9747FF'
												: '1px dashed #3681FC'
											: '1px solid #9747FF',
									cursor: editIndex == index ? 'pointer' : '',
									background: editIndex == index ? '#F2F2F2' : '',
								}"
							>
								<div
									class="jiaBoc"
									@click="uploadisBtn(isBtn, index)"
									v-if="!i.icon"
								>
									<img src="../../../assets/kanban/djj.svg" alt="" />
								</div>

								<img
									style="cursor: pointer"
									v-else-if="editIndex == index"
									@click="uploadisBtn(isBtn, index)"
									class="diaFeaImg"
									:src="i.icon"
									alt=""
								/>
								<img v-else class="diaFeaImg" :src="i.icon" alt="" />
							</div>

							<div>
								<el-input
									:disabled="editIndex != index"
									resize="none"
									:style="{
										border:
											editIndex == index
												? editBtnType == 1
													? '1px dashed #9747FF'
													: '1px dashed #3681FC'
												: ' 1px solid #969BA3',
									}"
									:class="editIndex == index ? 'tArea' : ''"
									style="border-radius: 8px; overflow: hidden"
									type="textarea"
									:rows="4"
									placeholder="请输入内容"
									v-model="i.bri"
								>
								</el-input>

								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == index"
								>
									<div style="color: #000" @click="feaClo(index)">取消</div>
									<div
										style="background: #fff"
										:style="{
											border:
												editBtnType == 1
													? '1px #9747FF solid'
													: '1px #0663fe solid',
											color: editBtnType == 1 ? '#9747FF' : '#0663fe',
										}"
										@click="setJsonL(0)"
									>
										保存
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 师资力量 isBtn === 2-->
					<div
						style="display: flex; flex-direction: column; gap: 10px"
						v-if="isBtn === 2"
					>
						<!-- 顶部简介区域 -->
						<div
							class="diaFea"
							:style="{
								border: editIndex == 'bri' ? '2px dashed #9747FF' : '',
							}"
						>
							<div style="display: flex; justify-content: space-between">
								<div class="itemTit">简介</div>
								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
										align-items: center;
									"
								>
									<img
										@click="editFea('bri')"
										class="topTitEdit"
										:src="
											editIndex == 'bri'
												? editBtnType == 1
													? require('../../../assets/kanban/bz.svg')
													: require('../../../assets/kanban/lj.svg')
												: require('../../../assets/kanban/feaB.svg')
										"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != 'bri'"
									resize="none"
									style="border-radius: 10px; overflow: hidden"
									type="textarea"
									:rows="4"
									:style="{
										border:
											editIndex == 'bri'
												? editBtnType == 1
													? '1px dashed #9747FF'
													: '1px dashed #3681FC'
												: ' 1px solid #969BA3',
									}"
									:class="editIndex == 'bri' ? 'tArea' : ''"
									placeholder="请输入内容"
									v-model="CampusF.teacherN.teaBri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == 'bri'"
								>
									<div style="color: #000" @click="feaClo()">取消</div>
									<div
										style="background: #fff"
										:style="{
											border:
												editBtnType == 1
													? '1px #9747FF solid'
													: '1px #0663fe solid',
											color: editBtnType == 1 ? '#9747FF' : '#0663fe',
										}"
										@click="setJsonL(0)"
									>
										保存
									</div>
								</div>
							</div>
						</div>

						<div
							class="diaFea"
							:style="{
								border:
									editIndex == index
										? editBtnType == 1
											? '2px dashed #9747FF'
											: '2px dashed #3681FC'
										: '',
							}"
							v-for="(i, index) in CampusF.teacherN.list"
							:key="index + 'b'"
						>
							<div
								style="
									display: flex;
									justify-content: space-between;
									gap: 16px;
									height: 28px;
								"
							>
								<el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px"
									placeholder="请输入内容"
									v-model="i.name"
								>
								</el-input>
								<div v-else class="itemTit">{{ i.name }}</div>

								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
										align-items: center;
									"
								>
									<img
										@click="editFea(index)"
										class="topTitEdit"
										v-if="!(editBtnType == 2 && editIndex == index)"
										:src="
											editIndex == index
												? editBtnType == 1
													? require('../../../assets/kanban/bz.svg')
													: require('../../../assets/kanban/lj.svg')
												: require('../../../assets/kanban/feaB.svg')
										"
										alt=""
									/>
									<img
										@click="delFe(index)"
										class="topTitEdit"
										src="../../../assets/kanban/delK.svg"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != index"
									resize="none"
									:style="{
										border:
											editIndex == index
												? editBtnType == 1
													? '1px dashed #9747FF'
													: '1px dashed #3681FC'
												: ' 1px solid #969BA3',
									}"
									:class="editIndex == index ? 'tArea' : ''"
									style="border-radius: 10px; overflow: hidden"
									type="textarea"
									:rows="4"
									placeholder="请输入内容"
									v-model="i.bri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == index"
								>
									<div style="color: #000" @click="feaClo(index)">取消</div>
									<div
										style="background: #fff"
										:style="{
											border:
												editBtnType == 1
													? '1px #9747FF solid'
													: '1px #0663fe solid',
											color: editBtnType == 1 ? '#9747FF' : '#0663fe',
										}"
										@click="setJsonL(0)"
									>
										保存
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 自定义模块 isBtn === 4-->
					<div
						style="display: flex; flex-direction: column; gap: 10px"
						v-if="isBtn === 4"
					>
						<!-- 模块名称 -->
						<div style="background: #fff;border-radius: 10px;padding: 16px;box-sizing: border-box;">
							<div class="mouD">
								<el-input v-if="editIndex == 'tit'" v-model="CampusF.customTemplate[TemNum].tit" placeholder="模块名称"></el-input>
								<div class="mouDTitDiv" v-else>{{ CampusF.customTemplate[TemNum].tit }}</div>
								<img
									@click="editFea('tit')"
									class="topTitEdit"
									:src="
										editIndex == 'tit'
											? editBtnType == 1
												? require('../../../assets/kanban/bz.svg')
												: require('../../../assets/kanban/lj.svg')
											: require('../../../assets/kanban/feaB.svg')
									"
									alt=""
								/>
								
							</div>
							<div
								class="diaBtn"
								style="padding: 0"
								v-if="editIndex == 'tit'"
							>
								<div style="color: #000" @click="feaClo()">取消</div>
								<div
									style="background: #fff"
									:style="{
										border:
											editBtnType == 1
												? '1px #9747FF solid'
												: '1px #0663fe solid',
										color: editBtnType == 1 ? '#9747FF' : '#0663fe',
									}"
									@click="setJsonL(0)"
								>
									保存
								</div>
							</div>
						</div>

						<!-- 简介区域 -->
						<div
							class="diaFea"
							:style="{
								border: editIndex == 'bri' ? '2px dashed #9747FF' : '',
							}"
						>
							<div style="display: flex; justify-content: space-between">
								<div class="itemTit">简介</div>
								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
										align-items: center;
									"
								>
									<img
										@click="editFea('bri')"
										class="topTitEdit"
										:src="
											editIndex == 'bri'
												? editBtnType == 1
													? require('../../../assets/kanban/bz.svg')
													: require('../../../assets/kanban/lj.svg')
												: require('../../../assets/kanban/feaB.svg')
										"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != 'bri'"
									resize="none"
									style="border-radius: 10px; overflow: hidden"
									type="textarea"
									:rows="4"
									:style="{
										border:
											editIndex == 'bri'
												? editBtnType == 1
													? '1px dashed #9747FF'
													: '1px dashed #3681FC'
												: ' 1px solid #969BA3',
									}"
									:class="editIndex == 'bri' ? 'tArea' : ''"
									placeholder="请输入内容"
									v-model="CampusF.customTemplate[TemNum].bri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == 'bri'"
								>
									<div style="color: #000" @click="feaClo()">取消</div>
									<div
										style="background: #fff"
										:style="{
											border:
												editBtnType == 1
													? '1px #9747FF solid'
													: '1px #0663fe solid',
											color: editBtnType == 1 ? '#9747FF' : '#0663fe',
										}"
										@click="setJsonL(0)"
									>
										保存
									</div>
								</div>
							</div>
						</div>

						<!-- 循环区域 -->
						<div
							class="diaFea"
							:style="{
								border:
									editIndex == index
										? editBtnType == 1
											? '2px dashed #9747FF'
											: '2px dashed #3681FC'
										: '',
							}"
							v-for="(i, index) in CampusF.customTemplate[TemNum].list"
							:key="index + 'b'"
						>
							<div
								style="
									display: flex;
									justify-content: space-between;
									gap: 16px;
									height: 28px;
								"
							>
								<el-input
									v-if="editIndex == index"
									resize="none"
									style="border-radius: 10px"
									placeholder="请输入标题"
									v-model="i.name"
								>
								</el-input>
								<div v-else class="itemTit">{{ i.name ? i.name : '标题' }}</div>
								<div
									style="
										display: flex;
										justify-content: space-between;
										gap: 10px;
										align-items: center;
									"
								>
									<img
										@click="editFea(index)"
										class="topTitEdit"
										v-if="!(editBtnType == 2 && editIndex == index)"
										:src="
											editIndex == index
												? editBtnType == 1
													? require('../../../assets/kanban/bz.svg')
													: require('../../../assets/kanban/lj.svg')
												: require('../../../assets/kanban/feaB.svg')
										"
										alt=""
									/>
									<img
										@click="delFe(index)"
										class="topTitEdit"
										src="../../../assets/kanban/delK.svg"
										alt=""
									/>
								</div>
							</div>
							<div>
								<el-input
									:disabled="editIndex != index"
									resize="none"
									:style="{
										border:
											editIndex == index
												? editBtnType == 1
													? '1px dashed #9747FF'
													: '1px dashed #3681FC'
												: ' 1px solid #969BA3',
									}"
									:class="editIndex == index ? 'tArea' : ''"
									style="border-radius: 10px; overflow: hidden"
									type="textarea"
									:rows="4"
									placeholder="请输入内容"
									v-model="i.bri"
								>
								</el-input>
								<div
									class="diaBtn"
									style="padding: 0"
									v-if="editIndex == index"
								>
									<div style="color: #000" @click="feaClo(index)">取消</div>
									<div
										style="background: #fff"
										:style="{
											border:
												editBtnType == 1
													? '1px #9747FF solid'
													: '1px #0663fe solid',
											color: editBtnType == 1 ? '#9747FF' : '#0663fe',
										}"
										@click="setJsonL(0)"
									>
										保存
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div
					v-if="isBtn === 1 || isBtn === 2 || isBtn === 4"
					@click="additem()"
					style="
						display: flex;
						align-items: center;
						padding: 10px 20px;
						box-sizing: border-box;
						cursor: pointer;
					"
				>
					<img src="../../../assets/kanban/feaJ.svg" alt="" />
					<span style="color: #0560fd">添加</span>
				</div>
				<div class="diaBtn" style="padding: 0 20px 10px !important">
					<div style="color: #000" @click="handleClose">
						{{ isBtn === 0 ? "返 回" : "取 消" }}
					</div>
					<div
						type="primary"
						:style="{
							background: editBtnType == 0 ? '#0663fe' : '#969BA3',
							color: '#fff',
						}"
						@click="setJson(1)"
					>
						确 定
					</div>
				</div>
			</div>
		</el-dialog>


		<!-- 添加自定义模块-->
		<el-dialog
			title="添加自定义模块"
			:visible.sync="addTemVisible"
			close-on-click-modal
			class="Fedialog"
			:before-close="handleClose"
		>
			<div class="diaCon" id="bottomElement">
				<div
					style="display: flex; flex-direction: column; gap: 10px"
				>
					<!-- 模块名称 -->
					<div style="background: #fff;border-radius: 10px;padding: 16px;box-sizing: border-box;">
						<div class="mouD">
							<el-input v-model="mouldD.tit" placeholder="模块名称"></el-input>
						</div>
					</div>

					<!-- 简介区域 -->
					<div
						class="diaFea"
					>
						<div>
							<div class="itemTit">简介</div>
						</div>
						<div>
							<el-input
								resize="none"
								style="border-radius: 10px; overflow: hidden;border: 1px solid #969BA3;"
								type="textarea"
								:rows="4"
								placeholder="请输入内容"
								v-model="mouldD.bri"
							>
							</el-input>
						</div>
					</div>

					<!-- 循环区域 -->
					<div
						class="diaFea"
						v-for="(i, index) in mouldD.list"
						:key="index + 'b'"
					>
						<div
							style="
								display: flex;
								justify-content: space-between;
								gap: 16px;
								height: 28px;
							"
						>
							<el-input
								resize="none"
								style="border-radius: 10px"
								placeholder="请输入标题"
								v-model="i.name"
							>
							</el-input>
							<img
								@click="delTemitem(index)"
								class="topTitEdit"
								src="../../../assets/kanban/delK.svg"
								alt=""
							/>
						</div>
						<div>
							<el-input
								resize="none"
								style="border-radius: 10px; overflow: hidden;border: 1px solid #969BA3"
								type="textarea"
								:rows="4"
								placeholder="请输入内容"
								v-model="i.bri"
							>
							</el-input>
						</div>
					</div>
				</div>
			</div>
			
			<div style="">
				<div
					@click="addtempitem"
					style="
						display: flex;
						align-items: center;
						padding: 10px 20px;
						box-sizing: border-box;
						cursor: pointer;
					"
				>
					<img src="../../../assets/kanban/feaJ.svg" alt="" />
					<span style="color: #0560fd">添加</span>
				</div>
				<div class="diaBtn" style="padding: 0 20px 10px !important">
					<div style="color: #000" @click="handleClose">
						取 消
					</div>
					<div
						type="primary"
						style="background: #0663fe;color: #fff;"
						@click="addTemp"
					>
						确 定
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 常见应用弹框 -->
		<el-dialog
			title="应用列表"
			:visible.sync="dialogVisible"
			class="moreDia"
			:close-on-click-modal="false"
			:modal="false"
			width="60%"
			:before-close="handleClose"
		>
		<div slot="title" class="applistTop">
			<div>应用列表</div>
			<el-input
				placeholder="请输入内容"
				style="width: 200px;height: 30px;"
				v-model="appinp">
				<i slot="suffix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div style="height: 500px;width: 100%;overflow: auto;overflow-x: hidden;">
			<div
				v-loading="loading"
				style="
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 16px;
					width: 100%;
					overflow-x: hidden;
				"
			>
				<div
					v-for="(item, index) in isAdd(usuallyList)"
					class="tabCon"
					@click="selApp(item)"
					:key="index + '6p'"
					style="width: 30%; position: relative"
				>
					<img
						v-if="selectedItem.find((k) => k.id === item.id)"
						src="../../../assets/img/dui.svg"
						style="position: absolute; top: 10px; right: 10px; width: 30px"
						alt=""
					/>
					<div class="AppList">
						<img class="appImg" :src="JSON.parse(item.json).icon" alt="" />
						<div class="con">
							<div class="tit">{{ item.name }}</div>
							<div class="bri">
								<el-tooltip
									class="item"
									effect="light"
									:content="item.detail"
									placement="bottom"
								>
									<span>
										{{ item.detail }}
									</span>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

			<div class="diaBtn" style="padding: 0 20px 10px !important">
				<div @click="dialogVisible = false">取 消</div>
				<div
					type="primary"
					style="background: #0663fe; color: #fff"
					@click="updateUApplist"
				>
					确 定
				</div>
			</div>
		</el-dialog>

		<!-- <addCampusDialog ref="addCampusDialogRef" @success="addCampusSuccess" /> -->
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import { API_CONFIG } from "../../../common/apiConfig.js";
// import addCampusDialog from "./addCampusDialog";
import { myMixin } from "@/mixins/mixin.js";
import "@/common/aws-sdk-2.235.1.min.js";

import axios from "@/common/axios.config"; // 引入 axios 配置实例
// import store from "../../../store";

export default {
	mixins: [myMixin],
	props: ["schId", "schOrg"],
	components: {
		// addCampusDialog,
	},
	data() {
		return {
			// 常见应用弹框
			dialogVisible: false,
			appinp:'', //搜索框


			// 0默认颜色 1编辑 2添加
			editBtnType: 0,
			// 添加与编辑弹框显示
			editVisible: false,
			// 判断点击的哪个部分的编辑按钮
			// 0集团简介 1办学特色 2师资力量 3特色应用 4自动定义模块
			isBtn: -1,

			// app应用列表
			usuallyList: [],
			loading: false,//列表加载

			// 正在编辑哪一个
			editIndex: null,

			// 上传图片loading
			diaLoad: false,



			// 所有应用列表
			appList: [],

			// 页面校区特色数据
			CampusF: [],

			// 储存选择特色应用
			selectedItem: [],

			// 整体数据
			Alldata: {},
			AllLoading: false,


			addTemVisible:false,
			TemNum:0,
			// 添加自定义模块模板
			mouldD:{
				tit:'',
				bri:'',
				list:[
					{name:'',bri:''}
				]
			}
		};
	},
	computed: {
		...mapGetters(["userinfo"]),
		featureList() {
			if (this.Alldata.admin.CampusF) {
				return this.Alldata.admin.CampusF.feature; // 从 Alldata 中获取 featureList
			} else {
				return [];
			}
		},
		// 判断是否被添加过
		isAdd() {
			return function (val) {
				const difference = val.filter(
					(item1) =>
						!this.CampusF.appList.some((item2) => item1.id === item2.id) && item1.name.includes(this.appinp)
				);
				return difference;
			};
		},
		teaData() {
			if (this.Alldata.admin.CampusF) {
				return this.Alldata.admin.CampusF.teacherN.list; // 从  Alldata 中获取 teaData
			} else {
				return [];
			}
		},
		allApp() {
			return function (val) {
				const difference = val.filter(
					(item1) =>
						!this.CampusF.appList.some((item2) => item1.id === item2.id)
				);
				return difference;
			};
		},
		editTitle() {
			if (this.isBtn == 0) return "编辑集团简介";
			else if (this.isBtn == 1) return "编辑办学特色";
			else if (this.isBtn == 2) return "编辑师资力量";
			else if (this.isBtn == 4) return `编辑${this.CampusF.customTemplate[this.TemNum].tit}`;
			else if (this.isBtn == 5) return "添加自定义模块";
			else return ""; // 默认值
		},
	},
	watch: {
		schId(newValue) {
			console.log("newValue", newValue);

			this.getSchFacility();
		},
	},
	methods: {
		// 添加自定义模块item
		addtempitem(){
			if (this.hasEmptyData2(this.mouldD.list))
					return this.$message.info("请填充空数据");
			this.mouldD.list.push({name:'',bri:''})
			setTimeout(() => {
				document.querySelector("#bottomElement").scrollTo({
					top: document.querySelector("#bottomElement").scrollHeight,
					behavior: "smooth",
				});
			}, 0);
		},
		// 添加自定义模块
		addTemp(){
			if (!this.mouldD.tit.trim()) return this.$message.error('请填充模块名称')
			if (!this.mouldD.bri.trim()) return this.$message.error('请填充模块简介')

			if (!this.CampusF.customTemplate) {
				this.CampusF.customTemplate = []
			}
			this.CampusF.customTemplate.push(this.mouldD)
			this.setJson(1)
		},
		// 修改特色应用
		updateUApplist() {
			this.CampusF.appList = [...this.CampusF.appList, ...this.selectedItem];
			this.setJson(1);
		},
		// 添加或去除app
		selApp(val) {
			let k = this.selectedItem.findIndex((item) => item.id === val.id);
			console.log("selApp", k);

			if (k != -1) {
				this.selectedItem.splice(k, 1);
			} else {
				this.selectedItem.push(val);
			}
		},
		// 添加数据
		additem() {
			this.editBtnType = 2;
			if (this.isBtn == 1) {
				if (this.hasEmptyData(this.CampusF.feature))
					return this.$message.info("请填充空数据");

				this.CampusF.feature.push({ bri: "", icon: "", name: "" });
				this.editIndex = this.CampusF.feature.length - 1;
				setTimeout(() => {
					document.querySelector("#bottomElement").scrollTo({
						top: document.querySelector("#bottomElement").scrollHeight,
						behavior: "smooth",
					});
				}, 0);
			} else if (this.isBtn == 2) {
				if (this.hasEmptyData2(this.CampusF.teacherN.list))
					return this.$message.info("请填充空数据");
				this.CampusF.teacherN.list.push({ bri: "", name: "" });
				this.editIndex = this.CampusF.teacherN.list.length - 1;
				setTimeout(() => {
					document.querySelector("#bottomElement").scrollTo({
						top: document.querySelector("#bottomElement").scrollHeight,
						behavior: "smooth",
					});
				}, 0);
			} else if (this.isBtn == 4) {
				if (this.CampusF.customTemplate[this.TemNum].list.length && this.hasEmptyData2(this.CampusF.customTemplate[this.TemNum].list))
					return this.$message.info("请填充空数据");
				this.CampusF.customTemplate[this.TemNum].list.push({ bri: "", name: "" });
				this.editIndex = this.CampusF.customTemplate[this.TemNum].list.length - 1;
				setTimeout(() => {
					document.querySelector("#bottomElement").scrollTo({
						top: document.querySelector("#bottomElement").scrollHeight,
						behavior: "smooth",
					});
				}, 0);
			}
		},
		// 点击区块编辑
		async editregion(type,index) {
			this.editIndex = null;
			this.editBtnType = 0;
			this.TemNum = index
			this.isBtn = type;
			this.editVisible = true;
		},
		//删除集团简介中的图片
		delImg(ind) {
			this.CampusF.GroupImgList.splice(ind, 1);
		},
		// 编辑弹框数据条中的图片
		editFea(ind) {
			this.editBtnType = 1;
			this.CampusF = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
			this.editIndex = ind;
		},
		handleClose() {
			this.dialogVisible = false;
			this.editVisible = false;
			this.addTemVisible = false;
			this.TemNum = 0;
			this.isBtn = -1;
			this.appList = [];
			this.editIndex = null;
			this.editBtnType = 0;
			this.dialogVisible = false;
			this.selectedItem = [];
			if (this.Alldata.admin.CampusF) {
				this.CampusF = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
			}
			// 重置自定义模板
			this.mouldD = {
				tit:'',
				bri:'',
				list:[
					{name:'',bri:''}
				]
			}
				
		},
		// 添加自定义模块弹框删除item
		delTemitem(index){
			this.$confirm("确定要删除吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.mouldD.list.splice(index,1)
				}).catch(() => {
					// 用户点击“取消”后执行的操作
					// this.$message.error('已取消删除');
				});
		},
		delTemFe(index){
			this.$confirm("确定要删除吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.CampusF.customTemplate.splice(index,1)
					this.setJson(0)
				}).catch(() => {
					// 用户点击“取消”后执行的操作
					// this.$message.error('已取消删除');
				});
		},
		// 删除
		delFe(index) {
			this.$confirm("确定要删除吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 用户点击“确定”后执行删除操作
					if (this.isBtn == 1) {
						this.CampusF.feature.splice(index, 1);
					} else if (this.isBtn == 2) {
						this.CampusF.teacherN.list.splice(index, 1);
					} else if (this.isBtn == 3) {
						this.CampusF.appList.splice(index, 1);
					} else if (this.isBtn == 4) {
						this.CampusF.customTemplate[this.TemNum].list.splice(index, 1)
					}
					this.setJson(0);
					// this.$message.success('删除成功！');
				})
				.catch(() => {
					// 用户点击“取消”后执行的操作
					// this.$message.error('已取消删除');
				});
		},
		// 打开常见应用弹框
		lookMore() {
			this.dialogVisible = true;
			this.loading = true;
			let params = [
				{
					functionName: API_CONFIG.ajax_usuallyApp.functionName,
					uid: this.userinfo.userid,
					cn: this.userinfo.schoolArea
						? this.userinfo.schoolArea
						: this.userinfo.orgArea, //学校id
				},
			];

			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					this.usuallyList = res.data[0];
					this.loading = false;
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("获取工具数据失败");
				});
		},
		openNewWindow(val) {
			console.log(val);
			this.addOp3(
				"1",
				"",
				{ id: val.id, name: val.name, type: this.prefixL + "appstoreOpen" },
				"success"
			);

			// // 基本用法：打开指定 URL
			window.open(val.url, "_blank");
		},
		// 办学特色取消
		feaClo(ind) {
			this.editBtnType = 0;
			this.editIndex = null;

			let data = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
			if (this.isBtn == 1) {
				this.CampusF.feature = data.feature;
			} else if (this.isBtn == 2) {
				this.CampusF.teacherN.teaBri = data.teacherN.teaBri;

				if (ind != null) {
					this.CampusF.teacherN.list = data.teacherN.list;
				}
			} else if (this.isBtn == 3) {
				this.CampusF.appList = data.appList;
			} else if (this.isBtn == 4) {
				this.CampusF.customTemplate = data.customTemplate
			}
		},
		// 保存时添加判断
		setJsonL(ind) {
			// 办学特色
			if (this.isBtn == 1) {
				if (this.hasEmptyData(this.CampusF.feature))
					return this.$message.info("请填充空数据");

				this.setJson(0);
			} else if (this.isBtn == 2) {
				// 师资力量
				if (!this.CampusF.teacherN.teaBri)
					return this.$message.info("请填充简介");
				if (this.hasEmptyData2(this.CampusF.teacherN.list))
					return this.$message.info("请填充空数据");

				this.setJson(0);
			} else if (this.isBtn == 3) {
				// 特色应用
				if (!this.CampusF.appList[ind].detailWri) {
					this.CampusF.appList[ind].detailWri =
						this.CampusF.appList[ind].detail;
				}

				this.setJson(0);
			} else if (this.isBtn == 4) {
				// // 特色应用
				// if (!this.CampusF.customTemplate[this.TemNum].tit)
				// 	return this.$message.info("请填充模块名称");
				// if (!this.CampusF.customTemplate[this.TemNum].bri)
				// 	return this.$message.info("请填充简介");
				
				// if (this.CampusF.customTemplate[this.TemNum].list.length && this.hasEmptyData2(this.CampusF.customTemplate[this.TemNum].list))
				// 	return this.$message.info("请填充空数据");

				// 	console.log('66666');
					
				this.setJson(0);
			}
		},
		// 不能有空值
		hasEmptyData2(arr) {
			return arr.some(
				(item) => item.name.trim() === "" || item.bri.trim() === ""
			);
		},
		hasEmptyData(arr) {
			return arr.some(
				(item) =>
					item.name.trim() === "" || item.icon === "" || item.bri.trim() === ""
			);
		},

		// 提交
		setJson(SetL) {
			if (SetL == 1) {
				if (this.editBtnType != 0) return this.$message.info("请保存修改数据");
			}

			if (this.isBtn == 1 && this.hasEmptyData(this.CampusF.feature))
				return this.$message.info("请填充空数据");

			if (this.isBtn == 4 && (!this.CampusF.customTemplate[this.TemNum].tit.trim() || !this.CampusF.customTemplate[this.TemNum].bri.trim() || (this.CampusF.customTemplate[this.TemNum].list.length && this.hasEmptyData2(this.CampusF.customTemplate[this.TemNum].list))))
				return this.$message.info("请填充空数据");

			this.editIndex = null;
			this.diaLoad = true;
			let _form = JSON.parse(JSON.stringify(this.Alldata));
			console.log("CampusF", JSON.parse(JSON.stringify(this.CampusF)));

			_form.desktop.list = _form.desktop.list.map((i) => i.id);

			_form.admin.index.list = _form.admin.index.list.map((i) => i.id);

			_form.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					_form.admin.sidebar.list[index].children = i.children.map(
						(i) => i.id
					);
				} else {
					_form.admin.sidebar.list[index] = i.id;
				}
			});

			_form.admin.cocoFlow = _form.admin.cocoFlow
				? _form.admin.cocoFlow.map((i) => {return { id: i.id, setIcon: i.setIcon };}): [];

			_form.admin.cocoFlow2 = _form.admin.cocoFlow2
				? _form.admin.cocoFlow2.map((i) => {return { id: i.id, setIcon: i.setIcon };}): [];

			_form.admin.CampusF = JSON.parse(JSON.stringify(this.CampusF));

			// console.log('_form.admin.CampusF',JSON.parse(JSON.stringify(_form.admin.CampusF)));

			_form.admin.CampusF.appList = _form.admin.CampusF.appList.length
				? _form.admin.CampusF.appList.map((i) => {
						return {
							id: i.id,
							setIcon: i.setIcon,
							detailWri: i.detailWri ? i.detailWri : "",};}): [];

			console.log("_form", JSON.parse(JSON.stringify(_form)));
			let params = [
				{
					functionName: "update_orgOroid_json_liyuan",
					oid: this.schId,
					orgid: this.schOrg,
					ujson: JSON.stringify(_form),
				},
			];
			axios
				.post(API_CONFIG.baseUrl, params)
				.then(async (res) => {
					let _data = res.data;
					if (_data == 1) {
						this.$message.success("修改成功");

						this.getSchFacility();
						this.editBtnType = 0;
						if (SetL) {
							this.handleClose();
						}

						this.addOp3(
							"1",
							"",
							{
								uid: this.userinfo.userid,
								cid: this.userinfo.organizeid,
								type: "user_op",
								content: `修改了${this.userinfo.schoolName}的校区特色`,
							},
							"success"
						);
					} else {
						this.$message.error("修改失败");
					}
					this.diaLoad = false;
				})
				.catch((err) => {
					console.log(err);
					this.diaLoad = false;
					this.$message.error("修改失败");

					this.addOp3(
						"1",
						"",
						{
							uid: this.userid,
							cid: this.data.id,
							type: "user_op",
							content: `修改了${this.data.name}的校区特色`,
						},
						err
					);
				});
		},
		async getSchFacility() {
			this.AllLoading = true;
			let params = [
				{
					functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
					org: this.schOrg, //组织id
					oid: this.schId, //学校id
				},
			];

			console.log("params", params);
			// 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
			// 第一步
			let res = await axios.post(API_CONFIG.baseUrl, params);
			let perData = JSON.parse(res.data[0][0].json);

			// 第二步
			let params2 = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];
			let res2 = await axios.post(API_CONFIG.baseUrl, params2);
			let toolList = res2.data[0];
			toolList.forEach((i) => {
				i.url = JSON.parse(i.url);
				i.json = JSON.parse(i.json);
				i.argumentList = JSON.parse(i.argumentList);
			});

			let params3 = [
				{
					functionName: "select_schUsuallyApp",
					userid: "",
					stand: "cn",
				},
			];
			let res3 = await axios.post(API_CONFIG.baseUrl, params3);

			let _list = res3.data[0];

			_list.forEach((i) => {
				i.json = JSON.parse(i.json);
			});

			let appList = _list;

			// 第三步
			perData.desktop.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					perData.desktop.list[index] = toolList[_index];
				} else {
					console.log("无工具", i);
				}
			});

			if (perData.admin.CampusF && perData.admin.CampusF.appList) {
				perData.admin.CampusF.appList.forEach((i, index) => {
					let _index = appList.findIndex((i2) => i.id == i2.id);

					if (_index != -1) {
						let _setData = appList[_index];
						_setData.setIcon = i.setIcon;
						_setData.detailWri = i.detailWri ? i.detailWri : "";
						perData.admin.CampusF.appList[index] = _setData;
					} else {
						console.log("无应用", i);
					}
				});
				perData.admin.CampusF.appList =
					perData.admin.CampusF.appList.filter(Boolean);
			}

			perData.admin.index.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					perData.admin.index.list[index] = toolList[_index];
					perData.admin.index.list[index].hovered = false;
				} else {
					console.log("无工具", i);
				}
			});
			perData.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					i.children.forEach((i2, index2) => {
						let _toolList = JSON.parse(JSON.stringify(toolList));
						let _index = _toolList.findIndex((i3) => i2 == i3.id);

						if (_index != -1) {
							perData.admin.sidebar.list[index].children[index2] =
								_toolList[_index];
							perData.admin.sidebar.list[index].children[index2].typeId =
								perData.admin.sidebar.list[index].typeId +
								"," +
								_toolList[_index].id;
						} else {
							console.log("无工具", i);
						}
					});
				} else {
					let _toolList = JSON.parse(JSON.stringify(toolList));
					let _index = _toolList.findIndex((i2) => i == i2.id);
					if (_index != -1) {
						perData.admin.sidebar.list[index] = _toolList[_index];
						perData.admin.sidebar.list[index].typeId =
							perData.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					}
				}
			});
			console.log("perData", perData);

			this.Alldata = perData;
			this.AllLoading = false;

			if (perData.admin.CampusF) {
				this.CampusF = JSON.parse(JSON.stringify(perData.admin.CampusF));
			} else {
				this.CampusF = {
					GroupBri: "暂无简介",
					feature: [
						{
							bri: "暂无简介",
							icon: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/tese1745913146000.svg",
							name: "默认标题",
						},
					],
					teacherN: {
						teaBri: "暂无简介",
						list: [{ bri: "默认标题", name: "暂无数据" }],
					},
					appList: [],
				};
			}

			//   commit('SET_FROM', perData)
		},
		// 上传图片
		async uploadisBtn(val, index) {
			let imgUrl = await this.uploadFile("image/*");

			if (val == 0) {
				if (this.CampusF.GroupImgList) {
					this.$set(this.CampusF, "GroupImgList", [
						...this.CampusF.GroupImgList,
						imgUrl,
					]);
				} else {
					this.CampusF.GroupImgList = [];
					this.$set(this.CampusF, "GroupImgList", [
						...this.CampusF.GroupImgList,
						imgUrl,
					]);
				}
			} else if (val == 1) {
				this.CampusF.feature[index].icon = imgUrl;
			} else if (val == 3) {
				this.CampusF.appList[index].setIcon = imgUrl;
			}

			this.$forceUpdate();
		},
		uploadFile(accept = "*") {
			return new Promise((resolve) => {
				const input = document.createElement("input");
				input.type = "file";
				input.accept = accept;
				input.onchange = (event) => {
					const file = event.target.files[0];
					if (file) {
						let credentials = {
							accessKeyId: "AKIATLPEDU37QV5CHLMH",
							secretAccessKey: "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",
						}; //秘钥形式的登录上传
						window.AWS.config.update(credentials);
						window.AWS.config.region = "cn-northwest-1"; //设置区域
						let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
						this.diaLoad = true;

						let params = {
							Key:
								file.name.split(".")[0] +
								new Date().getTime() +
								"." +
								file.name.split(".")[file.name.split(".").length - 1],
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						let options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};

						bucket
							.upload(params, options)
							.on("httpUploadProgress", (evt) => {
								console.log(evt);
							})
							.send((err, data) => {
								if (err) {
									this.$message.error("上传失败");
									this.diaLoad = false;

									// return resolve("");
								} else {
									this.diaLoad = false;

									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
						this.diaLoad = false;

						console.log("没上传成功");
					}
				};
				input.click();
			});
		},
	},
	mounted() {
		this.getSchFacility();
	},
};
</script>

<style scoped>
.Ktop {
	/* height: 159px; */
	padding: 36px 27px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	justify-content: space-between;
}
.Asc >>> .el-icon-picture-outline:before {
	height: 30px;
	width: 30px;
}
.topTit {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	color: #0663fe;
	display: flex;
	height: 36px;
	justify-content: space-between;
}

.topTitEdit {
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.TopbriKl {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #000;
}
.Topbri {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #000;
	flex-shrink: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Topbri2 {
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 14px;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.feature {
	width: 100%;
	padding: 20px;
	border-radius: 12px;
	box-sizing: border-box;
	background: #eeeeee;
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-between;
}

.featureCon {
	background: #ffffff;
	height: 211px;
	display: flex;
	flex: 1;
	flex-shrink: 0;
	flex-direction: column;
	/* justify-content: center; */
	border-radius: 10px;
	padding: 40px 20px;
	align-items: center;
	box-sizing: border-box;
	gap: 18px;
}

.featureAll {
	grid-template-columns: repeat(4, 1fr);
	display: grid;
	gap: 20px;
}

.featureCon2 {
	background: #ffffff;
	width: 100%;
	height: 94px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 10px;
	padding: 40px 20px;
	align-items: center;
	box-sizing: border-box;
	gap: 10px;
}

.featureConTit {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 18px;
	color: #000;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.featureConTit2 {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 20px;
	line-height: 22px;
	color: #0663fe;
	flex-shrink: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.AppStoreList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
	gap: 20px;
}

.AppStoreList2 {
	display: flex;
	flex-direction: column;
}

.AppStore {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 171px;
	min-width: 100px;
	cursor: pointer;
}

.AppStoreCon {
	border-radius: 10px;
	padding: 17px 17px;
	height: 100%;
	box-sizing: border-box;
	background: #fff;
}
.AppStoreCon img {
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	object-fit: cover;
	border-radius: 50%;
}

.AppAdd {
	height: 171px;
	border-radius: 10px;
	padding: 17px 17px;
	box-sizing: border-box;
	border: 1px dashed #000000;
	background: #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.AppStoreConTit {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.AppStoreConBri {
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 14px;
	color: #969ba3;
	height: 100%;
	/* display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; */
	/* white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis; */
}
.AppStoreConBri >>> .el-textarea {
	height: 100%;
}
.AppStoreConBri >>> .el-textarea__inner {
	border: none !important;
	border-radius: 8px !important;
	height: 100%;
	background: #f2f2f2 !important;
}
.AppStoreBri {
	font-family: PingFang SC;
	font-size: 10px;
	color: #969ba3;
}

.appItem {
	height: 100px;
	background-color: white;
	box-sizing: border-box;
	border: solid 1px #f3f4f6;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}

.appActive {
	border-color: #409eff;
	box-shadow: 0px 6px 30px 5px #00000015;
}

.appItem:hover {
	box-shadow: 0px 6px 30px 5px #00000015;
}

.ai_left {
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	padding: 10px;
	margin-right: 10px;
}

.ai_right {
	width: calc(100% - 80px - 10px);
	position: relative;
}

.ai_right > div {
	max-width: calc(100% - 50px);
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	color: #000;
	margin-bottom: 10px;
}

.ai_right > span {
	font-size: 14px;
	color: #00000099;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Fedialog >>> .el-dialog {
	width: 60% !important;
	min-width: 800px;
	overflow: hidden;
	margin-top: 10vh !important;
	border-radius: 12px;
}
.diaTop {
	height: 450px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.diaTop >>> .el-textarea__inner {
	border: none !important;
	border-radius: 10px !important;
}
.diaCon {
	height: 500px;
	overflow: auto;
	padding: 20px;
}
.FedialogJIa {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}
.FedialogJIa div {
	height: 122px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	border: 1px #0663fe dashed;
}

.Fedialog >>> .el-dialog__header {
	padding: 15px 20px;
	background: #fff;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px #e7e7e7 solid;
}

.Fedialog >>> .el-dialog__body {
	position: relative;
	max-height: 70vh;
	/* 内容区域最大高度为视口高度的 70% */
	overflow-y: auto;
	/* 当内容超出时显示滚动条 */
	background: #fafafa;
	/* 添加内边距 */
	padding: 0;
	box-sizing: border-box;
	/* 确保 padding 不影响宽度计算 */
}

.Fedialog >>> .el-dialog__title {
	color: #000;
}
.diaBtn {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	/* height: 40px; */
	align-items: center;
	padding: 10px 0px 0 !important;
	box-sizing: border-box;
	/* min-height: 60px; */
}
.diaBtn > div {
	background: #e7e7e7;
	border-radius: 25px;
	height: 24px;
	width: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 12px;
	cursor: pointer;
}
.CarO {
	border-radius: 10px;
	overflow: hidden;
	/* box-shadow: 0px 0px 20px 0px #0000001a;  */
}
.CarO >>> .el-carousel {
	height: auto !important;
}
/* .CarO >>> .el-carousel__container {
	height: 420px !important;
} */
/*指示器按钮*/
.CarO >>> .el-carousel__button {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
}
/*指示器激活按钮*/
.CarO >>> .is-active .el-carousel__button {
	background: #0663fe;
}
.imgBoc {
	position: relative;
	border: none !important;
}
.imgBoc > .el-icon-circle-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: none;
	font-size: 25px;
	cursor: pointer;
	color: #0663fe;
}
.imgBoc:hover .el-icon-circle-close {
	display: block;
}
.diaFea {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 10px;
}
.diaFea >>> .el-input__inner {
	height: 28px;
	line-height: 28px;
	border-radius: 10px;
	border: none !important;
	background: #f2f2f2;
}
.diaFea >>> .el-textarea__inner {
	border: none !important;
	border-radius: 10px;
	background: #fff !important;
}
.diaFeaImgT {
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 50%;
}

.diaFeaImg {
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}
.shadeC {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	z-index: 9999;
	opacity: 0.3;
}

/* 弹框 */
.moreDia >>> .el-dialog {
	border-radius: 10px;
}
.moreDia >>> .el-dialog__body {
	/* height: 500px; */
	/* overflow: auto; */
	border-top: 1px #e7e7e7 solid;
}
/* 对号 */
.top {
	display: flex;
	height: 154px;
	justify-content: space-between;
	background-color: #fff;
	align-items: center;
	padding: 24px;
	box-sizing: border-box;
	margin-bottom: 14px;
	border-radius: 10px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.AppList {
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
	border-radius: 10px;
	padding: 16px;
	box-sizing: border-box;
	position: relative;
}
.appImg {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.con {
	flex: 1;
	margin-left: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tit {
	color: #1f2937;
	font-size: 16px;
	height: 24px;
	line-height: 24px;
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bri {
	color: #6b7280;
	font-size: 12px;
	height: 16px;
	line-height: 16px;
	overflow: hidden;
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.djjC {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border-width: 1px;
	overflow: hidden;
}
.jiaBoc {
	width: 100%;
	height: 100%;
	display: flex;
	background: #eeeeee;
	align-items: center;
	justify-content: center;
}
.tArea >>> .el-textarea__inner {
	background: #f2f2f2 !important;
}
.itemTit {
	font-weight: 600;
	color: #303133;
}
.imgCar >>> img{
	/* height: 100%; */
	width: 100%;
	object-fit: cover;
}
.applistTop{
	display: flex;justify-content: space-between;align-items: center;padding-right: 50px;
}
.applistTop >>> .el-input__icon{
	line-height: 30px;
}
.applistTop >>> .el-input__inner{
	height: 30px;
	line-height: 30px;
}
.mouD{
	display: flex;gap: 10px;
	align-items: center;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10px;
}
.mouDTitDiv{ 	
	flex: 1;
	border: 1px solid rgb(150, 155, 163);
	padding: 5px 15px;
	box-sizing: border-box;border-radius: 5px;
	color: #C0C4CC;
}
.mouD >>> .el-input__inner{
	border: none;
	background: #F2F2F2 !important;
	height: 28px;
	border-radius: 10px;
	color: #000 !important;
}
</style>