<template>
	<view class="content">
		<image class="logo" src="@/static/logo.png"></image>
		{{ 'initialValue' + initialValue }}
		{{ 'newValue' + newValue }}
		{{ 'oldUnit' + oldUnit }}
		{{ 'newUnit' + newUnit }}
		{{ 'oldOrder' + oldOrder }}
		{{ 'newOrder' + newOrder }}

		<view class="text-area">
			<yjly-inputunit
				v-model="mylength"
				:unit-type="'length'"
				:unit-order.sync="myunitname"
				:show-english-only="false"
				:decimal-places="5"
				:width="200"
				:style="{ width: 200 + 'px' }"
				@conversion="onchange"
			></yjly-inputunit>

			<text class="title">Hello RuoYi</text>
		</view>
	</view>
</template>

<script>
export default {
	onLoad: function () {},
	data() {
		return {
			mylength: 10,
			myunitname: 1,

			initialValue: 0,
			newValue: 0,
			oldUnit: '',
			newUnit: '',
			oldOrder: 0,
			newOrder: 0
		};
	},

	methods: {
		onchange(e) {
			this.initialValue = e.initialValue;
			this.newValue = e.newValue;
			this.oldUnit = e.oldUnit;
			this.newUnit = e.newUnit;
			this.oldOrder = e.oldOrder;
			this.newOrder = e.newOrder;
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
