<template>
	<view class="gather">


		<view v-if="isFshow">
			<view class="site-box flex_a_c_j_sb" :style="{ 'opacity': backColor,}" @click="selectLocation">
				<view :class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']" @click="selectLocation">
					<view :class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']" style=" margin-left: 20rpx">
					</view>
					<view class="town_name">{{ street }}</view>
				</view>
				<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
					<view :class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"></view>
				</navigator>
			</view>

		</view>
		<view class="" v-if="!isFshow">
			<view class="site-box1 flex_a_c_j_sb">

				<view class="place_wrapper flex_a_c" @click="selectLocation">
					<view class="iconfont icon-weizhi"></view>
					<view class="town_name">{{street}}</view>
				</view>
				<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
					<view class="iconfont icon-xiaoxi" style="color:#fff;"> </view>
				</navigator>
			</view>
		</view>



		<zbpSwiper :isSelectPlace="true" :location_Arr="locationArr" :town="street" @kkchange="kkchange"></zbpSwiper>
		<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.type, item.data)
              ">
							<image class="icon_img" :src="item.icon" 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.icon" mode="aspectFit">
						</image>
						<u-icon class="icon" name="plus-circle-fill"></u-icon>
						<text class="text">{{ item.name }}</text>
					</view>
				</u-transition>
			</view>
		</view>

	
		<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
			@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
		<!-- <m-tabbar native>
		      <template v-slot:tabbar_index_2>
		        <view class="custom_style">
		          <view class="custom_style_icon"></view>
		        </view>
		      </template>
		    </m-tabbar> -->
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import mTabbar from '@/components/m-tabbar/m-tabbar.vue'

	import zbpSwiper from '@/components/zbpSwiper'
	import {
		getArea,
		getStreet
	} from '@/api/article.js';
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		getWorkArticleCount,
		getSlideAPI
	} from '@/api/article.js'
	import {
		getStoreList,
		getUserInfo
	} from '@/api/user.js'
	import {
		getGeocoder,
		microSeachBarCode,
		microEadtProduct
	} from '@/api/store.js'
	import {
		Toast
	} from '@/libs/uniApi';
	import {
		getDiy
	} from '@/api/api.js';
	// #ifdef APP-PLUS
	import uniMP from '@/utils/uniMP.js';
	// #endif

	export default {
		components: {
			mTabbar,
			zbpSwiper
		
		},
		data() {
			return {
				locationArr: ({}),
				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,
				bgColor: '',
				isFshow: false,
				street: '',
				// 编辑中标记
				editFlag: false,
				// 所有菜单的按钮
				AllMenuList: [{
						name: '商户平台',
						icon: '/static/applet/shop_app.png',
						data: '/pages/moreProject/moreProject',
						type: 2,
					},
					{
						name: '供销平台',
						icon: '/static/applet/gx_app.png',
						data: '__UNI__B5B1EDD',
						type: 1,
					},
				],
				nowMenuList: [],
				street: '',
				showPicker: false,
				columnData: [],
				bgColor: '',
				isFshow: false,
				backColor: 'rgba(252, 252, 252, 0)'
			};
		},
		computed: {
			...mapGetters(['userInfo', 'location', 'isLogin'])
		},
		created() {},
		onLoad() {
			this.Area()
			this.initMenu();
		},

		onShow() {
			if (this.isLogin) {
				this.emptyText = '暂无可用应用'
				this.jurisdiction = false
			} else {
				this.emptyText = '请登录'
				this.jurisdiction = true
			}
			this.getUserInfo()

		},

		onPullDownRefresh() {
			this.getUserInfo()
			uni.stopPullDownRefresh()
		},
		beforeDestroy() {
			// 销毁监听事件
			this.$bus.$off('value-updated')
		},
		mounted() {
			if (this.street.length <= 0) {
				this.appLocation()
			}
			// #ifdef  H5
			// 监听页面滚动事件
			window.addEventListener("scroll", this.scrolling);
			// #endif

			this.$bus.$on('value-updated', (newValue) => {
				// 更新父组件的值 
				this.street = newValue.split(',')[0]
			});

		},
		// #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

		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


				}


			},
			// 初始化菜单
			initMenu() {
				let now = uni.getStorageSync('gatherNowMenuList');
				try {
					this.nowMenuList = JSON.parse(now);
					this.AllMenuList = this.AllMenuList.filter((item) => {
						return this.nowMenuList.find(t => t.name == item.name)?.name != item.name;
					})
				} catch (e) {
					this.nowMenuList = [];
				}
			},
			clickMenu(e, data) {
				switch (e) {
					case 1:
						this.getUniMp(data);
						break;
					case 2:
						this.navigator(data);
						break;
				}
			},
			// 添加菜单
			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('gatherNowMenuList', JSON.stringify(this.nowMenuList));
			},
			getUniMp(appid) {
				console.log('点击供销平台');
				// #ifdef APP-PLUS
				uniMP.loadMP(appid);
				return;
				// #endif
				uni.showToast({
					icon: 'none',
					title: 'H5不支持打开小程序'
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					getStreet({
						area_code: value[0]['code']
					}).then(res => {
						this.$refs.uPicker.setColumnValues(1, res.data);
					});
				}
			},

			Area() {
				getArea({
					city_code: 510500
				}).then(res => {
					this.$refs.uPicker.setColumnValues(0, res.data);
					this.Street(res.data[0]['code']);
				});
			},
			Street(code) {
				getStreet({
					area_code: code
				}).then(res => {
					this.$refs.uPicker.setColumnValues(1, res.data);
				});
			},
			selectLocation() {
				this.showPicker = true
			},
			confirm(e) {
				this.street = e.value[1].name

				this.$nextTick(() => {
					this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);

				})
				this.showPicker = false
			},
			appLocation() {
				uni.getLocation({
					type: 'wgs84',
					timeout: '10',
					success: (res) => {
						// console.log(res)
						this.isshow = false
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							let town = res.data.address_reference.town.title
							let street_id = res.data.address_reference.town.id
							this.street = res.data.address_component.street
							this.$nextTick(() => {
								this.$bus.$emit('value-updated', this.street + ',' +
									street_id);

							})

						}).catch(err => {
							this.isshow = false
							uni.showToast({
								title: err,
								icon: 'none'
							})
						})
					},
					fail: (err) => {
						this.isshow = false

					}
				});
			},


			kkchange(e) {
				this.bgColor = e
			},

			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;
					// 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);
					}
					// console.log(that.userInfoData);
				});
			}
		}
	};
</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;
		margin-top: 52.63rpx;
		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;
	}
</style>