<template>
  <div class="q-pa-md column q-gutter-lg">
    <!-- Dados Bancários -->
    <div>
      <div class="text-subtitle1 text-weight-medium q-mb-sm">
        Dados Bancários
      </div>

      <div class="row q-col-gutter-sm">
        <DefaultInput
          v-model="form.account_holder"
          label="Titular da Conta"
          class="col-12 col-md-4"
          outlined
          disable
        />
        <DefaultInput
          v-model="form.agency"
          label="Agência"
          class="col-12 col-md-4"
          outlined
          disable
        />
        <DefaultInput
          v-model="form.account"
          label="Conta"
          class="col-12 col-md-4"
          outlined
          disable
        />

        <DefaultInput
          v-model="form.bank"
          label="Banco"
          class="col-12 col-md-3"
          outlined
          disable
        />
        <DefaultInput
          v-model="form.pix_key"
          label="Chave Pix"
          class="col-12 col-md-3"
          outlined
          disable
        />
        <DefaultSelect
          v-model="form.tax_regime"
          label="Regime Tributário"
          :options="taxRegimeOptions"
          class="col-12 col-md-3"
          outlined
          emit-value
          map-options
          disable
        />
        <DefaultSelect
          v-model="form.account_type"
          label="Tipo de Conta"
          :options="accountTypeOptions"
          class="col-12 col-md-3"
          outlined
          emit-value
          map-options
          disable
        />
      </div>
    </div>

    <!-- Dados para Faturamento -->
    <div>
      <div class="text-subtitle1 text-weight-medium q-mb-sm">
        Dados para Faturamento
      </div>

      <div class="row q-col-gutter-sm">
        <DefaultSelect
          v-model="form.billing_method"
          label="Forma de Cobrança"
          :options="billingMethodOptions"
          class="col-12 col-md-6"
          outlined
          emit-value
          map-options
          disable
        />
        <DefaultInputDatePicker
          v-model="form.due_date"
          label="Data de Vencimento"
          class="col-12 col-md-6"
          disable
        />
        <DefaultInput
          v-model="form.financial_email"
          label="E-mail Financeiro"
          class="col-12"
          outlined
          disable
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
import { getFinancialMe } from "src/api/unit_financial";

const props = defineProps({
  unitId: { type: Number, default: null },
});

const taxRegimeOptions = [
  { label: "Selecione", value: null },
  { label: "Simples Nacional", value: "simples_nacional" },
  { label: "Lucro Presumido", value: "lucro_presumido" },
  { label: "Lucro Real", value: "lucro_real" },
  { label: "MEI", value: "mei" },
];

const accountTypeOptions = [
  { label: "Selecione", value: null },
  { label: "Conta Corrente", value: "corrente" },
  { label: "Conta Poupança", value: "poupanca" },
];

const billingMethodOptions = [
  { label: "Selecione", value: null },
  { label: "Boleto", value: "boleto" },
  { label: "Débito Automático", value: "debit" },
  { label: "PIX", value: "pix" },
  { label: "Cartão de Crédito", value: "credit_card" },
];

const defaultForm = () => ({
  tax_regime: null,
  bank: null,
  agency: null,
  account: null,
  account_type: null,
  account_holder: null,
  pix_key: null,
  billing_method: null,
  due_date: null,
  financial_email: null,
});

const form = ref(defaultForm());

async function fetchData() {
  if (!props.unitId) return;
  try {
    const data = await getFinancialMe();
    if (data) Object.assign(form.value, data);
  } catch (e) {
    console.error(e);
  }
}

onMounted(fetchData);
</script>
