<template>

	<view>

		<!-- 左侧布局 -->

		<!-- 居中布局 -->
		<!-- ②这里不使用props改用data -->
		<view :v-if="style==='center'" class="_navLayout"
			:style="{'background': navBackground,'height':navStatusHeight}">
			<!-- 状态栏 -->
			<view :style="{'height':statusBarHeight}"></view>
			<!-- 导航栏,去掉了不可用的宽度 -->
			<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}">
				<!-- 按键区域，占用为不可用的宽度 -->
				<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}">
					<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image>
				</view>
				<!-- 标题布局 -->
				<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
					{{navTitle}}
				</view>
			</view>
		</view>

		<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>

	</view>
</template>

<script>
	/**
	 * 全局默认背景透明，supportChange= false 会对默认色变成不透明
	 */
	const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)";
	let style = 'center'

	export default {
		name: "NavBar",
		props: {
			color: {
				type: String,
				default: "white"
			},
			// 标题
			navTitle: {
				type: String,
				default: ""
			},
			// 是否支持透明
			supportChange: {
				type: Boolean,
				default: true
			},
			// 背景色
			// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
			navBg: {
				type: String,
				default: defaultTransparentBg
			},
			// 渐变开始的高度 0->1
			startChangeHeight: {
				type: Number,
				default: 0
			},
			// 渐变停止的高度
			// ->1
			endChangeHeight: {
				type: Number,
				default: 0
			},
			// 显示icon
			showIcon: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// ①用一个新的变量接收props属性
				navBackground: this.navBg,
				navStatusHeight: 0,
				statusBarHeight: 0,
				navHeight: 0,
				disableWidth: 0,
				enableWidth: 0,
				enableHeight: 0,
				fontSize: 0,
			};
		},
		mounted() {
			// mounted能拿到data值
			if (!this.supportChange) {
				if (this.navBg === defaultTransparentBg) {
					// 使用默认的时候由于是全透明，需要改成不透明
					// ③达到修改props属性的结果
					this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)")
				}
			}
		},
		created() {
			// create阶段能拿取到了props的值,需要使用this.变量名
			// 但是拿不到data的值
			// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
			let navInfo = getApp().globalData.navInfo
			// 赋值全局样式
			style = navInfo.navBar.style
			// 总高度
			this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit
			this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit
			this.navHeight = navInfo.navBar.height + navInfo.unit
			this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit
			this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit
			this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit
			this.fontSize = navInfo.navBar.fontSize + navInfo.unit
			console.log(this);
		},
		methods: {
			/**
			 * 自定义颜色渐变的值
			 */
			alpha(res) {
				if (!this.supportChange)
					return '1.0'
				if (res.scrollTop > this.startChangeHeight) {
					// 可以开始变化了
					if (res.scrollTop < this.endChangeHeight) {
						return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
					} else {
						// 保持长显示
						return '1.0'
					}
				} else {
					// 保持无色
					return '0.0'
				}
			},
			/**
			 * 提供默认的颜色变化功能
			 */
			defaultColorBgAlpha(res) {
				let x = this.alpha(res)
				this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x +
					") 0.75%,rgba(255,177,118," + x + ") 99.78%)"
			},
			clickIcon() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	._navLayout {
		display: flex;
		flex-direction: column;
		width: 100%;
		z-index: 999;
		top: 0;
		position: fixed;
	}

	._nav-real {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
	}

	._nav-title {
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		width: 100%;
		color: white;
	}

	._navIcon {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 3px;
	}
</style>