<template>
  <div class="row">
    <div class="col-12">
      <div class="row q-col-gutter-xs">
        <div
          v-if="domainType() !== 'simple'"
          class="col-xs-12 col-md-3 q-mb-sm"
        >
          <ListAutocomplete
            v-if="isCeg()"
            :source="getCarItens"
            :isLoading="carItensLoading"
            label="Automóvel"
            @selected="onCarSelect"
            placeholder="Gol, Corsa, Uno..."
            :acceptInput="true"
          />
          <q-select
            dense
            outlined
            v-else
            :options="productCategory"
            :isLoading="false"
            v-model="values.type"
            label="Categoria do produto"
            placeholder="Selecione uma categoria"
          />
        </div>

        <div v-if="!isCeg()" class="col-xs-12 col-md-3 q-mb-sm">
          <q-input
            dense
            outlined
            stack-label
            lazy-rules
            v-model="values.product"
            type="text"
            :label="$t('form.labels.type')"
            placeholder="Digite o tipo do produto"
          />
        </div>

        <div
          v-if="isCeg()"
          :class="
            'col-xs-12 ' +
            (domainType() === 'simple' ? 'col-md-6' : 'col-md-3') +
            ' q-mb-sm'
          "
        >
          <q-select
            outlined
            v-if="isCeg()"
            :options="groupTables"
            :isLoading="false"
            @input="onGroupSelect"
            v-model="gTable"
            label="Tipo de Veículo"
            placeholder="Selecione uma opção"
          />
          <q-input
            v-else
            dense
            outlined
            stack-label
            lazy-rules
            v-model="values.type"
            type="text"
            :label="$t('form.labels.type')"
            placeholder="Digite o tipo do produto"
          />
        </div>
        <div class="col-xs-12 col-md-6 q-mb-sm">
          <q-input
            dense
            outlined
            stack-label
            lazy-rules
            reverse-fill-mask
            prefix="R$"
            v-model="values.totalPrice"
            type="text"
            :label="
              $t(
                domainType() === 'simple'
                  ? 'form.labels.product_price'
                  : 'form.labels.price'
              )
            "
            mask="#,##"
            fill-mask="0"
          />
        </div>
      </div>

      <div
        v-show="!isCeg()"
        class="row justify-center q-pa-md"
        style="border: 1px solid #cccccc"
      >
        <div class="col-12 text-subtitle2 text-center q-pb-md">
          {{ $t("form.section01") }}
        </div>

        <div class="col-12">
          <div
            v-for="(myPackage, index) in values.packages"
            :key="index"
            class="row"
          >
            <div class="col-xs-12 col-sm-11">
              <div class="row justify-between">
                <div class="col-xs-12 col-sm-2">
                  <q-input
                    dense
                    outlined
                    stack-label
                    lazy-rules
                    reverse-fill-mask
                    v-model="myPackage.qtd"
                    type="text"
                    :label="$t('form.labels.qtty')"
                    mask="#"
                    fill-mask="0"
                    :rules="[val => val >= 1 || 'Quantidade mínima é 1']"
                    @change="getTotalCubageAndWeight"
                  />
                </div>
                <div class="col-xs-12 col-sm-2">
                  <q-input
                    dense
                    outlined
                    stack-label
                    lazy-rules
                    reverse-fill-mask
                    suffix="kg"
                    v-model="myPackage.weight"
                    type="text"
                    :label="$t('form.labels.weight')"
                    @change="getTotalCubageAndWeight"
                    mask="#,###"
                    fill-mask="0"
                    :rules="[
                      val => !!val && parseFloat(val.replace(',', '.')) > 0 || 'Informe um peso válido maior que 0'
                    ]"
                  />
                </div>
                <div class="col-xs-12 col-sm-2">
                  <q-input
                    dense
                    outlined
                    stack-label
                    lazy-rules
                    reverse-fill-mask
                    suffix="Metros"
                    v-model="myPackage.height"
                    type="text"
                    :label="$t('form.labels.height')"
                    @change="getTotalCubageAndWeight"
                    mask="#,##"
                    fill-mask="0"
                    :rules="[
                      val => !!val && parseFloat(val.replace(',', '.')) > 0 || 'Informe uma altura válida maior que 0'
                    ]"
                  />
                </div>
                <div class="col-xs-12 col-sm-2">
                  <q-input
                    dense
                    outlined
                    stack-label
                    lazy-rules
                    reverse-fill-mask
                    suffix="Metros"
                    v-model="myPackage.width"
                    type="text"
                    :label="$t('form.labels.width')"
                    @change="getTotalCubageAndWeight"
                    mask="#,##"
                    fill-mask="0"
                    :rules="[
                      val => !!val && parseFloat(val.replace(',', '.')) > 0 || 'Informe uma largura válida maior que 0'
                    ]"
                  />
                </div>
                <div class="col-xs-12 col-sm-2">
                  <q-input
                    dense
                    outlined
                    stack-label
                    lazy-rules
                    reverse-fill-mask
                    suffix="Metros"
                    v-model="myPackage.depth"
                    type="text"
                    :label="$t('form.labels.depth')"
                    @change="getTotalCubageAndWeight"
                    mask="#,##"
                    fill-mask="0"
                    :rules="[
                      val => !!val && parseFloat(val.replace(',', '.')) > 0 || 'Informe uma profundidade válida maior que 0'
                    ]"
                  />
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-sm-1 q-pb-md">
              <div class="row justify-end">
                <div class="col-xs-12 col-sm-5 text-center">
                  <q-btn
                    flat
                    round
                    v-if="index == 0"
                    icon="delete"
                    color="red"
                    :disabled="true"
                  />
                  <q-btn
                    flat
                    round
                    v-else
                    icon="delete"
                    color="red"
                    @click="removeProduct(index)"
                  />
                </div>
                <div class="col-xs-12 col-sm-5 text-center">
                  <q-btn
                    flat
                    round
                    v-if="index == values.packages.length - 1"
                    icon="add_circle"
                    size="md"
                    color="green"
                    @click="addProduct"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

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

<script>
import { mapGetters } from "vuex";
import { MyPackage } from "@freteclick/quasar-common-ui/src/utils/mypackage";
import ListAutocomplete from "@freteclick/quasar-common-ui/src/components/common/ListAutocomplete.vue";
import { fetch } from "@freteclick/../../src/boot/myapi";
import { DOMAIN } from "@freteclick/../../src/config/domain";

export default {
  created() {
    this.loadGroupTables();
  },
  props: {
    values: {
      type: Object,
      required: true,
    },
  },

  components: {
    ListAutocomplete,
  },

  data() {
    return {
      gTable: "",
      carItens: [],
      loadMainGroupTable: true,
      loadGroupTable: false,
      groupTables: [],
      carItensLoading: false,
    };
  },
  computed: {
    ...mapGetters({
      myCompany: "people/currentCompany",
      defaultCompany: "people/defaultCompany",
    }),

    productCategory() {
      // let products = [
      //   "Alimentício não perecível",
      //   "Pneus",
      //   "Banheira",
      //   "Alimentício perecível",
      //   "Animais",
      //   "Armamento e munições",
      //   "Armário de Aço",
      //   "Artigo decoração",
      //   "Automotivo",
      //   "Automotivo (peças usadas)",
      //   "Baterias em geral",
      //   "Bebidas",
      //   "Brinquedos",
      //   "Carga Refrigerada",
      //   "Cigarro",
      //   "Construção em geral",
      //   "Construção - Piso de borracha",
      //   "Contrução - Pisos, Azulejos e Revestimentos",
      //   "Dinheiro (moeda e papel)",
      //   "Eletrodomésticos",
      //   "Eletrônicos",
      //   "Eletro-portátil",
      //   "Energia Solar",
      //   "Equipamentos",
      //   "Equipamentos esportivos",
      //   "Ferramentas",
      //   "Fios e Cabos",
      //   "Jóias e semi-jóias",
      //   "Livros",
      //   "Máquinas",
      //   "Metais preciosos",
      //   "Motores novos",
      //   "Motores usados",
      //   "Móveis",
      //   "Móveis usados",
      //   "Mudança (móveis e documentos)",
      //   "Objeto de Arte",
      //   "Papelaria",
      //   "Plantas",
      //   "Produto químico não-perigoso",
      //   "Produto químico perigoso",
      //   "Quadro",
      //   "Roupas e calçados",
      //   "Siderúrgia",
      //   "Tecido",
      //   "Tinta base água",
      //   "Tinta base solvente",
      //   "Utensílio plástico",
      //   "Vidro",
      // ];

      let products = [
        "Acessórios - Airsoft / Paintball",
        "Acessórios - Aquário (Não Frágil)",
        "Acessórios - Celular (Não Frágil)",
        "Acessórios - Infantis (Não Frágil)",
        "Acessórios - Moda (Não Frágil)",
        "Acessórios - Montaria",
        "Acessórios - Pesca",
        "Acessórios - Piscina",
        "Alimentos - Grão, Sementes e Cereais",
        "Alimentos - Suplementos / Vitaminas",
        "Alimentos Não Perecíveis",
        "Aparelhos - Celulares / Smartphones",
        "Aparelhos - Games e Consoles",
        "Artigos Náuticos",
        "Artigos para Bebês (Enxoval)",
        "Artigos para Camping",
        "Artigos para Festas (Não Frágil)",
        "Artigos para Pesca (Não Frágil)",
        "Automotivo - Acessórios",
        "Automotivo - Óleo Lubrificante (Caixa ou Galão)",
        "Automotivo - Peças (Frágil)",
        "Automotivo - Peças (Não Frágil)",
        "Automotivo - Peças Usadas (Embaladas)",
        "Automotivo - Pneus e Rodas",
        "Banheiras, Spas e Ofurôs (Embalagem Madeira)",
        "Banheiras, Spas e Ofurôs (Embalagem Plást.Bolha/Papelão)",
        "Baterias, Pilhas e Carregadores",
        "Bebidas / Destilados (Garrafa PET)",
        "Bebidas / Destilados (Garrafa Vidro)",
        "Bicicleta - Acessórios",
        "Bicicletas",
        "Bicicleta elétrica / Monociclo elétrico / Patinete elétrico",
        "Bobinas e Rolos (Frágil)",
        "Bobinas e Rolos (Não Frágil)",
        "Brindes (Frágil / Vidro / Cerâmica / Alumínio)",
        "Brindes (Não Frágil)",
        "Brinquedos e Hobbies",
        "Brinquedos para Playground",
        "Cadeira de Rodas",
        "Calçados",
        "Cama, Mesa e Banho",
        "Chapas de Acrílico (Frágil)",
        "Chapas de Madeira",
        "Construção - Acessórios em Geral (Não Frágil)",
        "Construção - Acessórios para Elétrica / Hidráulica",
        "Construção - Acessórios para Pintura",
        "Construção - Cimentos e Argamassas",
        "Construção - Esquadrias de Alumínio (Com Vidro)",
        "Construção - Esquadrias de Alumínio (Sem Vidro)",
        "Construção - Ferramentas",
        "Construção - Materiais Elétricos - Fios e Cabos",
        "Construção - Materiais Elétricos (Frágil)",
        "Construção - Materiais Elétricos (Não Frágil)",
        "Construção - Materiais em Geral (Não Frágil)",
        "Construção - Materiais Hidráulicos / Encanamentos",
        "Construção - Pia / Vasos (Porcelana)",
        "Construção - Pias / Tanques (Aço Inox)",
        "Construção - Pisos de Borracha",
        "Construção - Pisos de Madeira (Laminado / Deck)",
        "Construção - Pisos e Azulejos  (Pedra / Cerâmica / Porcelanato)",
        "Construção - Piso de Plástico",
        "Construção - Pisos Vinílicos",
        "Construção - Porta / Janelas (Com Vidro)",
        "Construção - Porta / Janelas (Sem Vidro)",
        "Construção -  Revestimentos (Pastilhas em Pedra / Cerâmica / Vidro)",
        "Construção - Tinta à Base de Água",
        "Construção - Tinta à Base de Solvente",
        "Decoração - Acessórios (Frágil / Vidro / Cerâmica)",
        "Decoração - Acessórios (Não Frágil)",
        "Decoração - Acessórios (Plantas Artificiais)",
        "Decoração - Artes / Artesanatos (Frágil)",
        "Decoração - Artes / Artesanatos (Não Frágil)",
        "Decoração - Carpetes / Tapetes",
        "Decoração - Cortinas / Persianas",
        "Eletrodomésticos",
        "Eletrônicos",
        "Eletrônicos - Acessórios para Áudio e Vídeo",
        "Eletroportáteis (Aparelhos)",
        "Eletroportáteis CD / DVD / Blu-Ray",
        "Embalagens - Artigos em geral",
        "Embalagens - Caixa em Papelão",
        "Embalagens - Caixa em Plástico",
        "Embalagens em geral",
        "Equipamentos - Ar e Ventilação",
        "Equipamentos - Carrinho de Carga / Paleteira",
        "Equipamentos - Doméstico/Portátil",
        "Equipamentos - Estética",
        "Equipamentos - Ferramentas Elétricas",
        "Equipamentos - Ferramentas Manuais",
        "Equipamentos - Placas de Energia Solar",
        "Equipamentos de Cozinha Industrial (Embalados)",
        "Equipamentos de Radiologia (Embalados)",
        "Equipamentos de Segurança / EPI",
        "Equipamentos para Solda/Compressor (Embalados)",
        "Esportivo - Acessórios em Geral",
        "Esportivo - Equipamentos Ginástica e Musculação",
        "Esportivo - Esteiras e Bicicletas Ergométricas",
        "Esportivo - Mesa de Jogos",
        "Esportivos - Caiaques / Pranchas",
        "Expositores (Com Vidro)",
        "Expositores (Sem Vidro)",
        "Extintores",
        "Ferragens",
        "Ferragens - Estruturas Metálicas / Perfis",
        "Higiene e Limpeza",
        "Higiene Pessoal - Beleza e Saúde",
        "Higiene Pessoal - Cosméticos / Perfumaria",
        "Higiene Pessoal - Fraldas / Absorventes",
        "Hospitalar - Materiais de Laboratório (Frágil)",
        "Hospitalar - Materiais de Laboratório (Não Frágil)",
        "Hospitalar - Materiais em Geral (Não Frágil)",
        "Hospitalar - Materiais Odontológicos",
        "Hospitalar - Materiais Radiológicos (Não Frágil)",
        "Hospitalar - Móveis e Equipamentos (Correlatos)",
        "Iluminação e Luminárias",
        "Impermeabilizantes",
        "Informática - Acessórios",
        "Informática - Acessórios para Games",
        "Informática - Computadores / Notebooks / Impressoras",
        "Instrumentos Musicais",
        "Jardinagem - Adubos",
        "Jardinagem - Ferramentas",
        "Jardinagem - Materiais em Geral",
        "Jardinagem - Produto Classificado (Fertilizantes)",
        "Jardinagem - Vaso Cerâmica / Porcelana / Louça",
        "Jardinagem - Vasos de Polietileno",
        "Jóias e Bijuterias",
        "Livros",
        "Lona Plástica",
        "Manequins",
        "Maquinário Industrial",
        "Materiais de Comunicação Visual",
        "Materiais de Irrigação",
        "Materiais Escolares",
        "Materiais Gráficos",
        "Moto - Acessórios",
        "Moto - Peças (Frágil)",
        "Moto - Peças (Não Frágil)",
        "Móveis - Com Vidro",
        "Móveis - Bancos / Banquetas / Cadeiras (Madeira)",
        "Móveis - Bancos / Banquetas / Cadeiras (Plástico)",
        "Móveis - Cadeiras para Escritório",
        "Móveis - Cadeiras Sala de Jantar",
        "Móveis - Camas / Beliches / Box",
        "Móveis - Colchões",
        "Móveis - Estofados / Sofás",
        "Móveis - Poltronas / Puffs",
        "Móveis de Aço",
        "Móveis Infantis",
        "Móveis Desmontados",
        "Móveis Montados",
        "Móveis para Jardim / Área Externa",
        "Móveis para Salão e Barbearia",
        "Óculos e Lentes (Frágil)",
        "Ótica - Acessórios (Não Frágil)",
        "Pallets de Madeira",
        "Pallets de Plástico",
        "Papelaria / Documentos",
        "PET - Acessórios",
        "PET - Artigos (Não Frágil)",
        "PET - Rações / Alimentos",
        "Produtos Cerâmicos",
        "Produtos Químicos Não Classificados",
        "Quadros / Molduras (Com Vidro)",
        "Quadros / Molduras (Sem Vidro)",
        "Tabacaria",
        "Tabacaria - Acessórios",
        "Têxtil",
        "Utensílios Industriais",
        "Utilidades Domésticas (Frágil)",
        "Utilidades Domésticas (Não Frágil)",
        "Vestuário",
        "Vidros / Frágil"
      ];


      products.sort();
      products.push("Outros (Sujeito a análise/Cancelamento)");

      return products;
    },
  },

  methods: {
    loadGroupTables() {
      this.getGroupTables(DOMAIN);
    },
    onCarSelect(item) {
      var text = item;
      var data = this.carItens.find((i) => i.value === item);

      if (data) {
        this.values.type = data.label;
        this.values.totalPrice = data.price.replace(".", ",");
      } else {
        this.values.type = text;
      }
    },

    getCarItens(input) {
      return new Promise((success) => {
        this.carItensLoading = true;

        const result = [];

        function requestCarItens(text) {
          let options = {
            method: "GET",
            params: {},
          };

          return fetch(`/car_models/search/` + text, options)
            .then((response) => response.json())
            .then((data) => {
              if (
                data.response &&
                data.response.data &&
                data.response.data.length
              ) {
                var itens = data.response.data;

                return itens.map((item) => {
                  return {
                    label: item.label,
                    value: item.value,
                    price: item.price,
                  };
                });
              }
              return [];
            });
        }

        let chars = [
          /[aáàãäâ]/g,
          /[eéèëê]/g,
          /[iíìïî]/g,
          /[oóòõöô]/g,
          /[uúùüû]/g,
        ];
        let inputFixed = input.trim().toLowerCase();

        inputFixed = inputFixed.replace(chars[0], "a");
        inputFixed = inputFixed.replace(chars[1], "e");
        inputFixed = inputFixed.replace(chars[2], "i");
        inputFixed = inputFixed.replace(chars[3], "o");
        inputFixed = inputFixed.replace(chars[4], "u");

        requestCarItens(inputFixed).then(
          ((res1) => {
            if (res1 && res1.length) {
              this.carItens = res1;
              success(res1);
              this.carItensLoading = false;
            } else {
              requestCarItens(input).then(
                ((res2) => {
                  if (res2 && res2.length) {
                    this.carItens = res2;
                    success(res2);
                  } else {
                    success([]);
                  }
                  this.carItensLoading = false;
                }).bind(this)
              );
            }
          }).bind(this)
        );
      });
    },
    getGroupTables(host) {
      if (host) {
        this.loadGroupTable = true;
        this.groupTables = [];
        const options = {
          method: "GET",
          params: {
            domain: host,
          },
        };

        return fetch(`/delivery_tax_groups/grouped`, options)
          .then((response) => response.json())
          .then((response) => {
            if (
              response &&
              response.response &&
              response.response.data &&
              response.response.data.members
            ) {
              response.response.data.members.forEach((element) => {
                if (this.groupTables.indexOf(element.groupName) == -1) {
                  this.groupTables.push(element.groupName);
                }
              });
              this.groupTables.sort();
            }
            this.loadGroupTable = false;
          });
      }
    },
    onGroupSelect(select) {
      this.values.groupTable = select;
    },
    isCeg() {
      const cegTypes = ["ceg", "simple"];
      return cegTypes.indexOf(this.domainType()) > -1;
    },
    domainType() {
      return this.defaultCompany ? this.defaultCompany.domainType : null;
    },

    getTotalCubageAndWeight() {
      this.$emit('updateCubageAndWeight');
    },

    addProduct() {
      this.values.cubage = "0";

      this.values.packages.push({
        qtd: "1",
        weight: "0,000",
        height: "0,00",
        width: "0,00",
        depth: "0,00",
      });
    },

    removeProduct(index) {
      this.values.packages = [
        ...this.values.packages.slice(0, index),
        ...this.values.packages.slice(index + 1),
      ];
    },

    isInvalid(key) {
      return (val) => {
        if (key == "price") {
          if (!val || !(parseFloat(val.replace(",", ".")) > 0))
            return this.$t("messages.fieldRequired");

          return true;
        }

        if (!(val && val.length > 0)) return this.$t("messages.fieldRequired");

        return true;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  max-width: 98px;
  height: 98px;
  min-height: 100%;
  text-align: center;
}
</style>
