<template>
	<view class="gather">
		<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
			icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
		<view class="business com special_work" v-if="jurisdiction == false">
			<view class="title project">
				<view>更多功能</view>
				<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
				<view v-else class="edit" @click="editComfirm">完成</view>
			</view>
			<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>
							<text class="text">{{ item.name }}</text>
						</view>
					</u-transition>
				</block>
				<view v-else-if="!editFlag" @click="editFlag = true"
					style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</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>
						<text class="text">{{ item.name }}</text>
					</view>
				</u-transition>
			</view>
		</view>
	</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 {
				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: {
			scrolling() {
				// 滚动条距文档顶部的距离
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				// 滚动条滚动的距离
				let scrollStep = scrollTop - this.oldScrollTop;
				// console.log("header 滚动距离 ", scrollTop);
				// 更新——滚动前，滚动条距文档顶部的距离
				this.oldScrollTop = scrollTop;

				//变量windowHeight是可视区的高度
				let windowHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				let scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;

				//滚动条到底部的条件
				if (scrollTop + windowHeight == scrollHeight) {
					//你想做的事情
					// console.log("header  你已经到底部了");
				}


				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


				}


			},
      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.push({
						name: '大屏控制',
						icon: '/static/applet/dp.png',
						data: {
							id: '__UNI__83ABA97',
							url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231016/20231016112144fac6d9128.wgt',
						},
						type: 4,
					})
				}
			},
			// 初始化菜单
			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 = [];
          console.log(e);
				}
			},
			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;
				}

				.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>