<template>
  <div class="container calculation-module" :class="whiteTxt && 'white'">
    <div class="row align-items-start">
      <div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
        <p>{{ meterUnitLength ? content.s10.t6 : content.s10.t18 }}</p>
        <el-input-number v-model="length" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
        <el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitLength" :class="mini && 'small'">
          {{ content.s10.t17 }}
        </el-checkbox>
      </div>
      <div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
        <p>{{ meterUnitWidth ? content.s10.t10 : content.s10.t19 }}</p>
        <el-input-number v-model="width" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
        <el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitWidth" :class="mini && 'small'">
          {{ content.s10.t17 }}
        </el-checkbox>
      </div>
      <div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
        <p>{{ meterUnitThickness ? content.s10.t20 : content.s10.t5 }}</p>
        <el-input-number v-model="thickness" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
        <el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitThickness" :class="mini && 'small'">
          {{ content.s10.t17 }}
        </el-checkbox>
      </div>
      <div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
        <p>{{ content.s10.t7 }}</p>
        <el-input-number v-model="quantity" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
      </div>
      <div class="col-12 mx-auto mb-5 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 >
            <p v-if="sheetWeight">
              <span>
                {{ content.s10.t3 }}
              </span>
              <span style="font-weight: bold">
                {{ sheetWeight }}
              </span>
              <span>
                {{ content.s10.t16 }}
              </span>
            </p>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SheetWeightCalculationModule',
  props: {
    whiteTxt: {
      type: Boolean,
      required: false,
      default: false
    },
    mini: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      length: 1,
      meterUnitLength: true,

      width: 1,
      meterUnitWidth: true,

      thickness: 1,
      meterUnitThickness: false,

      quantity: 1,
      sheetWeight: null
    }
  },
  computed: {
    content() {
      return this.$store.state.content.home[this.$route.params.lang]
    }
  },
  methods: {
    calculate() {
      // check for validations
      if (!this.width || !this.thickness || !this.length || !this.quantity) {
        return this.$message({
          message: this.content.s10.errMsg1,
          type: 'error'
        })
      }

      // init fixed and relative values
      const FixedCoefficient = 7.85
      const meterUnitRatio = 1000
      const length = this.meterUnitLength ? this.length : this.length / meterUnitRatio
      const width = this.meterUnitWidth ? this.width : this.width / meterUnitRatio
      const thickness = this.meterUnitThickness ? this.thickness * meterUnitRatio : this.thickness

      // calulation formula
      this.sheetWeight = (width * thickness * length * this.quantity * FixedCoefficient).toFixed(2)
    }
  }
}
</script>
