<template lang="html">
  <div>
    <h2 class="title">Configurações</h2>
    <hr>
    <form action="#" id="configEstablishment">
      <div class="row">

        <div class="form-group col-md-6">
          <label for="abertura">Horário de abertura</label>
          <input type="time" name="abertura" v-model="configs.abertura" class="personalize form-control">
        </div>

        <div class="form-group col-md-6">
          <label for="fechamento">Horário de fechamento</label>
          <input type="time" name="fechamento" v-model="configs.fechamento" class="personalize form-control">
        </div>

        <div class="form-group col-md-6">
          <label for="taxa_entrega">Taxa de entrega</label>
          <input type="number" name="taxa_entrega" v-model="configs.taxa_entrega" class="personalize form-control">
        </div>

        <div class="form-group col-md-6">
          <label for="tempo_entrega">Tempo de entrega</label>
          <input type="number" name="tempo_entrega" v-model="configs.tempo_entrega" class="personalize form-control">
        </div>

        <div class="form-group col-md-6">
          <label for="forma_pagamento">Formas de pagamento</label>
          <app-select
          v-model="formPaymentSelecte"
          :options="formPayments"
          :multiple="true"
          :searchable="false"
          placeholder="Selecione"
          :custom-label="customLabel"
          ></app-select>
        </div>

        <div class="form-group col-md-6">
          <label for="bandeiras_cartao">Bandeiras aceitas</label>
          <app-select
          v-model="flagsAcceptsSelected"
          :options="flagsAccepts"
          :multiple="true"
          :searchable="false"
          placeholder="Selecione"
          :custom-label="customLabel"
          ></app-select>
        </div>

        <div class="form-group col-md-12">
          <label for="bairros_cidade">Bairros aceitos</label>
          <app-select
          v-model="districtsAccpetsSelected"
          :options="districtsAccpets"
          :multiple="true"
          :searchable="false"
          placeholder="Selecione"
          :custom-label="customLabel"
          ></app-select>
        </div>

        <div class="form-group col-md-offset-4 col-md-4">
          <input type="submit" class="btn btn-success btn-block" value="Salvar">
          <input type="submit" class="btn btn-success btn-block" value="Atualizar">
        </div>

      </div>
    </form>
  </div>
</template>

<script>
import {urlBase} from 'src/config.js'
import {mapGetters} from 'vuex'
import AppSelect from 'vue-multiselect'
import axios from 'axios'
export default {
  name: 'Configuracao',
  data () {
    return {
      urlBase,
      configs: {},
      formPayments: [],
      formPaymentSelecte: [],
      flagsAccepts: [],
      flagsAcceptsSelected: [],
      districtsAccpets: [],
      districtsAccpetsSelected: []
    }
  },
  components: {
    AppSelect
  },
  computed: {
    ...mapGetters(['estabelecimentoId'])
  },
  methods: {

    customLabel (option) {
      return `${option.name}`
    },

    getFormPayment () {
      axios.get(this.urlBase + '/api/form_payment/').then((response) => {
        response.data.data.map((item) => {
          this.formPayments.push({id: item.id, name: item.nome})
        })
      }, (error) => {
        console.log(error)
      })
    },

    getFlagsAccept () {
      axios.get(this.urlBase + '/api/flags_accept/').then((response) => {
        response.data.data.map((item) => {
          this.flagsAccepts.push({id: item.id, name: item.nome})
        })
      }, (error) => {
        console.log(error)
      })
    },

    getDistrictsAccept () {
      axios.get(this.urlBase + '/api/district_street/').then((response) => {
        response.data.data.map((item) => {
          this.districtsAccpets.push({id: item.id, name: item.nome})
        })
      }, (error) => {
        console.log(error)
      })
    },
    getConfigs () {
      axios.get(this.urlBase + '/api/config?like=estabelecimento_id,1').then((response) => {
        const configs = response.data
        this.configs.abertura = configs.abertura
        this.configs.fechamento = configs.fechamento
        this.configs.taxa_entrega = configs.taxa_entrega
        this.configs.tempo_entrega = configs.tempo_entrega
        console.log(configs)
      })
    }

  },
  mounted () {
    this.getFormPayment()
    this.getFlagsAccept()
    this.getDistrictsAccept()
    this.getConfigs()
  }
}
</script>

<style lang="css" scoped>
  /* ROOT */
  .personalize{
    border:1px solid #C9C9C9;
    border-radius: 5px;
  }
  .title{
    font-size: 4rem;
  }
</style>