<template>
	<view class="titleWrapper" @click="back">
		<image src="/static/backIcon.png" mode="aspectFit" class="titleIcon"></image>
		<text class="titleText" :style="{ letterSpacing: letterSpacing ?? '' }">{{ title }}</text>
	</view>
</template>

<script>
export default {
	name: 'PageTitle',
	props: {
		title: {
			type: String,
			required: false,
			default: ''
		},
		backTarget: {
			type: String,
			required: false,
			default: ''
		},
		onBack: {
			type: Function,
			required: false
		}
	},
	data() {
		return {
			letterSpacing: undefined
		};
	},
	methods: {
		back() {
			if (this.onBack) {
				this.onBack();
			}
			if (this.backTarget) {
				uni.redirectTo({ url: this.backTarget });
			} else {
				uni.navigateBack();
			}
		}
	},
	created() {
		const locale = uni.getLocale();
		if (['zh-CN', 'zh-TW'].includes(locale)) {
			this.letterSpacing = '2px';
		} else {
			this.letterSpacing = undefined;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
