<script>
	import configs from 'common/configs.js'
	import {
		version
	} from './package.json'
	import {
		formatWebUrl
	} from '@/common/util.js'

	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'

	export default {
		// 建议使用vuex
		globalData: {
			isAlertToLogin: false,
		},
		methods: {
			// 初始化拦截器
			initInterceptorRequest() {
				// 添加接口拦截器
				uni.addInterceptor('request', {
					invoke: (args) => {
						// request 触发前拼接 url 
						// args.url = configs.HOST_DOMAIN + args.url;
						args.url = formatWebUrl(args.url, configs.HOST_DOMAIN);
						args.timeout = 20 * 1000;

						// 给每个接口插入token
						// const token = uni.getStorageSync('token') || '';
						// const token = this.globalData.token || uni.getStorageSync('token') || '';
						const token = this.$store.state.common.token;
						if (token && token != "null") {
							if (!args.header) args.header = {};
							args.header['mobiletoken'] = `${token}`;
						}
					},
					success: (res, args) => {
						if (res?.data?.code === 10000005) return this.handleAlertToLogin(res, args)
					},
					fail: (err, args) => {
						console.error('uni.addInterceptor - fail', err, args)
					}
				})
			},

			// 初始化拦截器
			initInterceptorUpload() {
				// 添加文件上传拦截器
				uni.addInterceptor('uploadFile', {
					invoke: (args) => {
						// request 触发前拼接 url 
						// args.url = configs.HOST_DOMAIN + args.url;
						args.url = formatWebUrl(args.url, configs.HOST_DOMAIN);

						// 给每个接口插入token
						// const token = this.globalData.token || uni.getStorageSync('token') || '';
						const token = this.$store.state.common.token;
						if (token && token != "null") {
							if (!args.header) args.header = {};
							args.header['mobiletoken'] = `${token}`;
						}
					}
				})
			},

			/**
			 * 重新登录
			 * 
			 * @todo 防止多接口并发
			 */
			handleAlertToLogin(res, args) {
				if (this.isAlertToLogin) return;
				this.isAlertToLogin = true;
				// 清除token
				this.$store.commit('common/updateState', {
					keyname: 'token',
					data: null
				});
				uni.showToast({
					icon: 'error',
					title: res?.data?.message || '请重新登录',
					mask: true,
					duration: 800,
					success: () => {
						setTimeout(() => {
							this.isAlertToLogin = false;
							// 关闭当前页面跳转首页
							uni.reLaunch({
								url: '/pages/launch/index'
							});
						}, 800)
					}
				});
			},
		},

		onLaunch: function() {
			// #ifdef H5
			console.log(
				`%c hello uniapp %c v${version} `,
				'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
				'background:#007aff ;padding: 1px; border-radius: 0 3px 3px 0;  color: #fff; font-weight: bold;'
			)
			// #endif

			// 初始化拦截器
			this.initInterceptorRequest();
			this.initInterceptorUpload();

			// 更新升级
			// checkUpdate();
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
	}
</script>

<style lang="scss">
	/* 阿里云图标库 */
	@import '@/static/iconfont/iconfont.css';
	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
	@import './common/uni.css';
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	// 自定义的公共样式
	@import '@/common/global-style.scss';

	// 设置整个项目的背景色
	page {
		// font-family: SourceHanSansCN, SourceHanSansCN;
		font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, Roboto,
			'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Source Han Sans',
			'Noto Sans CJK Sc', 'Microsoft YaHei', 'Microsoft Jhenghei', sans-serif;
		background-color: #F7F7F7;
		color: $uni-text-color;
		letter-spacing: 2rpx;
		overflow: auto;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}

	.line-height {
		line-height: 1;
	}

	.global-border-top {
		&::before {
			content: '';
			display: block;
			height: 1rpx;
			background-color: #E0E0E0;
			position: absolute;
			top: 0;
			left: 30rpx;
			right: 30rpx;
		}

		&.fill {
			&::before {
				left: 0;
				right: 0;
			}
		}
	}

	.global-border-bottom {
		&::after {
			content: '';
			display: block;
			height: 1rpx;
			background-color: #E0E0E0;
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 0;
		}

		&.fill {
			&::after {
				left: 0;
				right: 0;
			}
		}
	}

	// 全局表单样式
	.global-form {
		.list-line {
			padding: 0 !important;
		}

		.uni-forms-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E0E0E0;
			margin-bottom: 0 !important;

			&:last-child {
				border-bottom: 0;
			}
		}

		.uni-forms-item__label {
			font-weight: 500 !important;
			font-size: 26rpx !important;
			color: #333333 !important;
		}

		.uni-forms-item__error {
			padding-left: 10px;
			z-index: 1;

			&.msg--active {
				padding-top: 0;
				transform: translateY(-50%) !important;
			}
		}

		.uni-easyinput__content-textarea {
			height: 40px !important;
			min-height: 40px !important;
			padding-left: 10px;
			margin-top: 10px !important;
		}

		.uni-data-tree {
			.input-value {
				border: none !important;
			}
		}

		.list-line {
			height: 100%;
		}

		// 全局卡片+全局表单（组合样式）
		.global-card .uni-card__content {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}
	}

	// 全局卡片效果
	.global-card {
		padding: 0 !important;
		border-radius: $uni-border-radius-lg !important;
		box-shadow: none !important;
		border: none !important;

		/deep/.uni-card__content {
			padding: 30rpx !important;
		}

		.card-footer {
			border-top: 1rpx solid #E0E0E0;
			padding: 30rpx;
			text-align: right;
		}

		// 全局卡片+全局表单（组合样式）
		.uni-card__content>.global-form {
			margin-top: -30rpx;
			margin-bottom: -30rpx;
		}

		// 全局卡片+单行列表（组合样式）
		.uni-card__content>.list-line {
			padding-left: 0;
			padding-right: 0;
		}

		// 全局卡片+单行列表（组合样式）
		.uni-card__content>.list-line:first-child {
			margin-top: -30rpx;
		}

		// 全局卡片+单行列表（组合样式）
		.uni-card__content>.list-line:last-child {
			margin-bottom: -30rpx !important;
		}

		// // 全局卡片+全局表单（组合样式）
		// .uni-card__content>.uni-forms-item:first-child {
		// 	margin-top: -30rpx;
		// }

		// // 全局卡片+全局表单（组合样式）
		// .uni-card__content>.uni-forms-item:last-child {
		// 	margin-bottom: -30rpx !important;
		// }
	}

	// 左滑样式
	.global-swipe-action {
		overflow: hidden;

		.uni-swipe {
			margin-top: 30rpx;
			overflow: visible !important;
		}

		.uni-card {
			margin: 0 30rpx !important;
		}

		.swipe-action-btn-group {
			display: flex;
			align-items: center;

			.btn-theme {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				border-radius: 20rpx !important;
				margin-right: 30rpx;
				padding: 0 32rpx !important;
			}
		}
	}

	// 全局选项卡样式
	.global-tabbar {
		background-color: #fff;
		color: #333;

		.segmented-control__text {
			font-size: 32rpx !important;
		}
	}

	// 单行省略号
	.global-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	// 文本换行展示
	.global-textwrap {
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;
	}

	// 文字排版参考：https://element-plus.gitee.io/zh-CN/component/typography.html#%E5%AD%97%E5%8F%B7

	// 文字排版 - 标题字号 - 大一级
	.global-text-title-main {
		$font-size: 36rpx;
		line-height: $font-size * 1.6;
		font-weight: 600;
		font-size: $font-size;
		color: #333333;
	}

	// 文字排版 - 标题字号
	.global-text-title {
		$font-size: 32rpx;
		line-height: $font-size * 1.6;
		font-weight: 500;
		font-size: $font-size;
		color: #333333;
	}

	// 文字排版 - 标题字号 - 小一级
	.global-text-title-small {
		$font-size: 30rpx;
		line-height: $font-size * 1.6;
		font-weight: 500;
		font-size: $font-size;
		color: #333333;
	}

	// 文字排版 - 内容字号
	.global-text-body {
		$font-size: 30rpx;
		line-height: $font-size * 1.6;
		font-weight: 400;
		font-size: $font-size;
		color: #666666;
	}

	// 文字排版 - 内容字号 - 小一级
	.global-text-body-small {
		$font-size: 24rpx;
		line-height: $font-size * 1.6;
		font-weight: 400;
		font-size: $font-size;
		color: #333333;
	}

	// 文字排版 - 辅助字号
	.global-text-sup {
		$font-size: 20rpx;
		line-height: $font-size * 1.6;
		font-weight: 400;
		font-size: $font-size;
		color: #666666;
	}

	// 已废弃，建议使用class="global-form"
	// // 卡片效果
	// .global-aside-card {
	// 	background-color: #fff;
	// 	border-radius: $radius-large;
	// 	margin: $margin-space;
	// 	&.padding {
	// 		padding: $padding-space;
	// 	}
	// }

	// 已废弃，建议使用class="global-text-title"
	// // 标题
	// .title-text {
	// 	line-height: 48rpx;
	// 	font-size: 32rpx;
	// 	font-weight: 500;
	// 	color: #333333;
	// }

	// 已废弃，建议使用class="global-text-title-small"
	// // 二级标题
	// .sub-title-text {
	// 	line-height: 40rpx;
	// 	font-size: 28rpx;
	// 	font-weight: 400;
	// 	color: #333333;
	// }

	// 已废弃，建议使用class="global-text-body"
	// // 内容
	// .content-text {
	// 	line-height: 40rpx;
	// 	font-size: 28rpx;
	// 	font-weight: 400;
	// 	color: #999999;
	// }

	// 已废弃，建议使用<btn-theme type="primary">编辑</btn-theme>
	// .slot-button-edit {
	// 	width: 106rpx;
	// 	height: 100%;
	// 	background: #E0E0E0;
	// 	border-radius: 20rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-family: PingFangSC, PingFang SC;
	// 	font-weight: 500;
	// 	font-size: 26rpx;
	// 	color: #FFFFFF;
	// }

	// 已废弃，建议使用<btn-theme type="danger">删除</btn-theme>
	// .slot-button-del {
	// 	width: 106rpx;
	// 	height: 100%;
	// 	background: #FF7979;
	// 	border-radius: 20rpx;
	// 	margin: 0rpx 20rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-family: PingFangSC, PingFang SC;
	// 	font-weight: 500;
	// 	font-size: 26rpx;
	// 	color: #FFFFFF;
	// }

	// 已废弃，建议使用class="global-form"
	// .uni-forms-item__content {
	// 	line-height: 72rpx;
	// 	text-align: right;
	// }
</style>