<template>
	<view>
		<view class="cu-custom" :style="[{ height: customBar + 'px' }]">
			<view class="cu-bar u-flex u-row-between" :class="{ fixed: isFixed }" :style="[style]">
				<view class="action u-flex" @tap="goBack" v-if="isBack">
					<u-icon customStyle="padding: 6rpx;" :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
					<view class="u-back-text u-line-1 u-m-l-20" v-if="backText" :style="[backTextStyle]">{{ backText || '' }}</view>
				</view>
				<slot name="left"></slot>
				<view class="content fs16" :style="[{ top: statusBarHeight + 'px' }]"><slot></slot></view>
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * jtools-navbar -自定义标题栏
 * @property {Boolean} isBack = [true] - 是否显示返回按钮
 * @property {Booelan} isFixed = [true] - 是否开启定位
 */

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
	name: 'jtools-tabbar',
	data() {
		return {
			statusBarHeight: systemInfo.statusBarHeight
		};
	},
	computed: {
		// tabbar样式
		style() {
			let statusBarHeight = systemInfo.statusBarHeight;
			let style = {};
			style.height = `${this.customBar}px`;
			style.paddingTop = `${statusBarHeight}px`;
			Object.assign(style, this.background);
			return style;
		},
		// 高度
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	props: {
		isBack: {
			type: Boolean,
			default: true
		},
		isFixed: {
			type: Boolean,
			default: true
		},
		background: {
			type: Object,
			default() {
				return {
					background: '#fff'
				};
			}
		},
		// 返回箭头的颜色
		backIconColor: {
			type: String,
			default: '#333'
		},
		// 左边返回的图标
		backIconName: {
			type: String,
			default: 'arrow-left'
		},
		// 左边返回图标的大小，rpx
		backIconSize: {
			type: [String, Number],
			default: '20'
		},
		// 返回的文字提示
		backText: {
			type: String,
			default: ''
		},
		// 返回的文字的 样式
		backTextStyle: {
			type: Object,
			default() {
				return {
					color: '#000'
				};
			}
		},
		backPath: {
			type: String,
			default: ''
		},
		isDefineBack:{
			type:Boolean,
			default:false
		}
	},
	methods: {
		goBack() {
			if(this.isDefineBack){
				this.$emit('toBack')
			}else{
				if(this.backPath) {
					uni.switchTab({
						url:this.backPath
					})
				} else {
					uni.navigateBack();
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-custom {
	width: 100%;
}
.cu-bar {
	width: 100%;
	.content {
		width: 350rpx;
		// display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
		pointer-events: auto;
		justify-content: center;
		color: #333;
	}
	
}
</style>
