<template>
  <page-content page-title="Infolegale">
    <div slot="content">
      <div class="search-container">
        <v-layout row wrapp align-start>
          <v-flex md1>&nbsp;</v-flex>
          <v-flex md3 style="padding-right: 30px">
            <v-radio-group v-model="mode">
              <v-layout row wrapp align-start>
                <v-flex md6>
                  <v-radio
                    label="Sireniseur"
                    value="siren"
                  ></v-radio>
                </v-flex>
                <v-flex md6>
                  <v-radio
                    label="Siretiseur"
                    value="siret"
                  ></v-radio>
                </v-flex>
              </v-layout>
            </v-radio-group>
            Poids minimum :
            <v-layout row wrapp align-center>
              <v-flex md11>
                <v-slider v-model="formData.minWeight" step="1" color="accent" style="width: 380px"></v-slider>
              </v-flex>
              <v-flex md1>
                <span class="sliderValue">{{formData.minWeight}}</span>
              </v-flex>
            </v-layout>
            Proximité minimum :
            <v-layout row wrapp align-center>
              <v-flex md11>
                <v-slider v-model="formData.minDelta" step="1" color="accent" style="width: 380px"></v-slider>
              </v-flex>
              <v-flex md1>
                <span class="sliderValue">{{formData.minDelta}}</span>
              </v-flex>
            </v-layout>
            <v-text-field
              :label="$t('siret')"
              v-model="formData.siret"
            ></v-text-field>
            <v-text-field
              :label="$t('siren')"
              v-model="formData.siren"
            ></v-text-field>
            <v-text-field
              :label="$t('rna')"
              v-model="formData.rna"
            ></v-text-field>
            <v-text-field
              :label="$t('name')"
              v-model="formData.name"
            ></v-text-field>
            <v-text-field
              :label="$t('enseigne')"
              v-model="formData.enseigne"
            ></v-text-field>
            <v-text-field
              :label="$t('address')"
              v-model="formData.address"
            ></v-text-field>
            <v-text-field
              :label="$t('cp')"
              v-model="formData.cp"
            ></v-text-field>
            <v-text-field
              :label="$t('city')"
              v-model="formData.city"
            ></v-text-field>
            <v-text-field
              :label="$t('nj')"
              v-model="formData.nj"
            ></v-text-field>
            <v-text-field
              :label="$t('naf')"
              v-model="formData.naf"
            ></v-text-field>
            <div align="right">
              <v-btn flat="flat" @click="clearForm" class="cancelBtn">
                Effacer
              </v-btn>
              <v-btn flat="flat" @click="sendSearch" class="validBtn">
                Rechercher
              </v-btn>
            </div>
          </v-flex>
          <v-flex md7 style="border-left: 1px solid; padding-left: 30px; margin-bottom: 20px">
            COUCOU CA MARCHE
          </v-flex>
          <v-flex md1>&nbsp;</v-flex>
        </v-layout>
      </div>
    </div>
  </page-content>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        formData: {
          siret: null,
          siren: null,
          rna: null,
          name: null,
          enseigne: null,
          address: null,
          cp: null,
          city: null,
          nj: null,
          naf: null,
          minWeight: 10,
          minDelta: 10,
        },
        mode: 'siren',
      };
    },
    methods: {
      clearForm() {
        this.formData.siret = null;
        this.formData.siren = null;
        this.formData.rna = null;
        this.formData.name = null;
        this.formData.enseigne = null;
        this.formData.address = null;
        this.formData.cp = null;
        this.formData.city = null;
        this.formData.nj = null;
        this.formData.naf = null;
      },
    },
  };
</script>
<style lang="scss">
  @import "~@/styles/variables.scss";
  @import "~@/styles/mixins.scss";

  .search-container {
    position: relative;
    height: calc(100vh - #{$layout-toolbar-height} - (2 * #{$layout-space-base}));
    background-color: white;
    @include box-shadow;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    overflow-y: auto;
    padding: 20px;
  }

  .cancelBtn {
    color: $color-ilg-orange-accent-2 !important;
    font-weight: bold;
  }

  .validBtn {
    background-color: $color-ilg-orange-accent-2 !important;
    color: #FFFFFF !important;
    font-weight: bold;
  }

  .companyName {
    font-size: 16px;
    font-weight: bold;
    color: $color-ilg-blue-2;
  }

  .v-chip {
    height: 25px;
  }

  .v-card__title {
    padding-bottom: 0px !important;
  }

  .v-text-field {
    padding-top: 6px !important;
  }

  .sliderValue {
    font-weight: bold;
    font-size: 15px;
    color: $color-ilg-orange-accent-1;
  }

  .v-input__slot {
    margin-bottom: 0px !important;
  }

  .v-input--slider {
    margin-top: 0px !important;
  }

  .v-card__text {
    padding-top: 5px !important;
  }
</style>

<i18n>
  {
    "fr": {
    "siren"   : "Siren",
    "siret"   : "Siret",
    "rna"     : "N° RNA",
    "name"    : "Raison sociale",
    "enseigne": "Enseigne",
    "address" : "Adresse",
    "cp"      : "Code postal",
    "city"    : "Ville",
    "nj"      : "Forme juridique",
    "naf"     : "Code NAF"
    }
  }
</i18n>
