<template>
	<view class="_header_all" v-if="headershow">
		<template v-if="mode=='title'">
			<view class="_header_title bg2" :style="{height:header_statusbar_height+'px'}"></view>
			<view class="_header_title bg2" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
				<view class="_header_btn">
					<view v-if="hasbackbtn" @tap="goback" class="_header_title_btn">
						<view class="itm _back"></view>
					</view>
					<view v-else @tap="gourl" :data-url="mainpage" class="_header_title_btn">
						<view class="itm _home"></view>
					</view>
				</view>
				<slot>
					<view class="_header_title_text" :style="{margin:'0 '+header_title_margin+'px'}">{{title}}</view>
				</slot>
			</view>
		</template>
		<template v-if="mode=='tran'">
			<view class="_header_title" :style="{height:header_statusbar_height+'px'}"></view>
			<view class="_header_title" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
				<view class="_header_btn">
					<view v-if="hasbackbtn" @tap="goback" class="_header_tran_btn">
						<view class="itm _back"></view>
					</view>
					<view v-else @tap="gourl" :data-url="mainpage" class="_header_tran_btn">
						<view class="itm _home"></view>
					</view>
				</view>
				<slot></slot>
			</view>
		</template>
		<template v-if="mode=='scroll'">
			<view :style="{opacity:opac}" style="background:linear-gradient(21deg, var(--e-headerbg1), var(--e-headerbg2));">
				<view class="_header_title" :style="{height:header_statusbar_height+'px'}"></view>
				<view class="_header_title" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
					<view class="_header_btn">
						<view v-if="hasbackbtn" @tap="goback" class="_header_title_btn">
							<view class="itm _back"></view>
						</view>
						<view v-else @tap="gourl" :data-url="mainpage" class="_header_title_btn">
							<view class="itm _home"></view>
						</view>
					</view>
					<slot>
						<view class="_header_title_text" :style="{margin:'0 '+header_title_margin+'px'}">{{title}}</view>
					</slot>
				</view>
			</view>
		</template>
	</view>
	<view :style="{height:seatheight+'px'}" v-if="headershow"></view>
</template>
<style scoped>
	._header_all {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 990;
		color: var(--txt9);
	}

	._header_title {
		position: relative;
		overflow: hidden;
	}

	._header_btn {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	._header_title_text {
		text-align: center;
		font-size: 1.2em;
	}

	._header_title_btn {
		padding: 0.3em;
		margin-left: 0.1em;
	}

	._header_title_btn>.itm {
		width: 1.5em;
		height: 1.5em;
	}


	._header_tran_btn {
		padding: 0.3em;
		margin-left: 0.3em;
		border-radius: 50%;
		background-color: #dddddd88;
	}

	._header_tran_btn>.itm {
		width: 1.5em;
		height: 1.5em;
	}

	._back {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTc0NC4zMzcyNTYzIDEwMTcuMTM2OTI0NDVjMTEuMTI4OTgzNyAwIDIyLjI3MDEwMzctNC4yNDc3MDM3IDMwLjc2NTUxMTExLTEyLjc0MzExMTEyIDE2Ljk5MDgxNDgyLTE2Ljk5MDgxNDgyIDE2Ljk5MDgxNDgyLTQ0LjU0MDIwNzQxIDAtNjEuNTE4ODg1OTJMMzQ1LjAyODgzNTU1IDUxMi44MDA5OTU1NSA3NzUuMTAyNzY3NDEgODIuNzM5MmMxNi45OTA4MTQ4Mi0xNi45Nzg2Nzg1MiAxNi45OTA4MTQ4Mi00NC41NDAyMDc0MSAwLTYxLjUxODg4NTkyLTE2Ljk5MDgxNDgyLTE2Ljk5MDgxNDgyLTQ0LjUyODA3MTExLTE2Ljk5MDgxNDgyLTYxLjUxODg4NTkzIDBMMjUyLjc0NDQzODUyIDQ4Mi4wNDc2MjA3NWE0My41MTQ2OTAzNyA0My41MTQ2OTAzNyAwIDAgMCAwIDYxLjUzMTAyMjIybDQ2MC44Mzk0NDI5NiA0NjAuODE1MTcwMzZjOC40ODMyNzExMSA4LjQ5NTQwNzQxIDE5LjYyNDM5MTExIDEyLjc0MzExMTExIDMwLjc1MzM3NDgyIDEyLjc0MzExMTEyeiI+PC9wYXRoPjwvc3ZnPg==");
	}

	._home {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIzMC40IDk5MmMtNjQgMC0xMTUuMi01MS4yLTExNS4yLTExNS4yTDExNS4yIDU0NCA3Ni44IDU4Mi40QzcwLjQgNTg4LjggNTcuNiA1OTUuMiA0NC44IDU5NS4yYy0xMi44IDAtMjUuNi02LjQtMzItMTIuOEM2LjQgNTY5LjYgMCA1NTYuOCAwIDU0NCAwIDUzNy42IDYuNCA1MjQuOCAxMi44IDUxMmw0NjcuMi00NjcuMkM0ODYuNCAzOC40IDQ5OS4yIDMyIDUxMiAzMnMyNS42IDYuNCAzMiAxMi44TDEwMTEuMiA1MTJDMTAxNy42IDUyNC44IDEwMjQgNTM3LjYgMTAyNCA1NDRjMCAxMi44LTYuNCAyNS42LTEyLjggMzItNi40IDYuNC0xOS4yIDEyLjgtMzIgMTIuOHMtMjUuNi02LjQtMzItMTIuOEw1MTIgMTQ3LjIgMjExLjIgNDQ4bDAgNDIyLjRjMCAxMi44IDEyLjggMjUuNiAyNS42IDI1LjZsMTE1LjIgMCAwLTE4NS42YzAtMjUuNiAxOS4yLTQ0LjggNDQuOC00NC44bDIzMC40IDBjMjUuNiAwIDQ0LjggMTkuMiA0NC44IDQ0LjhzLTE5LjIgNDQuOC00NC44IDQ0LjhMNDQxLjYgNzU1LjJsMCAxODUuNmMwIDI1LjYtMTkuMiA0NC44LTQ0LjggNDQuOEwyMzAuNCA5ODUuNnpNNjI3LjIgOTkyYy0yNS42IDAtNDQuOC0xOS4yLTQ0LjgtNDQuOCAwLTI1LjYgMTkuMi00NC44IDQ0LjgtNDQuOGwxNjAgMGMxMi44IDAgMjUuNi0xMi44IDI1LjYtMjUuNmwwLTI1NmMwLTI1LjYgMTkuMi00NC44IDQ0LjgtNDQuOCAyNS42IDAgNDQuOCAxOS4yIDQ0LjggNDQuOGwwIDI1NmMwIDY0LTUxLjIgMTE1LjItMTE1LjIgMTE1LjJMNjI3LjIgOTkyeiIgZmlsbD0iIzc3Nzc3NyI+PC9wYXRoPjwvc3ZnPg==");
	}
</style>
<script>
	export default {
		props: {
			mode: {
				type: String,
				default: 'title'
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				headershow: true,
				hasbackbtn: false,
				header_statusbar_height: 0,
				header_title_height: 40,
				header_title_margin: 0,
				mainpage: '',
				opac: 0,
			};
		},
		watch: {},
		computed: {
			seatheight() {
				if (this.mode == 'title')
					return this.header_statusbar_height + this.header_title_height;
				return 0;
			}
		},
		mounted() {
			//#ifdef H5
			if (process.env.NODE_ENV !== 'development') {
				this.headershow = false;
				return;
			}
			//#endif
			var app = getApp();
			this.header_statusbar_height = app.globalData._header_statusbar_height;
			this.header_title_height = app.globalData._header_title_height;
			this.header_title_margin = app.globalData._header_title_margin;
			this.mainpage = app.globalData.mainpage;
			if (getCurrentPages().length > 1)
				this.hasbackbtn = true;
			this.scrollname = this.title;
			if (this.mode == 'scroll')
				app.globalData.scrollcbs['header' + this.scrollname] = e => {
					var sc = e.scrollTop - this.header_statusbar_height - this.header_title_height;
					if (sc < 0) {
						this.opac = 0;
					} else if (sc < this.header_title_height) {
						this.opac = sc / this.header_title_height;
					} else {
						this.opac = 1;
					}
				}
		},
		unmounted() {
			if (this.mode == 'scroll')
				delete getApp().globalData.scrollcbs['header' + this.scrollname];
		},
		methods: {
			Getheight() {
				return this.seatheight;
			},
			goback() {
				uni.navigateBack();
			}
		}
	}
</script>