<template>
	<div class="page calculation--page">
		<Hero title="نرم افزار محاسبه"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title">وزن گریتینگ</h2>
					<p>بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود می‌توانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.</p>
				</div>
			</div>
		</section>
		
		<section class="s2">
			<div class="container">
				<div class="row">
					
					<div class="app m-auto" :class="app.method === 'a' ? 'col-12 col-lg-6' : 'col-12'">
						<div class="container-fluid">
							<div class="row">
								
								<div class="col-12">
									<div class="appTitle">
										<h2 class="title">ظرفیت بارگیری گریتینگ خود را محاسبه کنید</h2>
									</div>
									<div class="appMethod">
										<span>روش محاسبه</span>
										<el-radio-group v-model="app.method" style="direction: ltr">
											<el-radio-button label="b">نفر یا وسیله نقلیه</el-radio-button>
											<el-radio-button label="a">وارد کردن بار</el-radio-button>
										</el-radio-group>
									</div>
								</div>
								
								<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'b'">
									<div class="appLayout">
										<h2 class="layoutTitle">انتخاب کلاس لودینگ</h2>
										<div class="class">
											<h4>عابر پیاده:</h4>
											<el-radio v-model="app.class" :label="1">کلاس 1</el-radio>
										</div>
										<div class="class">
											<h4>وسایل نقلیه:</h4>
											<el-radio v-model="app.class" :label="2">کلاس 2</el-radio>
											<el-radio v-model="app.class" :label="3">کلاس 3</el-radio>
											<el-radio v-model="app.class" :label="4">کلاس 4</el-radio>
										</div>
										<div class="class">
											<h4>لیفتراک:</h4>
											<el-radio v-model="app.class" :label="5">FL1</el-radio>
											<el-radio v-model="app.class" :label="6">FL2</el-radio>
											<el-radio v-model="app.class" :label="7">FL3</el-radio>
											<el-radio v-model="app.class" :label="8">FL4</el-radio>
											<el-radio v-model="app.class" :label="9">FL5</el-radio>
											<el-radio v-model="app.class" :label="10">FL6</el-radio>
										
										</div>
									</div>
								</div>
								
								<div :class="app.method === 'a' ? 'col-12' : 'col-12 col-lg-6'">
									<div class="appLayout">
										<h2 class="layoutTitle">اطلاعات ورودی</h2>
										<el-form key="form-a">
											<el-form-item label="نوع گریتینگ">
												<el-radio-group v-model="app.type">
													<el-radio label="elec">الکتروفورج</el-radio>
													<el-radio label="press">پرسی</el-radio>
												</el-radio-group>
											</el-form-item>
											
											<el-form-item label="بار متمرکز (kn)">
												<el-input v-model="app.pointLoad" placeholder="وارد کنید"></el-input>
												<!--												<span>kn</span>-->
											</el-form-item>
											
											<el-form-item label="بار گسترده (kn/m2)">
												<el-input v-model="app.distributedLoad" placeholder="وارد کنید"></el-input>
												<!--												<span>kn/m2</span>-->
											</el-form-item>
											
											<el-form-item label="گام تسمه های باربر (mm)">
												
												<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
													<el-option
														v-for="item in bearingBarPitch_elec"
														:key="item"
														:label="item"
														:value="item">
													</el-option>
												</el-select>
												
												<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
													<el-option
														v-for="item in bearingBarPitch_press"
														:key="item"
														:label="item"
														:value="item">
													</el-option>
												</el-select>
												
												<!--												<span>mm</span>-->
											
											</el-form-item>
											<el-form-item label="گام تسمه های رابط (mm)">
												
												<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
													<el-option
														v-for="item in crossBarPitCh_elec"
														:key="item"
														:label="item"
														:value="item">
													</el-option>
												</el-select>
												
												<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
													<el-option
														v-for="item in crossBarPitCh_press"
														:key="item"
														:label="item"
														:value="item">
													</el-option>
												</el-select>
												
												<!--												<span>mm</span>-->
											
											</el-form-item>
											<el-form-item label="دهنه باربر (mm)">
												<el-input v-model="app.clearSpan" placeholder="وارد کنید"></el-input>
												<!--												<span>mm</span>-->
											</el-form-item>
											
											<el-form-item label="ضخامت تسمه های باربر (mm)">
												<el-input v-model="app.bearingBarThickness" placeholder="وارد کنید"></el-input>
												<!--												<span>mm</span>-->
											</el-form-item>
											
											<el-form-item label="ارتفاع تسمه های باربر (mm)">
												<el-select v-model="app.bearingBarHeight" key="bearingBarHeight" placeholder="انتخاب کنید">
													<el-option
														v-for="item in bearingBarHeight"
														:key="item"
														:label="item"
														:value="item">
													</el-option>
												</el-select>
												<!--												<span>mm</span>-->
											</el-form-item>
											<div class="calculateBtn">
												<!--												<el-button>محاسبه</el-button>-->
												<button class="btn btn-reverse-fill">محاسبه</button>
											</div>
										</el-form>
									</div>
								</div>
							
							</div>
						</div>
					</div>
				
				</div>
			</div>
		</section>
	</div>
</template>


<script>
   import moment from 'moment-jalaali'
   import {fadeInAnimation} from '~/mixins/animations'

   export default {
      data() {
         return {
            history: null,
            app: {
               method: 'a',
               type: 'elec',
               class: '',
               pointLoad: '',
               distributedLoad: '',
               bearingBarPitch: '',
               crossBarPitCh: '',
               clearSpan: '',
               bearingBarThickness: '',
               bearingBarHeight: '',
               locale: this.$route.params.lang
            },
            bearingBarPitch_elec: [30, 35, 41, 50],
            bearingBarPitch_press: [11, 22, 33, 44, 50, 55],
            crossBarPitCh_elec: [50, 76, 100],
            crossBarPitCh_press: [11, 22, 33, 44, 50, 55, 66, 77, 88, 100],
            bearingBarHeight: [20, 25, 30, 35, 40, 45, 50, 55, 60]
         }
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.calculation[this.$route.params.lang]
         }
      },
      mixins: [fadeInAnimation],
      methods: {},
      head() {
         return {
            htmlAttrs: {
               title: this.staticData.hero
            }
         }
      }
   }
</script>


<style lang="scss">
	.el-popper .popper__arrow {
		border-width: 0;
		filter: none;
		left: 35px;
		
		&:lang(fa) {
			left: auto;
			right: 35px;
		}
	}
</style>
