<template>
	<view class="container">
		<view class="header">
			<view style="padding: 30px; ">
				<text class="title">辊体重量G (KG)</text>
				<text class="value">{{ weight }}KG</text>
			</view>
		</view>

		<view class="form">
			<view class="form-item">
				<text>辊体外径D (mm)</text>
				<input type="number" placeholder="请输入外径" v-model="outerDiameter" />
			</view>

			<view class="form-item">
				<text>辊体壁厚t (mm)</text>
				<input type="number" placeholder="请输入壁厚" v-model="wallThickness" />
			</view>

			<view class="form-item">
				<text>辊体内径d (mm)</text>
				<input type="number" v-model="innerDiameter" disabled />
			</view>

			<view class="form-item">
				<text>辊体面宽B (mm)</text>
				<input type="number" placeholder="请输入面宽" v-model="faceWidth" />
			</view>

			<view class="form-item">
				<text>材料密度p(Kg/m³)</text>
				<picker :value="materialIndex" :range="materials" range-key="name" @change="onMaterialChange">
					<view class="uni-input">{{ materials[materialIndex].name }}</view>
				</picker>
			</view>
		</view>

		<button class="calculate-btn" @click="calculate">立即计算</button>
	</view>
</template>

<script setup>
	import {
		ref,computed
	} from 'vue'

	const outerDiameter = ref('')
	const wallThickness = ref('')
	const innerDiameter = computed(() => {
		if (outerDiameter.value && wallThickness.value) {
			return Number(outerDiameter.value) - 2 * Number(wallThickness.value)
		}
		return ''
	})
	const faceWidth = ref('')
	const selectedMaterial = ref('7850')
	const weight = ref(0)
	const materials = ref([{
			name: '碳钢',
			density: 7.8
		},
		{
			name: '不锈钢',
			density: 7.8
		},
		{
			name: '铸铁',
			density: 7.3
		},
		// 可以根据需要添加更多材料
	])
	const materialIndex = ref(0)

	const onMaterialChange = (e) => {
		materialIndex.value = e.detail.value
		selectedMaterial.value = materials.value[materialIndex.value].density
	}
	const calculate = () => {
		// 将输入转换为数字
		const D = Number(outerDiameter.value)
		const t = Number(wallThickness.value)
		const d = Number(innerDiameter.value)
		const B = Number(faceWidth.value)
		const p = Number(selectedMaterial.value)

		// 计算辊体重量
		// 公式: G = π * (D^2 - d^2) * B * p / 4 / 1000000
		const result = 3.14 * (Math.pow(D, 2) - Math.pow(d, 2)) * B * p / 4 / 1000000

		// 将结果四舍五入到两位小数
		weight.value = Math.round(result * 100) / 100
	}
</script>


<style>
	.container {
		font-size: 14px;

		min-height: 100vh;
	}

	.header {
		height: 200px;
		/* 设置适当的高度 */
		background-image: url('https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212132_c5d4953d43246914c3ae2c3f0644be20_113328_750_1250.jpg');
		background-size: cover;
		/* 确保图片覆盖整个区域 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 防止图片重复 */
		width: 100%;
	}

	.title {
		font-size: 18px;
		color: #ffffff;
		padding-right: 50px;
		font-weight: bold;
	}

	.value {
		font-size: 18px;
		color: #ffffff;
		font-weight: bold;
		border-bottom: 2px solid #FFF;
	}

	.form-item {
		background: #ffffff;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 5px;
		width: 90%;
		display: flex;
		align-items: center;
	}

	.form-item text {
		flex: 0 0 40%;
		padding-left: 10px;
	}

	.form-item input {
		flex: 0 0 50%;
		border: 1px #ccc solid;
		text-align: left;
		padding: 2px 10px;
		font-size: 12px;
		border-radius: 5px;
		height: 30px;
		margin-right: 5px;
	}

	.form-item select {
		flex: 0 0 58%;
		border: 1px #ccc solid;
		text-align: left;
		padding: 2px 10px;
		font-size: 12px;
		border-radius: 5px;
		height: 35px;
		margin-right: 5px;
	}



	.calculate-btn {
		background: #4a90e2;
		color: #ffffff;
		border: none;
		padding: 5px;
		border-radius: 5px;
		margin-top: 20px;
		width: 40%;
	}
</style>