<template>
	<view
		style="display: flex;flex-direction: row;box-sizing: border-box;width: 100%;align-items: center;height: 100rpx;padding: 0rpx 15rpx; background-color: #FFFFFF;">

		<image style="width: 45rpx;height: 45rpx;" src="../../static/custom-icon/line.png" mode="aspectFill">
		</image>
		<text style="flex-shrink: 0;font-size: 30rpx; color: #101010;">{{leftText}}</text>
		<text
			style="flex: 1;padding-left: 30rpx;padding-right: 30rpx;color: #898989 ;font-size: 26rpx;text-align: center;">{{middleText}}</text>
		<text v-if="isShowRight" style="flex-shrink: 0;font-size: 26rpx;color: #080808;"
			@click="clickRight()">{{rightText}}</text>

		<image v-if="isShowRight" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"
			src="../../static/img/public/more.png" mode="aspectFill" @click="clickRight()">
		</image>
	</view>
</template>

<script>
	export default {
		props: {
			leftText: {
				type: String,
				default: ""
			},
			middleText: {
				type: String,
				default: ""
			},
			rightText: {
				type: String,
				default: ""
			},
			isShowRight: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				clickRight() {
					this.$emit("rightClick", this.leftText)
				}
			};
		}
	}
</script>

<style>

</style>
