<template>
  <q-page padding>
    <m-edit-header
      title="Şirket Kaydı"
      :id="model.ID"
      :show-save-cancel="true"
      @save="save"
      @cancel="cancel"
    />
    <q-form ref="frmMain" greedy autofocus>
      <q-card>
        <q-card-section>
          <div class="row q-col-gutter-md">


            <q-input class="col-xs-12 col-sm-4"
                     v-model="model.Code"
                     :label="t('Company.Code')"
                     bottom-slots
                     :rules="[rules.required]"
            />

            <q-input class="col-xs-12 col-sm-6"
                     v-model="model.Name"
                     :label="t('Company.Title')"
                     bottom-slots
                     :rules="[]"
            />

            <q-checkbox class="col-xs-12 col-sm-2"
                        v-model="model.IsActive"
                        :label="model._colOptions.IsActive.label"
                        bottom-slots
                        :rules="[]"
            />
          </div>

          <div class="row q-col-gutter-md">
            <q-input class="col"
                     v-model="model.Notes"
                     :label="t('Company.Notes')"
                     bottom-slots
                     :rules="[]"
                     autogrow
            />
          </div>

        </q-card-section>

        <q-card-section>

        </q-card-section>
      </q-card>


    </q-form>

  </q-page>
</template>
<script setup>
import MEditHeader from 'src/libjs/comp/MEditHeader.vue'
import { onBeforeMount, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLoginStore } from 'stores/login'
import Company from 'src/model/company'
import { rules } from 'src/libjs/lib/validation'
import { i18n } from 'boot/i18n'

const t = i18n.global.t

const frmMain = ref(null)

const endPoint = ref('/company')
const route = useRoute()
const router = useRouter()
const store = useLoginStore()
const model = reactive(new Company(endPoint.value))

const ld = reactive({})

onBeforeMount(() => {
  if (route.params.id) {
    load()
  }
})

const load = function () {
  const id = route.params.id
  if (!id) {
    return
  }
  model.read(id).then(() => {
    // do some other stuff
  })
}

const save = function () {
  frmMain.value.validate().then(success => {
    if (success) {
      model.save(false)
    } else {
      // oh no, user has filled in
      // at least one invalid value
    }
  })
}

const cancel = function () {
  router.push(endPoint.value)
}

</script>
