<template>
  <div>
    <div class="mobile-header">
      <router-link :to="{ name: 'Region' }" 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="region" custom-layout class="vxe-form-group" title-align="left" title-width="90" :rules="formRules" ref="regionForm">
        <vxe-form-item field="number" :title="$t('jewpmsApp.region.number')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.number" type="text" :readonly="!!region.id" data-cy="number" :clearable="!region.id" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="name" :title="$t('jewpmsApp.region.name')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" type="text" data-cy="name" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item field="parentNumber" :title="$t('jewpmsApp.region.parentNumber')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.parentNumber" clearable data-cy="parentNumber">
              <vxe-option
                v-for="item in parentRegions"
                :key="item.number"
                :value="item.number"
                :label="item.name + ' (' + item.number + ')'"
              />
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item field="contactPerson" :title="$t('jewpmsApp.region.contactPerson')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.contactPerson" type="text" data-cy="contactPerson" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item field="contactPhone" :title="$t('jewpmsApp.region.contactPhone')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.contactPhone" type="text" data-cy="contactPhone" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item field="email" :title="$t('jewpmsApp.region.email')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.email" type="text" data-cy="email" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item field="contactAddress" :title="$t('jewpmsApp.region.contactAddress')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.contactAddress" type="text" data-cy="contactAddress" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item field="status" :title="$t('jewpmsApp.region.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-select>
          </template>
        </vxe-form-item>
        <vxe-form-item field="sortNo" :title="$t('jewpmsApp.region.sortNo')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.sortNo" type="number" min="0" exponential clearable data-cy="sortNo" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="remark" :title="$t('jewpmsApp.region.remark')" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea v-model="data.remark" data-cy="remark" />
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </div>
</template>

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

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