<template>
	<view class="fullHeight projectIndexPage" style="background-color: white">
		<scroll-view class="" :class="accountType == 5 || accountType == 6 || accountType == 10 ? 'smallHeight' : ''"
			scroll-y>
			<view class="fixedheader">
				<headers :themeType="true" :showBack="true">
					<view class="headerName">
						应用中心
					</view>
				</headers>
			</view>
			<view class="moudleItem_all">
				<view class="all_title">
					<view class="all_title_left">
						<image src="@/static/bthgIcon/project_icon1.png" mode=""></image>
						<view>
							常用功能
						</view>
					</view>
				</view>
				<view class="moudleBox">
					<view class="moudleItem" @click="goMoudleFn(item)" v-for="(item, index) in commonUseList"
						:key="index">
						<view class="inner">
							<!-- <view class="imgBox" v-if="iconType == 1">
													<image class="img" :src="'/static/moudleImg/' + item.moduleIcon + '.png'"></image>
												</view> -->
							<!-- v-if="iconType == 2" -->
							<view class="imgBox">
								<image class="img" :src="'/static/bthgIcon/' + item.commonIcon + '.png'"></image>
							</view>
							<view class="desc">
								{{ item.appName || item.moduleName }}
							</view>
							<view @click.stop="onClickDelete(item)" class="imageDelete"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="moudleContent">
				<view class="all_title">
					<view class="all_title_left">
						<image src="@/static/bthgIcon/project_icon1.png" mode=""></image>
						<view>
							全部应用
						</view>
					</view>
				</view>
				<!-- <view class="moudleTitle"> ·已有产品·</view> -->
				<view class="moudleBox">
					<view @click.stop="goMoudleFn(item)" v-for="(item, index) in list" :key="index">
						<view class="moudleItem" v-if="item.operation && (item.moduleType == 2 || item.moduleType == 10) && item.appShow == 1">
							<view class="inner" :class="{'inner_active': !commonModuleIdFlag(item)}">
								<!-- <view class="imgBox" v-if="iconType == 1">
								<image class="img" :src="'/static/moudleImg/' + item.moduleIcon + '.png'"></image>
							</view> -->
								<!-- v-if="iconType == 2" -->
								<view class="imgBox">
									<image class="img" :src="'/static/bthgIcon/' + item.commonIcon + '.png'"></image>
								</view>
								<view class="desc">
									{{ item.appName || item.moduleName }}
								</view>
								<view v-if="commonModuleIdFlag(item)" @click.stop="onClickAdd(item)" class="imageAdd">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'
	import footers from '../../../components/footers/footers.vue'
	import checkVersion from '@/pages/lq-upgrade/checkVersion.js'
	import {
		closeBle
	} from '@/static/js/BLEConn.js'
	import {
		getBottomLevelData
	} from "@/utils/tool.js"

	export default {
		components: {
			headers,
			footers
		},
		data() {
			return {
				qrCode: {},
				projectDetail: {
					projectName: '',
					contractPeriodEndTime: '',
					contractPeriodStartTime: '', //-.-.-
					contractPeriodType: 1, //1是正常  2是已延期
					periodRatio: 0
				},
				userInfo: {},
				searchsn: '',
				accountType: 1,
				list: [],
				weatherInfo: {
					city: '--',
					weather: '-',
					temperature: '--',
					winddirection: '--',
					windpower: '--',
					humidity: '--'
				},
				iconType: '1',
				systemInfo: {
					statusBarHeight: 0
				},
				styType: '',
				//天气
				imgUrl: '',
				date: '', //现在时间
				// weatherInfo: '--',
				adressDetail: '--',
				city: '',
				url: '',
				versionData: '',
				commonUseList: [],
				commonModuleIdsList: [],
				haveModuleList: [],
			}
		},
		mounted() {},
		onShow() {

		},
		onLoad(options) {
			var userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			console.log('userInfo===========', userInfo)
			this.userInfo = userInfo
			this.accountType = userInfo.accountType
			this.styType = userInfo.styleType
			this.systemInfo = uni.getStorageSync('systemInfo')
			this.queryAppUserModuleList();
			this.getAppModuleList();
			this.haveModuleList = uni.getStorageSync("haveModuleList")
		},
		methods: {
			queryAppUserModuleList() {
				var that = this
				this.sendRequest({
					url: 'xmgl/baseModule/queryAppUserModuleList',
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: 'GET',
					success(res) {
						console.log(res.result)
						that.commonUseList = res.result;
						that.commonModuleIdsList = res.result.map(item => {
							delete item.menuList
							return item
						})
					}
				})
			},
			getAppModuleList() {
				var that = this
				this.sendRequest({
					url: 'xmgl/baseModule/getAppModuleList',
					data: {
						projectSn: this.projectDetail.projectSn,
						isApp: 1
					},
					method: 'post',
					success(res) {
						console.log(res.result)
						var all = res.result.moduleList;
						console.log("all", all);
						all.forEach((element, index) => {
							all[index].operation = true;
							// res.result.menuList.forEach((element2) => {
							// 	if (element2.moduleId == element.moduleId) {
							// 		all[index].operation = true;
							// 	}
							// });
						});
						console.log("all111", all);
						console.log("all222", that.haveModuleList);
						// const newList = that.$recursiveSearchFn(all);
						that.list = all.filter(item => {
							if (that.haveModuleList.length > 0) {
								const path = item.path ? item.path : item.modulePath;
								const res = that.$recursiveSearch(that.haveModuleList, path)
								return res ? true : false
							}
							// console.log(5555555, res);
							// debugger
							return res;
						}).reduce((prev,item) => {
							const findIndex = prev.findIndex(ele => ele.plugin == item.plugin);
							if(findIndex == -1) {
								prev.push(item);
							}
							return prev
						}, []);
						console.log(that.list);
					}
				})
			},
			onClickDelete(row) {
				const findIndex = this.commonModuleIdsList.findIndex(item => item.moduleId == row.moduleId);
				if (findIndex > -1) {
					this.commonModuleIdsList.splice(findIndex, 1);
					this.saveAppUserModules();
				}
			},
			onClickAdd(row) {
				console.log(1111111, row.moduleId, row)
				delete row.menuList
				this.commonModuleIdsList.push(row);
				console.log("添加", this.commonModuleIdsList)
				this.saveAppUserModules();
			},
			saveAppUserModules() {
				var that = this;
				console.log("添加2", this.commonModuleIdsList)
				this.sendRequest({
					url: 'xmgl/baseModule/saveAppUserModules',
					data: this.commonModuleIdsList,
					method: 'post',
					success(res) {
						uni.showToast({
							title: "操作成功",
							icon: 'none'
						})
						that.queryAppUserModuleList();
					}
				})
			},
			getProjectSn(next) {
				var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.sendRequest({
					url: "xmgl/company/getTenantOrgTreeList",
					data: {
						userId: userInfo.userId,
						headquartersSn: uni.getStorageSync("company").headquartersSn
					},
					method: "POST",
					success: (res) => {
						console.log(res, "getTenantOrgTreeList");
						let three = getBottomLevelData(res.result)[0];
						console.log(three, "threeeeeee");
						let dept = uni.getStorageSync("dept");
						if (!dept) {
							dept = three.projectSn;
							uni.setStorageSync("dept", dept)
						}
						this.searchsn = dept;
						next()
					}
				})
			},
			toDept() {
				uni.navigateTo({
					url: "/pages/deptList/deptList"
				})
			},
			goMoudleFnTest() {
				uni.navigateTo({
					url: '/pages/projectEnd/trainPlan/list'
				})
			},
			goMoudleFn(item) {
				return
				//添加虚拟模块 报警提示
				// if(item.moduleName=="预警播报"){
				// 	uni.navigateTo({
				// 		url: '/pages/alarmPage/index'
				// 	})
				// 	return false;
				// }
				console.log('item=======item.plugin', item, item.plugin)
				switch (item.plugin) {
					// case 'markRoom':
					//   uni.navigateTo({
					//     url: '../markRoom/markRoom'
					//   })
					//   break
					case "standardScheduleAg":
						uni.navigateTo({
							url: '/pages/standardScheduleNews/home'
						})
						break;
					case "inspectRoute":
						uni.navigateTo({
							url: '../../projectEnd/InspectionRoute/inspection'
						})
						break;
					case 'educationExam':
						uni.navigateTo({
							url: '../trainPlan/list'
						})
						break
					case 'markRoom':
						uni.navigateTo({
							url: '../markRoom/markRoom'
						})
						break
					case 'videoMonitor':
						// uni.navigateTo({
						// 	url: '../../videoManage/videoList?sn=' +
						// 		this.projectDetail.projectSn +
						// 		'&pageType=backEnd'
						// })
						uni.navigateTo({
							url: '../../videoManage/videoGroup'
						})
						break
					case 'projectInfo':
						uni.navigateTo({
							url: '../project/projectInfo'
						})
						break
					case 'environmentMonitor':
						uni.navigateTo({
							url: '../environment/menu'
						})
						break
					case 'laborManage':
						uni.navigateTo({
							url: '../laborManage/index'
						})
						break
					case 'constructionLog':
						uni.navigateTo({
							url: '../constructionLog/list'
						})
						break
					case 'electricBoxMange':
						uni.navigateTo({
							url: '../electricBox/index'
						})
						break
					case 'lifterManage':
						uni.navigateTo({
							url: '../lifterMonitoring/index'
						})
						break
					case 'carManage':
						uni.navigateTo({
							url: '../carManage/indexPage'
						})
						break
					case 'towerManage':
						uni.navigateTo({
							url: '../towerManage/index'
						})
						break
					case 'dailyInspection':
						uni.navigateTo({
							url: '../dailyCheck/index'
						})
						break
					case 'qualitySpringback':
						uni.navigateTo({
							url: '../qualitySpringback/index'
						})
						break
					case 'unloadManage':
						uni.navigateTo({
							url: '../unload/index'
						})
						break
					case 'concreteMonitoring':
						uni.navigateTo({
							url: '../concreteMonitoring/index'
						})
						break
					case 'safeManage':
						// uni.navigateTo({
						// 	url: '../safeManage/index'
						// })
						uni.navigateTo({
							url: '../safeManage/safeIndex'
						})
						break
						// uni.navigateTo({
						// 	url: '../safeManage/addExamine'
						// })
						break
					case 'qualityManage':
						uni.navigateTo({
							url: '../qualityManage/index'
						})
						break
					case 'carWashManage':
						uni.navigateTo({
							url: '../carWashManage/index'
						})
						break
					case 'dangerBigProject':
						uni.navigateTo({
							url: '../dangerBigProject/index'
						})
						break
					case 'safeManageAG':
						uni.navigateTo({
							url: '../safeSame/index'
						})
						break
					case 'fileManage':
						uni.navigateTo({
							url: '../../fileManage/fileManage'
						})
						break
					case 'materialsManage':
						uni.navigateTo({
							url: '../../projectEnd/materialsManage/materialsManage'
						})
						break
					case 'ukashManage':
						uni.navigateTo({
							url: '../../projectEnd/ukashManage/ukashManage'
						})
						break
					case 'ekashManage':
						uni.navigateTo({
							url: '../../projectEnd/ekashManage/ekashManage'
						})
						break
					case 'visitorsManage':
						uni.navigateTo({
							url: '../../projectEnd/visitorsManage/visitorsManage'
						})
						break
					case 'betonManage':
						uni.navigateTo({
							url: '../betonManage/index'
						})
						break
					case 'progressManage':
						uni.navigateTo({
							url: '../progressManagement/index'
						})
						break
						// case 'dangerBroadcast':
						// 	uni.navigateTo({
						// 		url: '../../alarmPage/index'
						// 	})
						// 	break
					case 'dangerBroadcast':
						// uni.navigateTo({
						// 	url: '../../alarmPage/indexTwo'
						// })
						uni.navigateTo({
							url: '../../alarmPage/pageIndex'
						})
						break
					case 'carViolation':
						// uni.navigateTo({
						// 	url: '../../alarmPage/indexTwo'
						// })
						uni.navigateTo({
							url: '../../carViolation/pageIndex'
						})
						break

					case 'standardSchedule':
						uni.navigateTo({
							url: '../standardSchedule/index',
						})
						break
					case 'smartBeamField':
						uni.navigateTo({
							url: '../smartBeamField/beamMenu',
						})
						break
					case 'specialOperations':
						uni.navigateTo({
							url: '../../projectEnd/specialOperations/specialOperations'
						})
						break
					case 'operationManage':
						uni.navigateTo({
							url: '../../projectEnd/operationManage/operationManage'
						})
						break
					case 'emergencyDisposal':
						uni.navigateTo({
							url: '../../projectEnd/emergencyDisposal/index'
						})
						break
					case 'pouringOrderLedger':
						uni.navigateTo({
							// url: '../qualityManage/pouringOrderLedger/work'
							url: '../../projectEnd/workflowTable/pouringOrderApplyfor/index'
						})
						break
					case 'testingManage':
						uni.navigateTo({
							url: '../../projectEnd/testingManage/operationManage'
						})
						break
					case 'startReportApproveManage':
						uni.navigateTo({
							url: '../../projectEnd/startReportApproveManage/index'
						})
						break
					case 'controlPointGrading':
						uni.navigateTo({
							url: '../../projectEnd/controlPointGrading/index'
						})
						break
					case 'buildUnqualifiedReport':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/buildUnqualifiedReport/index'
						})
						break
					case 'welderAssessmentRequest':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/welderAssessmentRequest/index'
						})
						break
					case 'unitProjectDivideReport':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/unitProjectDivideReport/index'
						})
						break
					case 'engineeringSurveyRetest':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/engineeringSurveyRetest/index'
						})
						break
					case 'waterElectricityRecordSettlement':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/waterElectricityRecordSettlement/index'
						})
						break
					case 'roadUseApproval':
						uni.navigateTo({
							url: '../../projectEnd/workflowTable/roadUseApproval/index'
						})
						break
					case 'centralizeAntisepticEntrust':
						uni.navigateTo({
							url: '../../projectEnd/centralizeAntisepticEntrust/index'
						})
						break
					case 'pipelineWelding':
						uni.navigateTo({
							url: '../../projectEnd/pipelineWelding/index'
						})
						break

					case 'guidancePartyBuilding':
						uni.navigateTo({
							url: '../../projectEnd/guidancePartyBuilding/index'
						})
						break
						case 'sunshineProject':
							uni.navigateTo({
								url: '../../projectEnd/sunshineProject/index'
							})
							break
					case 'videoLedger':
						uni.navigateTo({
							url: '../../projectEnd/videoLedger/index'
						})
						break
					case 'buildEquipToolManage':
						uni.navigateTo({
							url: '../../projectEnd/buildEquipToolManage/index'
						})
						break
					case 'schemeLedger':
						uni.navigateTo({
							url: '../../projectEnd/schemeLedger/index'
						})
						break
					case 'winterConstructionManage':
						uni.navigateTo({
							url: '../../projectEnd/winterConstructionManage/index'
						})
						break
					case 'firstModelManage':
						uni.navigateTo({
							url: '../../projectEnd/firstModelManage/index'
						})
						break
					case 'civilConstruction':
						uni.navigateTo({
							url: '../../projectEnd/civilConstruction/index'
						})
						break
					case 'qualitySurveillance':
						uni.navigateTo({
							url: '../../projectEnd/qualitySurveillance/index'
						})
						break
					case 'saosao':
						console.log('打开saosao')
						// let that = this;
						uni.scanCode({
							scanType: ['qrCode'],
							success: function(res) {
								console.log('扫一扫得到的数据：' + res.result)
								// uni.navigateTo({
								// 	url: '../scan/saoSao?data=' + res.result
								// })
								uni.navigateTo({
									url: `${res.result}`
								})

								// let qrcodeVal=JSON.parse(res.result)
								// let param={
								// 	checkingPointId:qrcodeVal.checkingPointId,
								// 	checkingPointName:qrcodeVal.checkingPointName,
								// 	checkingPointUserId:that.userInfo.userId,
								// 	checkingPointUserName:that.userInfo.realName||that.userInfo.account,
								// 	position:qrcodeVal.position
								// }

								// that.sendRequest({
								// 	url: "xmgl/checkingPointInfo/add",
								// 	data:param,
								// 	method: "POST",
								// 	success(res) {
								// 		console.log(res,'res');
								// 		console.log(param,'===')
								// 		that.qrCode=param;
								// 		that.$refs.popupqrcode.open();
								// 		setTimeout(item=>{
								// 			that.$refs.popupqrcode.close();
								// 		},5000)
								// 	}
								// })
							}
						})
						break
					default:
						uni.showToast({
							icon: 'none',
							title: '该产品暂未开放，敬请期待！'
						})
				}
			},
		},
		computed: {
			commonModuleIdFlag() {
				return (row) => {
					const findIndex = this.commonModuleIdsList.findIndex(item => item.moduleId == row.moduleId);
					console.log(findIndex, row.moduleId, this.commonModuleIdsList)
					return findIndex > -1 ? false : true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inner_active {
		opacity: 0.2;
	}

	.imageAdd {
		width: 28rpx;
		height: 28rpx;
		background-image: url(@/static/bthgIcon/project_icon7.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 16rpx;
		right: 50rpx;
	}

	.imageDelete {
		width: 28rpx;
		height: 28rpx;
		background-image: url(@/static/bthgIcon/project_icon8.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.all_title {
		display: flex;
		// justify-content: center;
		align-items: center;
		justify-content: space-between;

		.all_title_left {
			display: flex;
			// justify-content: center;
			align-items: center;

			>image {
				width: 30rpx;
				height: 30rpx;
			}

			>view {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.moudleItem_all {
		padding: 32rpx 0 0 0;
		// box-shadow: 0px 8rpx 32rpx 0px rgba(212, 220, 236, 0.59);
		// background-color: white;
		border-radius: 0 0 16rpx 16rpx;
		margin: 110rpx 30rpx 0 30rpx;



		.moudleBox {
			margin-top: 20rpx;

			.moudleItem {
				width: 20%;

				.inner {
					border: none;
					padding: 12rpx 0;
				}
			}
		}
	}

	.qrcodeItem {
		padding: 40rpx 30rpx;
		width: 480rpx;

		background-color: #fff;
		border-radius: 8rpx;

		.title {
			text-align: center;
			margin-bottom: 12rpx;
		}
	}

	.topBoxContent {
		color: white;
		font-size: 28rpx;
		// background: linear-gradient(360deg, #A59FFF 0%, #3258FF 100%);
		height: 520rpx;
		position: relative;

		.dateBox {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			.item {
				flex: 1;
				text-align: center;
			}

			.item2 {
				border-left: 1px dashed white;
				// border-right: 1px dashed white;
			}
		}
	}

	.progressBox {
		width: 300rpx;
		height: 300rpx;
		position: relative;
		text-align: center;
		margin: 0px auto 50rpx;

		.title1 {
			padding-top: 48rpx;
		}

		.title2 {
			font-size: 66rpx;
			margin: 12rpx 0;

			.unit {
				font-size: 40rpx;
			}
		}

		.status {
			width: 104rpx;
			height: 104rpx;
			background: #8fda5c;
			border-radius: 24rpx;
			display: inline-block;
			line-height: 50rpx;
		}

		.redStatus {
			background: #ea6868;
		}

		.progressLine {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.weatherBox {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		text-align: center;

		.top {
			font-size: 54rpx;
			display: flex;
			align-items: center;
		}

		.weatherIcon {
			width: 72rpx;
			height: 72rpx;
		}

		.bottom {
			font-size: 20rpx;
		}
	}

	.projectIndexPage {

		:deep(.uni-scroll-view-content) {
			background-image: url(@/static/bthgIcon/prjectIndex_bg3.png);
			background-repeat: no-repeat;
			background-size: 100%;
		}

		:deep(.headerBox) {
			background-color: transparent;
			border-bottom: none;
		}
	}

	.progressBox {
		width: 300rpx;
		height: 300rpx;
		position: relative;
		text-align: center;
		margin: 0px auto 48rpx;

		.title1 {
			padding-top: 48rpx;
		}

		.title2 {
			font-size: 66rpx;
			margin: 12rpx 0;

			.unit {
				font-size: 40rpx;
			}
		}

		.status {
			width: 104rpx;
			height: 50rpx;
			background: #8fda5c;
			border-radius: 24rpx;
			display: inline-block;
			line-height: 50rpx;
		}

		.redStatus {
			background: #ea6868;
		}

		.progressLine {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.weatherBox {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		text-align: center;

		.top {
			font-size: 54rpx;
			display: flex;
			align-items: center;
		}

		.weatherIcon {
			width: 72rpx;
			height: 72rpx;
		}

		.bottom {
			font-size: 20rpx;
		}
	}

	.moudleBox2 {
		opacity: 0.6;
	}

	.moudleBox {
		overflow: hidden;
		margin-top: 20rpx;
		// margin: 40rpx 11px;
	}

	.moudleItem {
		float: left;
		width: 33.33%;
		font-size: 26rpx;
		text-align: center;
		margin-bottom: 20rpx;

		.inner {
			border: 1px solid rgba(18, 41, 75, 0.06);
			padding: 30rpx 0 30rpx;
			margin: 0 10rpx;
			border-radius: 10rpx;
			position: relative;
		}

		.img {
			// width: 80rpx;
			// height: 80rpx;
			// width: 64rpx;
			// height: 64rpx;
			width: 88rpx;
			height: 88rpx;
			color: red;
		}

		.desc {
			margin-top: 12rpx;
			color: rgba(38, 45, 71, 0.77);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.moudleTitle {
		color: rgba(42, 43, 91, 0.5);
		font-size: 26rpx;
		margin: 0px 0 30rpx;
		text-align: center;
	}

	.smallHeight {
		// padding-bottom: 63px;
		// height: calc(100% - 126rpx);
		height: 100%;
	}

	.moudleContent {
		// box-shadow: 0px 8rpx 32rpx 0px rgba(212, 220, 236, 0.59);
		border-radius: 16rpx;
		padding: 30rpx;
		// margin: 110rpx 30rpx 30rpx;
		position: relative;
		z-index: 2;
	}

	.projectIndexBG {
		width: 100%;
		height: 714rpx !important;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>