<template>
  <section class="app-section">
    <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">{{ titleTxt }}</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" v-if="calculationValues">

                      <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" v-if="calculationValues">

                      <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>
</template>


<script>
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
    }
  },
  async fetch() {
    const calculationValues = await this.$axios.get('/api/public/calculation/values')
    this.calculationValues = calculationValues.data
  },
  props: ['titleTxt'],
  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)
    }
  },
  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)
    }
  }
}
</script>


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

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