const siteURL = siteUrl;
/**
* ----------------------------------------------------------------------------------------------
* Tabs Component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('tabs', {
  template: `
    <div>
      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="row">
              <div class="col-6 col-md-3 col-lg-6" v-for="tab in tabs">
                  <a href="#" @click.prevent="selectTab(tab)" class="d-block calculadora-link p-4" :class="{'is-active': tab.isActive }">
                  <!-- laje v-if="tab.name == 'laje'" -->
                      <span class="icon icon-laje" v-if="tab.name == 'laje'" :class="{'icon icon-laje-active': tab.isActive }"></span>
                      <!-- PILAR -->
                      <span class="icon icon-pilar" v-if="tab.name == 'pilar'" :class="{'icon icon-pilar-active': tab.isActive }"></span>
                      <!-- FIM PILAR -->

                      <!-- VIGA -->
                      <span class="icon icon-viga" v-if="tab.name == 'viga'" :class="{'icon icon-viga-active': tab.isActive }"></span>
                      <!-- FIM VIGA

                      <!-- calcada -->
                  <span class="icon icon-calcada" v-if="tab.name == 'calcada'" :class="{'icon icon-calcada-active': tab.isActive }"></span>

                      <span class="d-block text-capitalize">{{ tab.name == 'calcada' ? 'calçada' : tab.name   }}</span>
                  </a>
              </div>
          </div>
        </div>
        <div class="tab-details col-12 col-lg-6">
            <div class="row">
                <slot></slot>
            </div>
        </div>  
      </div>
    </div>
    `,
  data() {
    return {
      tabs: [],
    }
  },
  created() {
    this.tabs = this.$children
  },
  methods: {
    selectTab(selectedTab) {
      // console.log(selectedTab.target.classList.contains(nameTab))
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name)
      })
    }
  }
});

/**
* ----------------------------------------------------------------------------------------------
* Tab component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('tab', {
  template: `
    <div v-show="isActive" class="w-100">
        <slot></slot>
    </div>
    `,
  props: {
    name: { required: true },
    selected: { default: false }
  },
  data() {
    return {
      isActive: false
    }
  },
  mounted() {
    this.isActive = this.selected
  }
})
/**
* ----------------------------------------------------------------------------------------------
* Laje component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('app-laje', {
  template: `
        <form class="col-12">
            <h3 class="mb-4 mt-3 section-subtitle">Cálculo Laje</h3> 
            <div class="form-group row">
                <label for="espessura" class="col-md-3 col-form-label">Espessura</label>
                <div class="col-lg-5 col-md-8 col-10">
                    <input type="text" class="form-control" v-model="espessura">
                </div>
                <div class="col-1">
                    <span>cm</span>
                </div>
            </div>
            <div class="form-group row">
                <label for="largura" class="col-md-3 col-form-label">Largura</label>
                <div class="col-lg-5 col-md-8 col-10">
                    <input type="text" class="form-control" v-model="largura">
                </div>
                <div class="col-1">
                    <span>m</span>
                </div>
            </div>
            <div class="form-group row">
                <label for="comprimento" class="col-md-3 col-form-label">Comprimento</label>
                <div class="col-lg-5 col-md-8 col-10">
                    <input type="text" class="form-control" v-model="comprimento">
                </div>
                <div class="col-1">
                    <span>m</span>
                </div>
            </div>
            <div class="form-group row">7
                <div class="col-lg-4 offset-lg-5">
                    <button class="btn btn-primary-inverse" @click.prevent="calculoLaje">Calcular</button>
                </div>
            </div>
            <app-orcamento :result="resultado"></app-orcamento>
        </form>

    `,
  data() {
    return {
      espessura: '',
      largura: '',
      comprimento: '',
      resultado: '',
    }
  },
  methods: {
    calculoLaje() {
      let esp = parseFloat(this.espessura.replace(',', '.')),
        larg = parseFloat(this.largura.replace(',', '.')),
        comp = parseFloat(this.comprimento.replace(',', '.')),
        cubicMeter = esp * larg * comp;
      let calculo = Math.round((cubicMeter) / 100)
      this.resultado = String(calculo).replace('.', ',')
    },
  },
})
/**
* ----------------------------------------------------------------------------------------------
* Pilar Component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('app-pilar', {
  template: `
    <form class="col-12"> 
        <h3 class="mb-4 mt-3 section-subtitle">Cálculo Pilar</h3> 
        <div class="form-group row">
            <label for="espessura" class="col-md-3 col-form-label">Espessura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="espessura">
            </div>
            <div class="col-1">
              <span>cm</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="largura" class="col-md-3 col-form-label">Largura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="largura">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="comprimento" class="col-md-3 col-form-label">Comprimento</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="comprimento">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-lg-4 offset-lg-5">
                <button class="btn btn-primary-inverse" @click.prevent="calculoPilar">Calcular</button>
            </div>
        </div>
        <app-orcamento :result="resultado"></app-orcamento>
    </form>
    `,
  data() {
    return {
      espessura: '',
      largura: '',
      comprimento: '',
      resultado: ''
    }
  },
  methods: {
    calculoPilar() {
    let esp = parseFloat(this.espessura.replace(',', '.')),
      larg = parseFloat(this.largura.replace(',', '.')),
      comp = parseFloat(this.comprimento.replace(',', '.')),
      cubicMeter = esp * larg * comp;
    let calculo = Math.round((cubicMeter) / 100)
    this.resultado = String(calculo).replace('.', ',')
    }
  },
})
/**
* ----------------------------------------------------------------------------------------------
* Viga Component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('app-viga', {
  template: `
    <form class="col-12"> 
        <h3 class="mb-4 mt-3 section-subtitle">Cálculo Viga</h3> 
        <div class="form-group row">
            <label for="espessura" class="col-md-3 col-form-label">Espessura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="espessura">
            </div>
            <div class="col-1">
              <span>cm</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="largura" class="col-md-3 col-form-label">Largura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="largura">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="comprimento" class="col-md-3 col-form-label">Comprimento</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="comprimento">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-lg-4 offset-lg-5">
                <button class="btn btn-primary-inverse" @click.prevent="calculoViga">Calcular</button>
            </div>
        </div>
        <app-orcamento :result="resultado"></app-orcamento>
    </form>
    `,
  data() {
    return {
      espessura: '',
      largura: '',
      comprimento: '',
      resultado: ''
    }
  },
  methods: {
    calculoViga() {
    let esp = parseFloat(this.espessura.replace(',', '.')),
      larg = parseFloat(this.largura.replace(',', '.')),
      comp = parseFloat(this.comprimento.replace(',', '.')),
      cubicMeter = esp * larg * comp;
    let calculo = Math.round((cubicMeter) / 100)
    this.resultado = String(calculo).replace('.', ',')
    }
  },
})
/**
* ----------------------------------------------------------------------------------------------
* Calcada Component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('app-calcada', {
  template: `
    <form class="col-12"> 
        <h3 class="mb-4 mt-3 section-subtitle">Cálculo Calçada</h3> 
        <div class="form-group row">
            <label for="espessura" class="col-md-3 col-form-label">Espessura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="espessura">
            </div>
            <div class="col-1">
              <span>cm</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="largura" class="col-md-3 col-form-label">Largura</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="largura">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <label for="comprimento" class="col-md-3 col-form-label">Comprimento</label>
            <div class="col-lg-5 col-md-8 col-10">
              <input type="text" class="form-control" v-model="comprimento">
            </div>
            <div class="col-1">
              <span>m</span>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-lg-4 offset-lg-5">
                <button class="btn btn-primary-inverse" @click.prevent="calculoCalcada">Calcular</button>
            </div>
        </div>
        <app-orcamento :result="resultado"></app-orcamento>
    </form>
    `,
  data() {
    return {
      espessura: '',
      largura: '',
      comprimento: '',
      resultado: ''
    }
  },
  methods: {
    calculoCalcada() {
    let esp = parseFloat(this.espessura.replace(',', '.')),
      larg = parseFloat(this.largura.replace(',', '.')),
      comp = parseFloat(this.comprimento.replace(',', '.')),
      cubicMeter = esp * larg * comp;
    let calculo = Math.round((cubicMeter) / 100)
    this.resultado = String(calculo).replace('.', ',')
    }
  },
})


/**
* ----------------------------------------------------------------------------------------------
* Orçamento Component
* ----------------------------------------------------------------------------------------------
*/
Vue.component('app-orcamento', {
  template: `
  <div v-show="showArea" class="pt-4 pt-lg-3 calculadora-orcamento">
    <div class="row">
      <div class="col-12 col-lg-5">
        <div class="row pt-3 pt-lg-0">
          <label for="concreto" class="col-md-3 col-lg-12 col-form-label simulator-result-label pt-lg-0">Você precisará de:</label>
          <div class="col-lg-12 col-md-9 mt-n3 mt-md-0 mt-lg-n3">
              <input type="text" class="form-control simulator-result" :value="resultado_final" readonly>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 mt-md-3 mt-lg-0">
        <div class="row">
          <div class="col-12 col-md-4 col-lg-12">
            <p class="mb-lg-2"><span class="section-subtitle">Viu como é fácil?</span><br>Quer saber mais?</p>
          </div>
          <div class="col-12 col-md-8 col-lg-12">
            <a :href="'https://api.whatsapp.com/send?phone=5511987536443&text=Ol%C3%A1,%20gostaria%20de%20fazer%20um%20or%C3%A7amento%20para%20' + result + '%20metros%20c%C3%BAbicos%20de%20concreto.'" class="btn btn-primary btn-arrow">Solicite um orçamento</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  `,
  props: {
    result: {
      type: String,
      default: null,
    }
  },
  computed: {
    showArea(){
      if (this.result != '' && !isNaN(this.result) && this.result != 'NaN') {
        return true;
      }
      return false;
    },
    resultado_final() {
      if (this.result != '' && !isNaN(this.result) && this.result != 'NaN') {
        return this.result + ' m³';
      }
    }
  },
})



/**
* ----------------------------------------------------------------------------------------------
* Vue instance
* ----------------------------------------------------------------------------------------------
*/
new Vue({
  el: '#app'
});