<template>
  <div>
    <h1>WorkOrder header</h1>

    <v-row>
      <v-col cols="12" sm="6" lg="4" xl="3" v-if="value.serial != 0">
        <template v-if="canEditSerial">
          <v-text-field
            v-model="value.serial"
            :readonly="formState.readOnly"
            :label="$ay.t('WorkOrderSerialNumber')"
            ref="serial"
            data-cy="serial"
            :rules="[
              form().integerValid(this, 'serial'),
              form().required(this, 'serial')
            ]"
            :error-messages="form().serverErrors(this, 'serial')"
            @input="fieldValueChanged('serial')"
          ></v-text-field>
        </template>
        <template v-else>
          <div>
            <span class="text-caption">
              {{ $ay.t("WorkOrderSerialNumber") }}</span
            >
          </div>
          <div>
            <span class="text-h5">{{ value.serial }}</span>
          </div>
        </template>
      </v-col>

      <v-col v-if="form().showMe(this, 'Notes')" cols="12">
        <v-textarea
          v-model="value.notes"
          :readonly="formState.readOnly"
          :label="$ay.t('WorkOrderSummary')"
          :error-messages="form().serverErrors(this, 'notes')"
          ref="notes"
          data-cy="notes"
          @input="fieldValueChanged('notes')"
          auto-grow
        ></v-textarea>
      </v-col>
    </v-row>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  data() {
    return {
      canEditSerial: window.$gz.role.hasRole([
        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
      ])
    };
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    }
  },

  methods: {
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    }
  }
};
/*
 data: {
            id: 10,
            concurrency: 7713074,
            serial: 10,
            notes:
              "Sequi quia est occaecati vel aperiam dicta praesentium velit et.",
            wiki: null,
            customFields: null,
            tags: ["orange", "violet"],
            customerId: 14,
            projectId: null,
            internalReferenceNumber: "irf-4603",
            customerReferenceNumber: "crf-4720",
            customerContactName: "contact name here",
            fromQuoteId: null,
            fromPMId: null,
            fromCSRId: null,
            serviceDate: "2020-09-03T03:06:41.238542Z",
            completeByDate: "2020-09-08T03:06:41.238542Z",
            invoiceNumber: null,
            customerSignature: null,
            customerSignatureName: null,
            customerSignatureCaptured: "0001-01-01T00:00:00Z",
            postAddress: null,
            postCity: null,
            postRegion: null,
            postCountry: null,
            postCode: null,
            address: null,
            city: null,
            region: null,
            country: null,
            latitude: null,
            longitude: null,
            items: [
              {
                id: 20,
                concurrency: 7713074,
                notes: "itemnotes",
                wiki: null,
                customFields: null,
                tags: [],
                workOrderId: 10,
                techNotes: "technotes",
                workorderItemStatusId: null,
                workorderItemPriorityId: null,
                requestDate: "2020-09-03T03:06:41.238542Z",
                warrantyService: false,
                isDirty: false,
                expenses: [],
                labors: [],
                loans: [],
                parts: [],
                partRequests: [],
                scheduledUsers: [
                  {
                    id: 39,
                    concurrency: 7713074,
                    userId: 30,
                    estimatedQuantity: 1,
                    startDate: null,
                    stopDate: null,
                    serviceRateId: null,
                    isDirty: false,
                    workOrderItemId: 20
                  },
                  {
                    id: 40,
                    concurrency: 7713074,
                    userId: 10,
                    estimatedQuantity: 2,
                    startDate: null,
                    stopDate: null,
                    serviceRateId: null,
                    isDirty: false,
                    workOrderItemId: 20
                  }
                ],
                tasks: [],
                travels: [],
                units: [],
                outsideServices: []
              }
            ],
            states: [],
            isDirty: false
          }
        }
*/
</script>
