<template>
	<div :style="style+'padding-top:'+statusBarHeight+'px'" >
		<div class="xcx-title flex-center" @click.stop="controlClick" :style="'height:'+height+'px;'">
			<span class="el-icon-arrow-left" :style="fhstyle" v-if="title.fh.s"></span>
			<p class="tit" v-if="title.title.s">
				<moduleText :text="title.title" :name="name" />
			</p>
			<!-- <img src="@/assets/xcx.png" alt="" /> -->
			<moduleBg :base="title.base" />
		</div>
	</div>

</template>

<script>
	import moduleText from './text.vue';
	import moduleBg from './bg.vue';
	export default {
		props: {
			'title': {
				type: Object
			},
			'name': {
				default: ''
			},
			'prev': {
				default: false
			}
		},
		components: {
			moduleText,
			moduleBg
		},
		data() {
			return {
				height: 50,
				statusBarHeight: 0
			}
		},
		created() {
			var _this = this;
			uni.getSystemInfo({
				success: function(e) {
					// #ifdef MP-WEIXIN
					var custom = uni.getMenuButtonBoundingClientRect();
					_this.height = custom.height+3*(custom.top-e.statusBarHeight);
					// #endif
					// 导航栏高度=状态栏高度+标题栏高度，标题栏高度=胶囊按钮高度+3*(胶囊按钮Top-状态栏高度)
					// #ifdef MP-ALIPAY
					var custom = e.titleBarHeight;
					_this.height = custom;
					// #endif
					// console.log(custom, e, "getSystemInfo")
					_this.statusBarHeight = e.statusBarHeight
				}
			})
		},
		computed: {
			style() {
				let bg = '';
				if (this.title.base.bg == 2) {
					bg = 'background:none;';
				} else if (this.title.base.bg == 3) {
					if (this.title.base.bt == 1) {
						bg = `background:${this.title.base.bc};`;
					} else if (this.title.base.bt == 2 && this.title.base.bi != '') {
						bg = `background: rgba(0,0,0,0.2);;background-size:cover;`;
					}
				}
				return bg;
			},

			fhstyle() {
				if (this.title.fh.d) {
					let style = `font-size:${this.title.fh.f}px;color:${this.title.fh.c};`;
					if (this.title.fh.b) {
						style += 'font-weight:bold;';
					}
					if (this.title.fh.i) {
						style += 'font-style:italic;';
					}
					if (this.title.fh.u) {
						style += 'text-decoration:underline;';
					}
					return style;
				}
			}
		},

		methods: {
			controlClick() {
				if (!this.prev) {
					this.$parent.controlClick(this.title.type);
				}
			}
		}
	}
</script>

<style>
	.xcx-title {
		height: 50px;
		position: relative;
		background: #fff;
		text-align: center;
		/* padding-top: 15px; */
		z-index: 999;
	}

	.xcx-title img {
		position: absolute;
		z-index: 1;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 72px;
		height: 30px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 30px;
	}

	.xcx-title .tit {
		font-size: 15px;
		/* line-height: 50px; */
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}

	.xcx-title .el-icon-arrow-left {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 40px;
		height: 100%;
		color: #888;
		cursor: pointer;
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
