<template>
	<view class="title">
		<view class="title-title" :style="{
				'color' : props.color,
				'padding-top' : top+'rpx',
				'background-color' : props.bgc,
				'height' : tops+'rpx',
				'line-height' : tops+'rpx'
			}">
			<view v-if="props.isReturn===0" class="title-return" @click="returns()">
				<image src="@/static/report/back_icon.png" mode=""></image>
			</view>
			<view v-else-if="props.isReturn===1" class="title-return title-icon" @click="returns()">
				<image :src="props.returnIcon" mode=""></image>
			</view>
			<view v-else-if="props.isReturn===4" class="title-return" @click="goHome()">
				<image src="@/static/report/back_icon.png" mode=""></image>
			</view>
			<view v-else class="title-return"></view>
			<view class="title-name"
				:style="{'text-align':props.isCenter?'center;':'left;',marginLeft:props.isReturn===2?'-130rpx':''}">
				{{props.title_name}}</view>
		</view>
		<view :style="{height: top+tops+'rpx'}"></view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const props = defineProps({
		title_name: {
			type: String,
			required: true
		},
		isReturn: { // 0返回 1自定义图标 2空图标文字居左 3空图标文字居中
			type: Number,
			required: true
		},
		returnIcon: {
			type: String,
			// required: true
		},
		color: {
			type: String,
			required: true
		},
		bgc: {
			type: String,
			required: true
		},
		isCenter: {
			type: Boolean,
			required: true
		}
	})

	const isLast = ref(false)
	const top = ref(0)
	const tops = ref(100)
	const emit = defineEmits(['iconClick'])

	onShow(() => {
		getLast()
		getTopWeiXin()
	})

	const goHome = () => {
		uni.switchTab({
			url: '/pages/index/index' //返回首页
		})
	}
	// 返回的箭头
	const returns = () => {
		if (props.isReturn === 0) {
			if (isLast.value) {
				uni.switchTab({
					url: '/pages/index/index' //返回首页
				})
			} else {
				uni.navigateBack({
					delta: 1 //返回上一页
				});
			}
		} else if (props.isReturn === 1) {
			// 自定义图标操作
			emit('iconClick')
		}
	}
	// 获取小程序安全区域的高度
	const getTopWeiXin = () => {
		top.value = parseInt(uni.getSystemInfoSync().statusBarHeight * 750 / uni.getSystemInfoSync().screenWidth)
		uni.setStorageSync('top', top.value);
	}
	// 获取有无上一页
	const getLast = () => {
		let pages = getCurrentPages(); //当前页
		if (pages.length == 1) {
			isLast.value = true
		} else {
			isLast.value = false
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		.title-title {
			position: fixed;
			z-index: 999;
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.title-return {
				width: 60rpx;
				position: absolute;
				left: 0;
				z-index: 999;
				margin-left: 20rpx;
				margin-top: 8rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.title-icon {
				margin-top: 20rpx;

				image {
					width: 46rpx !important;
					height: 46rpx !important;
				}
			}

			.title-name {
				width: 560rpx;
				font-weight: bold;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}
</style>