<template>
  <div>
    <div v-if="false" class="text-left mb-1">Relacionamento: </div>
    <div class="profile-card px-2 pt-3 pb-3">
      <b-form>
        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-6 col-sm-12">
            <div class="text-left label">
              <label for="my-code">Meu Código:</label></div>
            <b-form-input
              id="my-code"
              class="radius-theme"
              type="tel"
              :disabled="true"
              v-model.trim="profileData.code"
            ></b-form-input>
          </b-form-group>
          <b-form-group class="col-md-6 col-sm-12">
            <div class="text-left label text-minified pt-1">
              <label for="costumer-since">
                Consultora Desde:
              </label>
            </div>
            <the-mask
              id="costumer-since"
              type="tel"
              class="form-control radius-theme"
              mask="##/##/####"
              :disabled="true"
              v-model.trim="createdAt"
            />
          </b-form-group>

        </b-form-row>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-6 col-sm-12">
            <div class="text-left label">
              <label for="sector">Setor:</label></div>
            <b-form-input
              id="sector"
              class="radius-theme"
              type="tel"
              v-model.trim="profileData.sector.name"
              :disabled="true"
            ></b-form-input>
          </b-form-group>
          <b-form-group class="col-md-6 col-sm-12">
            <div class="text-left label">
              <label for="section">Seção:</label></div>
            <b-form-input
              id="section"
              class="radius-theme"
              type="tel"
              v-model.trim="profileData.section"
              :disabled="true"
            ></b-form-input>
          </b-form-group>
        </b-form-row>
      </b-form>
      <div>
        <div class="text-left akkurat-regular">Entre em contato: </div>
        <profile-button title="Contatos" icon="address-book" @clicked="openContactsModal" />
      </div>
    </div>
  </div>
</template>

<script>
import ProfileButton from '@/components/profile/ProfileButton.vue';

export default {
  name: 'account-relationship',
  components: {
    ProfileButton,
  },
  data: () => ({
    myCode: '',
    costumerSince: '',
    sector: '',
    section: '',
  }),
  computed:{
    createdAt:{
      get(){
        return this.$options.filters.formatDDMMAAAA(this.profileData.created_at);
      }
    },
    profileData:{
      get(){
        
        if(this.$store.getters.isSalesConsultant || this.$store.getters.isPromoter){
          return this.$store.state.user.user.sales_consultant
        }

        return this.$store.state.user.user.manager_sales_consultant;

      }
    }
  },
  methods: {
    openContactsModal() {
      this.$modal.show('contacts-modal');
    },
  },
};
</script>

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

.text-minified {
  font-size: 0.84rem;
}

label {
  font-family: 'Akkurat Regular';
}

</style>
