<template>
  <div>
    <div class="mobile-header">
      <router-link :to="{ name: 'Company' }" class="btn btn-secondary">
        <font-awesome-icon icon="arrow-left" />
        <span class="d-none d-md-inline" v-text="$t('entity.action.back')"></span>
      </router-link>
      <div class="header-actions">
        <button type="button" class="btn btn-success" @click="save" :disabled="isSaving">
          <font-awesome-icon icon="save" />
          <span class="d-none d-md-inline" v-text="$t('entity.action.save')"></span>
        </button>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="spinner-border text-primary" role="status">
        <span class="sr-only">{{ t$('global.loading') }}</span>
      </div>
    </div>

    <div v-else class="form-container">
      <vxe-form
        :data="company"
        custom-layout
        class="vxe-form-group"
        title-align="left"
        title-width="90"
        :rules="formRules"
        ref="companyForm"
      >
        <vxe-form-item field="number" :title="t$('jewpmsApp.company.number')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.number" type="text" :readonly="!!company.id" data-cy="number" :clearable="!company.id" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="name" :title="t$('jewpmsApp.company.name')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" type="text" clearable data-cy="name" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="address" :title="t$('jewpmsApp.company.address')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.address" type="text" clearable data-cy="address" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="licenseNo" :title="t$('jewpmsApp.company.licenseNo')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.licenseNo" type="text" clearable data-cy="licenseNo" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="licenseExpire" :title="t$('jewpmsApp.company.licenseExpire')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.licenseExpire" type="date" clearable data-cy="licenseExpire" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="contactPerson" :title="t$('jewpmsApp.company.contactPerson')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.contactPerson" type="text" clearable data-cy="contactPerson" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="contactPhone" :title="t$('jewpmsApp.company.contactPhone')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.contactPhone" type="text" clearable data-cy="contactPhone" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="type" :title="t$('jewpmsApp.company.type')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.type" clearable data-cy="type">
              <vxe-option :value="null" :label="t$('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="dict in typeDicts"
                :key="dict.number"
                :value="dict.number"
                :label="dict.name + ' (' + dict.number + ')'"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item field="status" :title="t$('jewpmsApp.company.status')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.status" clearable data-cy="status">
              <vxe-option :value="null" :label="t$('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="dict in statusDicts"
                :key="dict.number"
                :value="dict.number"
                :label="dict.name + ' (' + dict.number + ')'"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item field="remark" :title="t$('jewpmsApp.company.remark')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.remark" type="text" clearable data-cy="remark" />
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </div>
</template>

<script lang="ts" src="./company-edit.component.ts"></script>

<style>
@import '@/../content/css/edit-form.css';
</style>
