<template>
	<view class="carrHeader" :style="[titleStyle]">
        <view class="carrHeaderBox">
            <view class="carrHeader-left">
                <view class="carrHeader-left-icon" @click="goBack">
					<u-icon name="arrow-left" size="38" :color="color?color:'#000'"></u-icon>
                </view>
            </view>
            <view class="carrHeader-title"
            :class="[textAlign?'carrHeader-titleL':'']"
            :style="{'color':color?color:'#000','text-align':textAlign?textAlign:'center'}">
                <slot>{{title?title:''}}</slot>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props:['title','color','textAlign'],   
    data() {
        return {
			titleStyle:{}
        }
    },
    mounted() {
		const that = this
        uni.getSystemInfo({
          success(res) {
            that.titleStyle = {
              paddingTop: `${res.statusBarHeight}px`
            };
          },
        });
    },
    methods:{
        goBack(){
			uni.navigateBack({delta:-1})
        }
    }
}
</script>
<style lang="scss" scoped>
.carrHeader-title{
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    font-size: 32rpx;
}
.carrHeader-title.carrHeader-titleL{
    text-indent: 80rpx;
}
.carrHeader-left{
    position: absolute;
    left: 32rpx;
    z-index: 3;
}
.carrHeaderBox{
    width: 100%;
    height: 88rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.carrHeader{
    padding-top: 48rpx;
}
</style>