<template>
  <div class="container calculation-module" :class="whiteTxt && 'white'">
    <div class="row mb-5 align-items-start">
      <div class="col-12 mb-4">
        <el-checkbox class="mt-2" @change="pipeWeight = null" v-model="useInch"> {{ content.s10.t12 }}</el-checkbox>
      </div>
      <div class="col-12 col-md-4 mb-4 mb-md-0">
        <p>{{ useInch ? content.s10.t13 : content.s10.t4 }}</p>
        <el-input-number v-model="diameter" :min="0" :size="mini ? 'small' : 'large'"></el-input-number>
      </div>
      <div class="col-12 col-md-4 mb-4 mb-md-0">
        <p>{{ useInch ? content.s10.t14 : content.s10.t5 }}</p>
        <el-input-number v-model="thickness" :min="0" :size="mini ? 'small' : 'large'"></el-input-number>
        <div class="mt2"></div>
      </div>
      <div class="col-12 col-md-4 mb-4 mb-md-0 mx-auto">
        <p>{{ content.s10.t6 }}</p>
        <el-input-number v-model="length" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
        <div class="mt2" />
      </div>
      <!-- <div class="col-12 col-md-6 col-lg-3">
              <p>{{ content.s10.t7 }}</p>
              <el-input-number size="medium" v-model="number_1" :min="0"></el-input-number>
              <div class="mt2"/>
            </div> -->
      <div class="col-12 mx-auto mt-3">
        <div>
          <button type="button" @click="calculate" class="btn btn-default cal-btn mt-4 mb-4 d-block">
            {{ content.s10.t2 }}
          </button>
          <template v-if="pipeWeight">
            <span>
              {{ content.s10.t9 }}
            </span>
            <span style="font-weight: bold">
              {{ pipeWeight }}
            </span>
            <span>
              {{ content.s10.t11 }}
            </span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PipeWeightCalculationModule',
  props: {
    whiteTxt: {
      type: Boolean,
      required: false,
      default: false
    },
    mini: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      diameter: null,
      thickness: null,
      length: 1,
      useInch: false,
      pipeWeight: null
    }
  },
  computed: {
    content() {
      return this.$store.state.content.home[this.$route.params.lang]
    }
  },
  methods: {
    calculate() {
      // check for validations
      if (!Number(this.diameter) || !Number(this.thickness) || !Number(this.length)) {
        return this.$message({
          message: this.content.s10.errMsg1,
          type: 'error'
        })
      }

      if (this.diameter - this.thickness <= 0) {
        return this.$message({
          message: this.content.s10.errMsg2,
          type: 'error'
        })
      }

      // init fixed and relative values
      const inchCoefficient = 25.4
      const FixedCoefficient = 0.02466
      const thickness = this.useInch ? this.thickness * inchCoefficient : this.thickness
      const diameter = this.useInch ? this.diameter * inchCoefficient : this.diameter

      // calulation formula
      this.pipeWeight = (FixedCoefficient * thickness * (diameter - thickness) * this.length).toFixed(2)
    }
  }
}
</script>
