<style lang="scss" scoped>
	.gather {
		.gather-header {
			background-color: #40AE36;

			.location {
				height: 98rpx;
				padding: 0 28rpx;

				.box {
					height: 98rpx;
				}

				.town_name {
					color: #fff;
					margin-left: 18rpx;
					font-size: 30rpx;
				}
			}
		}

		.swiperBg {
			z-index: 1;

			.colorBg {
				position: absolute;
				left: 0;
				top: 0;
				height: 130rpx;
				width: 100%;
			}

			.page_swiper {
				position: relative;
				width: 100%;
				height: auto;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow-x: hidden;
				z-index: 8;
				padding: 0 10rpx;

				swiper-item {
					border-radius: 10rpx;
				}

				.swiper-item,
				image,
				.acea-row.row-between-wrapper {
					width: 100%;
					margin: 0 auto;
					border-radius: 10rpx;
				}

				swiper {
					width: 100%;
					display: block;
					height: auto;

					&.scalex {
						/deep/.uni-swiper-slide-frame {
							transform: translate(0, 0) !important;
						}
					}
				}

				image {
					transform: scale(0.93);
					transition: all 0.6s ease;
				}

				swiper-item.active,
				swiper-item.scalex {
					image {
						transform: scale(1);
					}
				}

				/*用来包裹所有的小圆点  */
				.dots {
					width: 156rpx;
					height: 36rpx;
					display: flex;
					flex-direction: row;
					position: absolute;
					left: 320rpx;
					bottom: 0;
				}

				/*未选中时的小圆点样式 */
				.dot {
					width: 16rpx;
					height: 6rpx;
					border-radius: 6rpx;
					margin-right: 6rpx;
					background-color: rgba(255, 255, 255, .4);

					/*选中以后的小圆点样式  */
					&.active {
						width: 32rpx;
						height: 6rpx;
						background-color: rgba(255, 255, 255, .4);
					}
				}
			}
		}

		.title-img {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 68rpx;
			margin-bottom: 40rpx;

			image {
				width: 340rpx;
				height: 42rpx;
			}

			.title {
				height: 42rpx;
				padding: 0 80rpx;
				font-size: 34rpx;
				color: $theme-color;
				font-weight: bold;
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-position: left center;
			}
		}
	}
</style>
<template>
	<view class="gather">
		<!--顶部定位-->
		<view class="gather-header">
			<view style="height: var(--status-bar-height);"></view>
			<view class="location">
				<view class="box flex_a_c_j_sb">
					<view class="place_wrapper flex_a_c" @click="changeMap">
						<view class="iconfont icon-weizhi" style="color:#fff;font-size:40rpx;"></view>
						<view class="town_name">{{street||'定位中' }}</view>
					</view>
					<view class="flex_a_c_j_sb">
						<navigator style="margin-right: 30rpx;" url="/pages/chat/customer_list/index?type=0"
							hover-class="none">
							<view class="iconfont icon-saoma" style="color:#fff;font-size:40rpx;"> </view>
						</navigator>
						<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
							<view class="iconfont icon-xiaoxi" style="color:#fff;font-size:40rpx;"> </view>
						</navigator>
					</view>
				</view>
			</view>
		</view>

		<!--轮播图-->
		<view class="swiperBg">
			<view class="swiper page_swiper">
				<swiper :autoplay="false" :circular="circular" :interval="intervals" :duration="duration"
					indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :current="swiperCur"
					style="height:330rpx;margin: 0 auto;width:710rpx;" @change="swiperChange"
					:class="{ scalex:isScale }">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
							<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
								<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e2f0520240203154207556.png"
									class="slide-image aa" style="height:330rpx;" mode="aspectFill">
								</image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="dots">
					<block v-for="(item,index) in imgUrls" :key="index">
						<view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
					</block>
				</view>
			</view>
		</view>

		<view class="title-img">
			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/807b8202403111125379295.webp" mode=""></image>
		</view>

		<view class="business com special_work" v-if="jurisdiction == false">
			<view class="content">
				<block v-if="nowMenuList.length > 0">
					<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
						<view class="examine" @click="editFlag ? removeMenu(item) : clickMenu(item)">
							<image class="icon_img" :src="item.pic" mode="aspectFit">
							</image>
							<!-- <u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon> -->
              <view v-if="editFlag" class="icon" style="background-color: red;">隐藏</view>
							<text class="text">{{ item.name }}</text>
						</view>
					</u-transition>
				</block>
				<view class="add-box examine"
					style="display: flex;justify-content: center;flex-direction: column;align-items: center;"
					@click="editFlag = true">
					<view class="add-box-icon"
						style="margin-bottom: 14rpx; width:84rpx;height:84rpx;border: 2rpx solid #40AE36;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;">
						<u-icon name="plus" size="25" :bold="true" color="#40AE36"></u-icon>
					</view>
					<text>添加应用</text>
				</view>
			</view>
		</view>
		<view v-if="editFlag" class="business com special_work edit_card">
			<view class="title project" style="padding: 0 28rpx">
				<view>编辑功能</view>
				<view class="edit2" @click="editComfirm">完成</view>
			</view>
			<view class="content">
				<u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
					<view class="examine" @click="pushMenu(item)">
						<image class="icon_img" :src="item.pic" mode="aspectFit"> </image>
						<!-- <u-icon class="icon" name="plus-circle-fill"></u-icon> -->
            <view class="icon">添加</view>
						<text class="text">{{ item.name }}</text>
					</view>
				</u-transition>
			</view>
		</view>
    <Loading></Loading>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		getStoreList,
		getUserInfo
	} from '@/api/user.js'
	import {
		Toast
	} from '@/libs/uniApi';
	import {
		applet
	} from '@/api/public.js';
	// #ifdef APP-PLUS
	import uniMP from '@/utils/uniMP.js';
	// #endif

	export default {
		data() {
			return {
				imgUrls: [{
					img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e2f0520240203154207556.png'
				}],
				locationArr: ({}),
				isshow: false,
				emptyText: '暂无可用应用',
				jurisdiction: false, // 是否有权限
				mer_id: '',
				userInfoData: {
					mer_info: {
						type_id: 0
					}
				},
				prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
				isShow: false,
				isFshow: false,
				street: '',
				// 编辑中标记
				editFlag: false,
				// 所有菜单的按钮
				AllMenuList: [],
				nowMenuList: [],
				street: '',
				showPicker: false,
				columnData: [],
				isFshow: false,
				backColor: 'rgba(252, 252, 252, 0)'
			};
		},
		computed: {
			...mapGetters(['userInfo', 'location', 'isLogin'])
		},
		created() {},
		onLoad() {},
		onShow() {
			if (this.isLogin) {
				this.emptyText = '暂无可用应用'
				this.jurisdiction = false
				this.initAllAppLet();
			} else {
				this.emptyText = '请登录'
				this.jurisdiction = true
			}
			this.getUserInfo();
		},
		onPullDownRefresh() {
			this.getUserInfo()
			uni.stopPullDownRefresh()
		},
		beforeDestroy() {},
		mounted() {

		},
		// #ifdef APP-PLUS
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			if (scrollTop <= 20) {
				this.backColor = 'rgba(252, 252, 252, 0)'
				this.isFshow = false
			} else if (20 < scrollTop && scrollTop <= 100) {
				this.backColor = 'rgba(252, 252, 252, .5)'
				this.isFshow = true
			} else if (scrollTop > 100) {
				this.backColor = 'rgba(252, 252, 252, 1)'
				this.isFshow = true
			}
		},
		// #endif
		onHide() {
			uni.$emit('showLoading', false);
		},
		methods: {
			initAllAppLet() {
				applet().then(res => {
					this.AllMenuList = res.data;
					this.initMenu();
					this.showControllerAllLet();
				}).catch(e => {
					console.log(e);
				})
			},
			// 根据类型来判断是否显示
			showControllerAllLet() {
				let user;
				if (typeof this.$store.state.app.userInfo == 'string') {
					user = JSON.parse(this.$store.state.app.userInfo)
				} else user = JSON.parse(JSON.stringify(this.$store.state.app.userInfo))
				if (!user?.show_controller_applet) {
					this.AllMenuList = this.AllMenuList.filter(item=>item.app_id!="__UNI__83ABA97"); //隐藏大屏控制
				}
			},
			// 初始化菜单
			initMenu() {
				let nowMenu = uni.getStorageSync('gatherMenuList');
				try {
					let list = JSON.parse(nowMenu || '[]');
					let now = [];
					let all = [];
					this.AllMenuList.forEach((item) => {
						if (list.find(t => t.name == item.name)?.name != item.name) all.push(item);
						else now.push(item)
					})
					this.AllMenuList = all;
					this.nowMenuList = now;
				} catch (e) {
					this.nowMenuList = [];
				}
			},
			clickMenu(data) {
				this.getUniMp(data);
			},
			// 添加菜单
			pushMenu(data) {
				this.nowMenuList.push(data);
				this.AllMenuList = this.AllMenuList.filter((item) => {
					return item.name != data.name;
				})
			},
			// 移除菜单
			removeMenu(data) {
				this.AllMenuList.push(data);
				this.nowMenuList = this.nowMenuList.filter((item) => {
					return item.name != data.name;
				})
			},
			// 编辑完成
			editComfirm() {
				this.editFlag = false;
				uni.setStorageSync('gatherMenuList', JSON.stringify(this.nowMenuList));
			},
			getUniMp(data) {
				let that = this;

				// #ifdef APP-PLUS
				if (data.version) return uniMP.loadAppletMP(data);
				else switch (data.type) {
					case 1:
						uniMP.loadMP(data.data);
						break;
					case 2:
						uniMP.loadMPx(data.data);
						break;
					case 3:
						uniMP.loadMPurl(data.data);
						break;
					case 4:
						uniMP.loadMPdns(data.data);
						break;
				}
				return;
				// #endif
				// #ifdef H5
				// if (type == 2) {
				// 	this.navigator(`/pages/moreProject/moreProject`);
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: 'H5不支持打开小程序'
				// 	})
				// }
				uni.showToast({
					icon: 'none',
					title: 'H5不支持打开小程序'
				})
				// #endif

			},
			navigator(url, t) {
				// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
				uni.navigateTo({
					url: url
				})
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfoData = res.data;
					that.$store.commit('SET_USERINFO', res.data);
					// console.log(res.data.service);
					if (res.data.service == null) {
						// console.log('123');
						this.isShow = false
					} else {
						this.isShow = true
						this.mer_id = res.data.service.mer_id
					}

					if (!res.data.mer_info) {
						that.$set(this, 'jurisdiction', false);
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.gather {
		padding-bottom: 164.91rpx;
		background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
		position: relative;
	}

	.sitebox {
		animation-name: fadeIn;
		animation-duration: 3s;
		animation-fill-mode: forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.site-box1 {
		width: 706rpx;
		/* #ifdef MP || APP-PLUS */
		height: 160rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 120rpx;
		/* #endif */
		margin-bottom: 26.32rpx;
		position: absolute;
		top: 45rpx;
		left: 20rpx;

		z-index: 999;

		// 位置
		.place_wrapper {
			color: #fff;
			margin-right: 0rpx;

			font-size: 30rpx;

			.town_name {
				margin-left: 21rpx;
			}
		}

		.iconfont {
			font-size: 35.09rpx;
		}
	}

	.site-box {
		width: 100%;
		/* #ifdef MP || APP-PLUS */
		height: 160rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 120rpx;
		/* #endif */
		margin-bottom: 26.32rpx;
		position: absolute;
		top: 0rpx;
		position: fixed;
		z-index: 999;
		/* #ifdef MP || APP-PLUS */
		padding-top: 75rpx;
		/* #endif */
		/* #ifdef H5 */
		padding-top: 25rpx;
		/* #endif */
		// background-color: #e5e5e5;
		// background: url("@/static/images/bg2.png") no-repeat;
		background-size: 100% 100%;
		padding-right: 20rpx;

		// 位置
		.place_wrapper {
			color: #fff;
			margin-right: 24.56rpx;
			font-size: 30rpx;

			opacity: 0;

			.town_name {
				margin-left: 21rpx;
			}
		}

		.iconfont {
			opacity: 0;
			font-size: 30rpx;
			font-size: 35.09rpx;
		}
	}

	.top_box {
		// padding-top: 180rpx;
		background: linear-gradient(#36a2ff, #fff);
	}

	.com {
		margin-left: 50%;
		transform: translate(-50%);
	}

	.business {
		width: 694.74rpx;
		// margin-bottom: 175rpx;
	}

	.special_work {
		// padding: 17.54rpx;
		width: 694.74rpx;
		padding-top: 30rpx;
		border-radius: 17.54rpx;
		// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);

		.title {
			font-size: 31.58rpx;
			font-weight: 700;
			margin-bottom: 38.6rpx;
		}

		.project {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.edit {
				font-size: 26rpx;
				font-weight: 400;

				&::after {
					content: ">";
					margin-left: 10rpx;
				}
			}

			.edit2 {
				font-size: 26rpx;
				font-weight: 400;
			}
		}

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

			.examine {
				margin-bottom: 35rpx;
				width: 173.68rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				// margin: 0 0 33.33rpx 33.33rpx !important;

				.icon_img {
					width: 83.16rpx;
					height: 83.16rpx;
				}

				.icon {
					position: absolute;
					top: -5rpx;
					right: 25rpx;
          background-color: green;
          color: #fff;
          border-radius: 50rpx;
          font-size: 22rpx;
          padding: 5rpx 10rpx;
				}

				.text {
					font-size: 26.32rpx;
					margin-top: 21.05rpx;
					color: #000;
				}
			}

			.text {
				font-size: 29.82rpx;
				color: #a4a4a4;
			}
		}

		.cont_jus {
			margin-top: 56.14rpx;
			justify-content: flex-start;

			&:first-child {
				// margin-right: 33rpx;
			}

			.examine {
				margin-right: 48rpx;

				&:first-child {
					margin-right: 48rpx;
				}
			}
		}
	}

	.edit_card {
		background-color: #fff;
		padding-top: 28rpx;
	}

	.rotate-box {
		transform: rotate(0deg);
		transition: transform .5s ease-out;
	}

	.rotate-box:active {
		transform: rotate(360deg);
	}

	// .location {
	// 	background-color: #f6f6f6;
	// 	width: 680rpx;
	// 	height: 150rpx;
	// 	position: absolute;
	// 	top: 0;
	// 	z-index: 9999;
	// 	border-radius: 20rpx;
	// 	left: 50%;
	// 	margin-left: -340rpx;
	// 	margin-top: 80rpx;
	// 	padding-left: 20rpx;

	// 	.locationa {
	// 		font-size: 28rpx;
	// 		color: #000;
	// 		font-weight: 500;
	// 		margin-top: 30rpx;
	// 		margin-bottom: 15rpx;
	// 	}

	// 	.locationb {
	// 		font-size: 20rpx;
	// 		color: #5a5a5a;
	// 	}

	// 	.locationx {
	// 		color: #000;
	// 		position: absolute;
	// 		top: 10rpx;
	// 		right: 20rpx;
	// 	}
	// }
</style>