/*
* 注意：
* 1、在傳入寬度或者高度時，如果是Number數據，傳入的值為px大小,無需帶單位，組件自動計算
* 2、在使用此導航欄時，建議傳入UI規定的導航欄高度，此高度只針對除微信小程序的其他平臺有效，微信小程序的導航欄高度，組件自計算
*/
<template>
	<view>
		<!-- 微信小程序頭部導航欄 -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- :style="{backgroundImage:'url(' + (channelInfo.img ? channelInfo.img : defaultImg) + ')'}" -->

		<view class="wx-head-mod" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor,backgroundImage:'url('+navBackgroundImage+')',backgroundRepeat:'no-repeat',backgroundSize:'100%'}">
			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<view class="wx-head-mod-nav-content"
					:style="{height:customHeight+'rpx',justifyContent:textAlign === 'center'?'center':'left',textAlign:textAlign === 'center'?'center':'left'}">
					<!-- 背景圖 -->
				<!-- 	<view>
						<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
					</view> -->
					<!-- 文本區 -->
					<view class="wx-head-mod-nav-content-mian"
						:style="{width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">
						{{textCon}}
					</view>
					<!-- 返回按鈕 -->
					<view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}"
						@click="backEvent">
						<view class="wx-head-mod-nav-content-back-img" v-if="backImageUrl!==''"
							:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
							<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="other-head-mod-mian-back-img" v-else>
							<uni-icons  type="back" size="30" :color="backColor"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
 
		<!-- 除微信小程序之外的其他設備 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="other-head-mod"
			:style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="other-head-mod-mian"
				:style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign === 'center'?'center':'left'}">
				<!-- 返回按鈕 -->
				<view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent">
					<view class="other-head-mod-mian-back-img"
						:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}" >
						<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<!-- 標題 -->
				<view class="other-head-mod-mian-title" :style="{width:windowWidth - 184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',
					paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
					fontWeight:fontWeight,color:titleColor}">
					{{textCon}}
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>
 
<script>
	const app = getApp()
	import {systemInfo} from '@/libs/systeminfo.js'
	export default {
		props: {
			backColor: { //返回按鈕顏色
				type: String,
				default: '#fff'
			},
			// 文本區域位置 left：左  center：中  
			textAlign: {
				type: String,
				default: 'center'
			},
			// 文本區內容
			textCon: {
				type: String,
				default: '測試'
			},
			// 文本區離左邊的距離
			textPaddingLeft: {
				type: Number,
				default: 0
			},
			// 是否需要返回按鈕
			isBackShow: {
				type: Boolean,
				default: false
			},
			// 文本區字體大小
			fontSize: {
				type: Number,
				default: 16 //px
			},
			// 文本區字體粗細
			fontWeight: {
				type: Number,
				default: 500
			},
			// 文本區返回按鈕圖片寬
			backImageWidth: {
				type: Number,
				default: 12 //px
			},
			// 文本區返回按鈕圖片高
			backImageHeight: {
				type: Number,
				default: 24 //px
			},
			// 返回按鈕圖標路徑
			backImageUrl: {
				type: String,
				default: ''
			},
			// 導航欄整體背景顏色
			navBackgroundColor: {
				type: String,
				default: '#2476F9'
			},
			navBackgroundImage: {
				type: String,
				default: require('@/static/image/bg.png')
			},
			// 標題字體顏色
			titleColor: {
				type: String,
				default: '#ffffff',
			},
 
			/******** h5端，app端需要傳入自定義導航欄高度 *******/
			navHeightValue: {
				type: Number,
				default: 44 //px
			},
			IsnavHeight: { //是否導航欄高度
				type: Boolean,
				default: true
			}
		},
		computed: {
			// 文本區寬度
			navTextWidth() {
				if (this.textAlign === 'center') {
					return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'
				} else {
					return this.menubarLeft + 'rpx'
				}
			},
			// 文本區paddingLeft
			textPaddingleft() {
				if (this.textAlign === 'center') {
					return '0'
				} else {
					return this.textPaddingLeft + 'rpx'
				}
			}
		},
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight, //狀態欄高度
				navHeight: app.globalData.navHeight, //頭部導航欄總體高度
				navigationBarHeight: app.globalData.navigationBarHeight, //導航欄高度
				customHeight: app.globalData.customHeight, //膠囊高度
				scaleFactor: app.globalData.scaleFactor, //比例系數
				menubarLeft: app.globalData.menubarLeft, //膠囊定位的左邊left
				windowWidth: app.globalData.windowWidth * app.globalData.scaleFactor
			};
		},
		methods: {
			backEvent() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		mounted() {
			console.log(this.textCon,'mmmmmm')
			/* 獲取設備信息 */
			const SystemInfomations = systemInfo()
			/* 通用平臺 */
			this.statusBarHeight = SystemInfomations.statusBarHeight //狀態欄高度
			this.scaleFactor = SystemInfomations.scaleFactor //比例系數
			this.windowWidth = SystemInfomations.windowWidth //當前設備的屏幕寬度
			/* 微信小程序平臺 */
			// #ifdef MP-WEIXIN
			this.navHeight = this.IsnavHeight ? (SystemInfomations.navHeight + SystemInfomations.statusBarHeight+180)  : 0//頭部導航欄總高度
			this.navigationBarHeight = SystemInfomations.navHeight//頭部導航欄高度
			console.log(this.navigationBarHeight)
			this.customHeight = SystemInfomations.menuButtonHeight //膠囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //膠囊左邊界距離左上角的距離
			// #endif
			
		}
	}
</script>
 
<style scoped lang="scss">
	/* #ifdef MP-WEIXIN */
	.wx-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
 
	.wx-head-mod-nav {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
 
	}
 
	.wx-head-mod-nav-content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
	}
 
	/* 文本區 */
	.wx-head-mod-nav-content-mian {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
 
	/* 返回按鈕 */
	.wx-head-mod-nav-content-back {
		box-sizing: border-box;
		width: 60rpx;
		height: 100%;
		/* background-color: aqua; */
		position: absolute;
		top: 0;
		left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}
 
	.wx-head-mod-nav-content-back-img {
		box-sizing: border-box;
	}
 
	/* #endif */
 
	/* #ifndef MP-WEIXIN */
	.other-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
 
	.other-head-mod-mian {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
		position: absolute;
		left: 0;
		bottom: 0;
	}
 
	/* 返回按鈕 */
	.other-head-mod-mian-back {
		box-sizing: border-box;
		height: 100%;
		width: 60rpx;
		position: absolute;
		left: 32rpx;
		top: 0;
		display: flex;
		align-items: center;
	}
 
	/* 標題 */
	.other-head-mod-mian-title {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
 
	/* #endif */
</style>