<template>
	<view class="index">
		<u-navbar leftText="返回" :title="title" :safeAreaInsetTop="true" :placeholder="true"
			:bgColor="titleStyle.scrollTopHeader ? '#5281FF' : bgColor"
			:titleStyle="{ color: titleStyle.color, fontSize: titleStyle.fontSize}">
			<view class="u-nav-slot" slot="left" :style="{
				backgroundColor: titleStyle.scrollTopHeader ? '#005EBD' : titleStyle.backgroundColor
			}">
				<u-icon v-if="leftIcon" @click="leftClick" name="arrow-left" size="30"></u-icon>
				<u-line v-if="homeShow" direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon v-if="homeShow" @click="rightClick" name="home" size="30"></u-icon>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import apiBaseConfig from '@/config/index.js';
	export default {
		props: {
			homeShow: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			title: {
				type: String,
				default: '标题'
			},
			leftIcon: {
				type: Boolean,
				default: true
			},
			titleStyle: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData
			};
		},
		onLoad() {},
		methods: {
			leftClick() {
				console.log('====leftClick');
				this.$uniGo.navigateBack({
					delta: 1
				});
			},
			rightClick() {
				console.log('====rightClick');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.index {
		z-index: 99999;
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 1rpx;
		border-radius: 100rpx;
		border-color: $uni-border-color;
		padding: 3rpx 7rpx;
		opacity: 0.8;
	}
</style>