<template>
	<view>
		<view class="amms-nav-container main-font-color" :style="customStyle">
			<view class="amms-nav-bar" :style="style">
				<view class="amms-action left" @tap="tapBackPage" v-if="isBack">
					<image src="../../static/img/ammsHome/navback.png" class="amms-action" mode="aspectFit"></image>
					<slot name="backText"></slot>
				</view>
				<view class="amms-action left" v-if="footIs">
					<slot name="backText"></slot>
				</view>
				<view class="amms-content">
					<slot name="content"></slot>
				</view>
				<view class="amms-action right" style="width: auto;">
					<view class="amms-action-item" @tap="tapChangePage" v-if="showChange">
						<image src="../../static/img/ammsHome/change.png" class="amms-action" mode="aspectFit"></image>
						<slot name="right"></slot>
					</view>
					<view class="amms-action-item" @tap="tapToPage" v-if="showTextTap">
						<text v-if="textPage">{{ textPage.text }}</text>
						<slot name="right"></slot>
					</view>
					<view class="amms-action-item" @tap="footChang" v-if="footIs">
						<image src="../../static/img/ammsHome/setting.png" class="amms-action-item" style="width: 44rpx;" mode="aspectFit"></image>
					</view>
					<view class="amms-content" @tap="confirm" v-if="showSure">
						<text style="font-size: 30rpx;">确定</text>
					</view>
				</view>
			</view>
			<uni-popup ref="alertDialog" type="center">
				<view class="popup-content">
					<view class="bg-white border-rad">
						<view class="flex align-center justify-center font26 padding border-b-ddd">
							跳转至页面
						</view>
						<view class="flex justify-center padding">
							<uni-data-checkbox mode="tag" v-model="jumpUrl"
								:localdata="multiplePath"></uni-data-checkbox>
						</view>
						<view class="flex align-center justify-between padding">
							<view class="main-button-kong text-center" style="width: 100%;margin-right:20rpx;"
								@tap="dialogClose">
								取消
							</view>
							<view class="main-button text-center" style="width: 100%;" @tap="dialogConfirm">
								确定
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, getCurrentInstance, inject } from 'vue';
	import { request } from '@/utils/request';
	// import {
	// 	onReady,
	// 	onShow
	// } from '@dcloudio/uni-app';
	import uniPopup from '../../uni_modules/uni-popup/uni-popup.vue';
	const { proxy } = getCurrentInstance();
	const statusBar:any = inject('statusBarHeight');
	const customBar:any = inject('CustomBar');
	const jumpUrl = ref('');
	const style = computed(() => {
		// #ifdef APP-PLUS
		return `height:${customBar}px;padding-top: ${statusBar}px;`
		// #endif
		// #ifdef H5
		return 'margin-top: 0rpx;'
		// #endif
	})
	const customStyle = computed(() => {
		// #ifdef APP-PLUS
		return `height: ${customBar}px;`
		// #endif
		// #ifdef H5
		return 'height: 100rpx;'
		// #endif
	})
	console.log(getCurrentInstance())
	
	const props = defineProps({
		bgColor: {
			type: String,
			default: 'bg-white-cu'
		},
		isBack: {
			type: [Boolean, String],
			default: true
		},
		bgImage: {
			type: String,
			default: ''
		},
		showUser: {
			type: [Boolean, String],
			default: true
		},
		showChange: {
			type: [Boolean, String],
			default: false
		},
		showTextTap: {
			type: [Boolean, String],
			default: false
		},
		footIs: {
			type: [Boolean, String],
			default: false
		},
		showSure: {
			type: [Boolean, String],
			default: false
		},
		changePath: {
			type: Object,
			default: null
		},
		multiplePath: {
			type: Array,
			default: () => {
				return []
			}
		},
		textPage: {
			type: Object,
			default: null
		}
	});


	function dialogConfirm() {
		// const leftImgs = ref('../../static/image/return.png');
		// const rightImgs = ref('../../static/image/set_up.png');
		uni.navigateTo({
			url: '.' + jumpUrl.value
		})
	}
	function dialogClose() {
		proxy.$refs.alertDialog.close();
	}
	function tapBackPage() {
		uni.navigateBack({
			delta: 1
		});
	}
	function confirm() {
	    let arr = uni.getStorageSync('workListData') || [];
	    let initData: any = [];
		arr?.map((item: any) => {
			initData.push({
				menuId: item.menuId
			})
		});
	
		uni.showLoading({ mask: true });
		request({
			method: 'post',
			url: 'appmenu-saveMenuCollect',
			data: initData,
		}).then((res: any) => {
			uni.hideLoading();
			if (res.code == 0) {
				uni.showToast({
					title: '成功！',
					icon: 'none'
				});
				uni.removeStorageSync('workListData');
				uni.$emit('menuList', null);
				uni.navigateBack()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		}).catch((err: any) => {
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
			uni.hideLoading();
		});
	}
	function tapGoPersonalCenterPage() {
		// 若存在window对象，则可以判断当前为使用H5的方式打开，记录下跳转前的页面地址
		if (typeof (window) != 'undefined') {
			let _redirectUrl = location.hash.split('#')[1]
			uni.setStorageSync('preUrl', _redirectUrl)
		}
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}
	function tapChangePage() {
		if (props.changePath) {
			uni.showModal({
				title: '提示',
				content: `是否切换跳转至${props.changePath.name}`,
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '.' + props.changePath.path
						})
					}
				}
			});
		}
		if (props.multiplePath.length > 0) {
			proxy.$refs.alertDialog.open();
		}
	}
	function tapToPage() {
		uni.navigateTo({
			url: '.' + props.textPage.url
		})
	}
	function footChang() {
		uni.navigateTo({
			url: '/pages/home/components/stagingSettings'
		})
	}
</script>

<style lang="less" scoped>
	/deep/.uni-data-checklist .checklist-group {
		justify-content: center;
	}

	/deep/.uni-popup__wrapper-box {
		width: 80%;
	}

	.action {}

	.bg-white-cu {
		background-color: #fff;
	}

	.content {
		font-size: 36rpx;
		color: #fff;
	}

	.amms-nav-container {
		width: 100%;
		background: linear-gradient(-90deg, #168AFF 0%, #0E57FF 100%);
		box-sizing: border-box;
		position: relative;
		
		.amms-nav-bar{
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100rpx;
			background: linear-gradient(-90deg, #168AFF 0%, #0E57FF 100%);
			box-sizing: border-box;
			color: #ffffff;
			padding: 20rpx;
			z-index: 99;
			.amms-action{
				min-width: 44rpx;
				height: 44rpx;
				position: absolute;
				
				&.left{
					left: 20rpx;
				}
				&.right{
					right: 20rpx;
				}
				.amms-action-item{
					min-width: 44rpx;
					height: 44rpx;
					flex-shrink: 0;
				}
			}
			.amms-content{
				display: inline-block;
				font-size: 36rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
</style>