<template>
  <div class="page calculation--page latin-digits">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <h2 class="title">{{ staticData.app.t1 }}</h2>
          <p>{{ staticData.app.t2 }}</p>
        </div>
      </div>
    </section>

    <section class="s2">
      <div class="container">
        <div class="row">

          <div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
            <div class="container-fluid">
              <div class="row">

                <div class="col-12">
                  <div class="appTitle">
                    <h2 class="title">{{ staticData.app.t3 }}</h2>
                  </div>
                  <div class="appMethod">
                    <span class="txt">{{ staticData.app.t4 }}</span>
                    <el-radio-group v-model="app.method" style="direction: ltr">
                      <template v-if="$route.params.lang === 'fa'">
                        <el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
                        <el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
                      </template>
                      <template v-else>
                        <el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
                        <el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
                      </template>
                    </el-radio-group>
                  </div>
                </div>

                <div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
                  <div class="appLayout">
                    <h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
                    <div class="class">
                      <h4>{{ staticData.app.t8 }}</h4>
                      <el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
                    </div>
                    <div class="class">
                      <h4>{{ staticData.app.t10 }}</h4>
                      <el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
                      <el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
                      <el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
                    </div>
                    <div class="class">
                      <h4>{{ staticData.app.t14 }}</h4>
                      <el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
                      <el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
                      <el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
                      <el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
                      <el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
                      <el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>

                    </div>
                  </div>
                </div>

                <div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
                  <div class="appLayout">
                    <h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
                    <el-form key="form-a">
                      <el-form-item :label="staticData.app.t16">
                        <el-radio-group v-model="app.gratingType">
                          <el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
                          <el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
                        <el-radio-group v-model="app.loadType">
                          <el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
                          <el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
                      </el-form-item>

                      <el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
                      </el-form-item>

                      <el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24">

                        <el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
                                   :placeholder="staticData.app.select">
                          <el-option
                              v-for="item in calculationValues.bearingBarPitch_forge"
                              :key="item"
                              :label="item"
                              :value="item">
                          </el-option>
                        </el-select>

                        <el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
                          <el-option
                              v-for="item in calculationValues.bearingBarPitch_pressured"
                              :key="item"
                              :label="item"
                              :value="item">
                          </el-option>
                        </el-select>

                        <p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>

                      </el-form-item>

                      <el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25">

                        <el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
                          <el-option
                              v-for="item in calculationValues.crossBarPitch_forge"
                              :key="item"
                              :label="item"
                              :value="item">
                          </el-option>
                        </el-select>

                        <el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
                          <el-option
                              v-for="item in calculationValues.crossBarPitch_pressured"
                              :key="item"
                              :label="item"
                              :value="item">
                          </el-option>
                        </el-select>

                        <p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>

                      </el-form-item>

                      <el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
                      </el-form-item>

                      <el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
                      </el-form-item>

                      <!-- cross bar thickness -->
                      <el-form-item :class="validation.crossBarThickness ? 'is-error' : null" :label="staticData.app.t30" v-if="app.gratingType === 'pressured'">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarThickness" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.crossBarThickness">{{ validation.crossBarThickness.msg }}</p>
                      </el-form-item>
                      <!-- cross bar thickness -->

                      <el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
                        <el-select v-model="app.bearingBarHeight"
                                   key="bearingBarHeight"
                                   :placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
                          <el-option
                              v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
                              :key="item"
                              :label="item"
                              :value="item">
                          </el-option>
                        </el-select>
                        <p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
                      </el-form-item>

                      <!-- cross bar height -->
                      <el-form-item :class="validation.crossBarHeight ? 'is-error' : null" :label="staticData.app.t31" v-if="app.gratingType === 'pressured'">
                        <el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarHeight" :placeholder="staticData.app.enter"></el-input>
                        <p class="err" v-if="validation.crossBarHeight">{{ validation.crossBarHeight.msg }}</p>
                      </el-form-item>
                      <!-- cross bar height -->

                      <div class="calculateBtn">
                        <button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
                      </div>
                    </el-form>
                    <div class="copyRight">
                      <p>Design And develop by <a href="https://www.negarehagency.com" target="_blank">negarehagency.com</a></p>
                    </div>
                  </div>
                </div>

                <div class="col-12 mt-5">
                  <div class="appResult" v-if="waiting || appResult || validation">
                    <p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
                    <p class="err" v-if="!appResult && !waiting">{{ staticData.app.validationErr }}</p>
                    <p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
                    <p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
                  </div>
                  <div class="weight" v-if="!validation && waiting || appResult">
                    <p v-if="appResult">{{ staticData.app.t32 }}</p>
                    <p dir="ltr">
                      <b class="colored"> {{ appResult.gratingWeight.normal }} </b>
                      <b> Kg/m<sup>2</sup> </b>
                    </p>
                    <br>
                    <p v-if="appResult">{{ staticData.app.t33 }}</p>
                    <p dir="ltr">
                      <b class="colored"> {{ appResult.gratingWeight.galvanized }} </b>
                      <b> Kg/m<sup>2</sup> </b>
                    </p>
                  </div>
                </div>

              </div>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section class="s3">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="tableBox vehicles">
              <table>
                <thead>
                <tr>
                  <th colspan="4" class="center">{{ staticData.table1.title }}</th>
                  <th class="middle">{{ staticData.table1.load }}</th>
                  <th>{{ staticData.table1.imprint }}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>{{ staticData.table1.class1.t1 }}</td>
                  <td>{{ staticData.table1.class1.t2 }}</td>
                  <td>{{ staticData.table1.class1.t3 }}</td>
                  <td>{{ staticData.table1.danSqm }}</td>
                  <td>600</td>
                  <td>1000 x 1000</td>
                </tr>
                <tr class="odd">
                  <td>{{ staticData.table1.class2.t1 }}</td>
                  <td>{{ staticData.table1.class2.t2 }}</td>
                  <td>{{ staticData.table1.class2.t3 }}</td>
                  <td>{{ staticData.table1.danImprint }}</td>
                  <td>1.000</td>
                  <td>200 x 200</td>
                </tr>
                <tr>
                  <td>{{ staticData.table1.class3.t1 }}</td>
                  <td>{{ staticData.table1.class3.t2 }}</td>
                  <td>{{ staticData.table1.class3.t3 }}</td>
                  <td>{{ staticData.table1.danImprint }}</td>
                  <td>3.000</td>
                  <td>200 x 400</td>
                </tr>
                <tr class="odd">
                  <td>{{ staticData.table1.class4.t1 }}</td>
                  <td>{{ staticData.table1.class4.t2 }}</td>
                  <td>{{ staticData.table1.class4.t3 }}</td>
                  <td>{{ staticData.table1.danImprint }}</td>
                  <td>9.000</td>
                  <td>250 x 600</td>
                </tr>
                </tbody>
              </table>
            </div>
            <p class="notice">{{ staticData.scrollToSee }}</p>
            <div class="tableBox forklifts">
              <table>
                <thead>
                <tr>
                  <th colspan="6" class="center">{{ staticData.table2.title }}</th>
                  <th class="middle">{{ staticData.table2.load }}</th>
                  <th>{{ staticData.table2.imprint }}</th>
                </tr>
                </thead>
                <tbody>

                <tr>
                  <td></td>
                  <td>{{ staticData.table2.t1 }}</td>
                  <td>{{ staticData.table2.t2 }}</td>
                  <td>{{ staticData.table2.t3 }}</td>
                  <td>{{ staticData.table2.t4 }}</td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr class="odd">
                  <td>{{ staticData.table2.fl1.t1 }}</td>
                  <td>{{ staticData.table2.fl1.t2 }}</td>
                  <td>21</td>
                  <td>10</td>
                  <td>31</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>2600</td>
                  <td>130 x 130</td>
                </tr>
                <tr>
                  <td>{{ staticData.table2.fl2.t1 }}</td>
                  <td>{{ staticData.table2.fl2.t2 }}</td>
                  <td>31</td>
                  <td>15</td>
                  <td>46</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>4000</td>
                  <td>175 x 150</td>
                </tr>
                <tr class="odd">
                  <td>{{ staticData.table2.fl3.t1 }}</td>
                  <td>{{ staticData.table2.fl3.t2 }}</td>
                  <td>44</td>
                  <td>25</td>
                  <td>69</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>6300</td>
                  <td>200 x 200</td>
                </tr>
                <tr>
                  <td>{{ staticData.table2.fl4.t1 }}</td>
                  <td>{{ staticData.table2.fl4.t2 }}</td>
                  <td>60</td>
                  <td>40</td>
                  <td>100</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>9000</td>
                  <td>300 x 200</td>
                </tr>
                <tr class="odd">
                  <td>{{ staticData.table2.fl5.t1 }}</td>
                  <td>{{ staticData.table2.fl5.t2 }}</td>
                  <td>90</td>
                  <td>60</td>
                  <td>150</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>14000</td>
                  <td>375 x 200</td>
                </tr>
                <tr>
                  <td>{{ staticData.table2.fl6.t1 }}</td>
                  <td>{{ staticData.table2.fl6.t2 }}</td>
                  <td>110</td>
                  <td>80</td>
                  <td>190</td>
                  <td>{{ staticData.table2.danImprint }}</td>
                  <td>17000</td>
                  <td>450 x 200</td>
                </tr>
                </tbody>
              </table>
            </div>
            <p class="notice">{{ staticData.scrollToSee }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>


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

export default {
  data() {
    return {
      app: {
        method: 'custom',
        gratingType: 'forge',
        loadType: 'pointedLoad',
        vehicleClass: 'class1',
        pointedLoadValue: '',
        distributedLoadValue: '',
        bearingBarPitch: '',
        crossBarPitch: '',
        clearSpan: '',
        bearingBarThickness: '',
        crossBarThickness: '',
        bearingBarHeight: '',
        crossBarHeight: '',
        locale: this.$route.params.lang
      },
      calculationValues: null,
      relativeValues: null,
      validation: {},
      waiting: false,
      appResult: null
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.calculation[this.$route.params.lang]
    },
    gratingTypeTrigger() {
      return this.app.gratingType
    },
    crossBarPitchTrigger() {
      return this.app.crossBarPitch
    },
    loadTypeTrigger() {
      return this.app.loadType
    },
    vehicleClassTrigger() {
      return this.app.vehicleClass
    },
    methodTrigger() {
      return this.app.method
    }
  },
  watch: {
    loadTypeTrigger(newVal, oldVal) {
      this.app.bearingBarHeight = ''
    },
    gratingTypeTrigger(newVal, oldVal) {
      this.app.bearingBarPitch = ''
      this.app.crossBarPitch = ''
    },
    crossBarPitchTrigger(newVal, oldVal) {
      if (this.app.loadType === 'pointedLoad') {
        this.app.bearingBarHeight = ''
        const data = {
          gratingType: this.app.gratingType,
          crossBarPitch: this.app.crossBarPitch
        }
        this.$axios.post('/api/public/calculation/relativeValues', data)
            .then(res => {
              this.relativeValues = res.data
            })
            .catch(err => {
              this.relativeValues = null
            })
      }
    },
    vehicleClassTrigger(newVal, oldVal) {
      this.app.crossBarPitch = ''
      if (newVal === 'class1') this.app.loadType = 'distributedLoad'
      else this.app.loadType = 'pointedLoad'
    },
    methodTrigger(newVal, oldVal) {
      if (newVal === 'classified') {
        this.app.vehicleClass = 'class1'
        this.app.loadType = 'distributedLoad'
      } else {
        this.app.vehicleClass = ''
        this.app.loadType = 'pointedLoad'
      }
    },
    waiting() {
      setTimeout(() => {
        this.$gsap.timeline()
            .to($('.app .appResult,.app .weight'), {opacity: 1, paddingTop: 20, paddingBottom: 20, duration: 0.2})
            .to($('.app .appResult p,.app .weight p'), {opacity: 1, fontSize: 16, letterSpacing: 0, duration: 0.2}, 0)
      }, 100)
    }
  },
  mixins: [fadeInAnimation],
  methods: {
    calculate() {
      this.validation = {}
      this.waiting = true
      this.appResult = null
      setTimeout(() => {
        this.$axios.post('/api/public/calculate', this.app)
            .then(res => {
              this.waiting = false
              this.appResult = res.data
            })
            .catch(err => {
              this.waiting = false
              if (err.response.status === 422) this.validation = err.response.data.validation
            })
      }, 2000)
    }
  },
  head() {
    return {
      htmlAttrs: {
        title: this.staticData.hero
      },
      title: this.staticData.hero,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.staticData.app.t2
        }
      ]
    }
  },
  async asyncData({$axios}) {
    const calculationValues = await $axios.get('/api/public/calculation/values')
    return {
      calculationValues: calculationValues.data
    }
  }
}
</script>


<style lang="scss">
.el-popper .popper__arrow {
  border-width: 0;
  filter: none;
  left: 35px;

  &:lang(fa) {
    left: auto;
    right: 35px;
  }
}
</style>
