<template>
  <modal name="address-billing" :scrollable="true"  width="90%" height="auto">
    <div>
      <b-row class="d-flex justify-content-between mb-2 mt-1">
        <b-col class="d-flex modal-text-color ml-2" cols="8">
          <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
            <font-awesome-icon icon="portrait" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">
          Envie o comprovante do endereço
            </div>
            <div class="akkurat-bold max-header-text"> Comprovante de Endereço para COBRNÇA </div>
          </div>
        </b-col>
        <b-col class="d-flex justify-content-end mr-2 mt-1">
          <span class="close-icon" @click="closeModal">
            <font-awesome-icon icon="times" class="align-self-center" />
          </span>
        </b-col>
      </b-row>

<b-row class="custom-body">

<b-col md='12'>


 <TextInput v-model="file"/>

</b-col>

</b-row>



      <b-row>
        <b-col class="d-flex justify-content-center my-3 px-3">
          
          <b-button
            class="btn shadow-none border-0 btn-default btn-blue"
            @click="closeModal"
          >
            CONTINUAR
          </b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>
import TextInput from "@/components/shared-components/UploadImageThumb";

export default {
  name: 'address-billing',
  components:{
 TextInput
  },
  data: () => ({
    file: '',
  }),
  methods: {
    closeModal() {
      this.$modal.hide('address-billing');
        this.$emit('modalClosed',this.file);
    }
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/css/main.scss';

.custom-body{
  margin:  10px;
}

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}


.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #FF9B64;
}

.rounded-div{

     background: #CB2D2D80 0% 0% no-repeat padding-box;
  svg {
        color: #CB2D2D;
  }
}

.close-icon{
    cursor: pointer;
}

</style>
