<template>
	<view class="title" :style="{ 'padding-top': data.margin + 'px', 'padding-bottom': data.margin + 'px', 'background-color': data.background_color != null ? data.background_color : 'transparent' }">
	  <view class="title-style1" v-if="data.style == 1" :style="{ color: data.title_color }">
	    <view class="title-content" @click="jump(data.morelink)">
	      <view class="title-content-before" v-if="data.title_line" :style="{ borderTop: '2rpx solid ' + data.title_color }"></view>
	      {{ data.title }}
	      <view class="title-content-after" v-if="data.title_line" :style="{ borderTop: '2rpx solid ' + data.title_color }"></view>
	    </view>
	  </view>
	  
	  <view class="title-style2" v-if="data.style == 2">
	    <view class="title-content" :style="{ color: data.title_color, 'font-size': data.title_font_size + 'px'}">
	      {{ data.title }}
	    </view>
	    <view class="title-more" @click="jump(data.morelink)" :style="{ color: data.more_color, 'font-size': data.more_font_size + 'px' }" v-if="data.is_more">
	      {{ data.moretitle }} <uni-icons :color="data.more_color" type="right" :size="data.more_font_size" />
	    </view>
	    <view class="title-subtitle" v-if="data.is_subtitle" :style="{ color: data.subtitle_color, 'font-size': data.subtitle_font_size + 'px'}">
	      {{ data.subtitle }}
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
	
</script>

<style lang="scss">
.title {
	background: #ffffff;

	.title-style1, .title-style2 {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.title-style2 {
		.title-content {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.title-more {
			position: absolute;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			right: 16rpx;
			top: 0;
			height: 100%;
			line-height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title-subtitle {
			margin-top: 8rpx;
			font-size: 24rpx;
			height: 40rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.title-style1 {
		text-align: center;

		.title-content-before {
			display: inline-block;
			content: '';
			width: 20%;
			height: 10rpx;
			border-top: 2rpx solid #898989;
			margin-right: 20rpx;
		}

		.title-content-after {
			display: inline-block;
			content: '';
			width: 20%;
			height: 10rpx;
			border-top: 2rpx solid #898989;
			margin-left: 20rpx;
		}
	}

}
</style>