<template>
	<div :style="$getStyle(styles)">
		<u-section :font-size="headline.fontSize" :bold="headline.bold" :showLine="headline.showLine"
			:color="headline.color" :title="dataVal.headline" :right="false">
			<template v-slot:right>
				<view>1</view>
			</template>
		</u-section>
	</div>
</template>

<script>
	import Mixin from "../Mixin";
	export default {
		name: "SlyLabel",
		mixins: [Mixin],
		data() {
			return {
				headline: {
					fontSize: 28,
					bold: true,
					color: '',
					showLine: true
				}
			};
		},
		watch: {
			attrs: {
				handler: function(newAtt, oldAtt) {
					if (!newAtt) return
					const {
						headline,
						subhead
					} = newAtt;
					this.headline.fontSize = uni.upx2px(headline.fontSize)
					this.headline.bold = headline.bold
					this.headline.color = headline.color
					this.headline.showLine = headline.showLine

				},
				deep: true,
				immediate: true
			}

		}
	}
</script>
<style lang="scss" scoped>
	.sly-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>