<template>
	<view class="flexbox pb-[10px]"
		:style="[{'height': demoinfo.top+demoinfo.height+10 + 'px', 'padding-top': demoinfo.top + 'px','padding-left': paddleft + 'px','padding-right': paddleft + 'px', 'color': titleColor, 'background': bgColor,'display':'flex','align-items': 'center'}]">
		<view @click="goBack" class="absolute left-[10px]">
			<uv-icon name="arrow-left" color="#000" size="20" v-if="isshowback"></uv-icon>
		</view>
		<view class="titlwsidht">
			<view class="titles" :style="[{'width':screenWidth- demoinfo.width-80 + 'px'}]">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarH: 0,
				customBarH: 0,
				screenWidth: 0,
				demoinfo: uni.getMenuButtonBoundingClientRect() //微信胶囊信息宽、高、距离顶部等
			}
		},
		props: {
			isshowback: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			paddleft: {
				type: Number,
				default: 10
			},
			titleColor: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
		},

		methods: {
			goBack() {
				uni.navigateBack()
			}
		},
		mounted() {
			let self = this;
			uni.getSystemInfo({
				success: function(e) {
					self.screenWidth = e.screenWidth
				},
				fail: function(e) {
					console.log(e, '获取屏幕信息失败')
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.flexbox {
		position: relative;
	}

	.titles {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0A0A0A;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		overflow: hidden;
	}

	.titlwsidht {
		width: calc(100% + 20px);
		display: flex;
		justify-content: center;
	}
</style>