<template>
	<div>
		<div v-show = "showInput">
			<div class="form-inline">
				<div class="form-group">
					<label for="nominalSizeValue">自然尺寸</label>
					<input autocomplete="off" type="text" class="form-control" id="nominalSizeValue" v-model="nominalSizeValue">
				</div>
				<div class="form-group">
					<label for="upperDeviationValue">上偏差</label>
					<input autocomplete="off" type="text" class="form-control" id="upperDeviationValue" v-model="upperDeviationValue">
				</div>
				<div class="form-group">
					<label for="lowerDeviationValue">下偏差</label>
					<input autocomplete="off" type="text" class="form-control" id="lowerDeviationValue" v-model="lowerDeviationValue">
				</div>
			</div>
		</div>
		<div>
			<h2>
				<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
					<msubsup>
					<mi>{{nominalSizeValue}}</mi>
					<mn>{{lowerDeviationValue}}</mn>
					<mn>{{upperDeviationValue}}</mn>
					</msubsup>
				</math>
			</h2>
		</div>	
	</div>
</template>
<script >

	export default {
		props : ["nominalSize", "upperDeviation", "lowerDeviation","showInput"],

		data : function(){
			return {
				nominalSizeValue:this.nominalSize,
				upperDeviationValue:this.upperDeviation,
				lowerDeviationValue:this.lowerDeviation,
			}
		},
	}
</script>