<template>
  <div>
    <v-row>
      <v-col
        cols="12"
        sm="6"
        lg="4"
        xl="3"
        v-if="value.serial != 0 && canEditSerial"
      >
        <v-text-field
          v-model="value.serial"
          :readonly="formState.readOnly"
          :label="$ay.t('PMSerialNumber')"
          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>
      </v-col>
      <v-col cols="12" sm="6" lg="4" xl="3">
        <gz-pick-list
          :aya-type="$ay.ayt().Customer"
          :show-edit-icon="!value.userIsRestrictedType"
          v-model="value.customerId"
          :readonly="formState.readOnly || value.userIsRestrictedType"
          :label="$ay.t('Customer')"
          :can-clear="false"
          ref="customerId"
          data-cy="customerId"
          :rules="[form().required(this, 'customerId')]"
          :error-messages="form().serverErrors(this, 'customerId')"
          @input="fieldValueChanged('customerId')"
        ></gz-pick-list>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'Address') && !value.userIsSubContractorRestricted
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <GzWoAddress
          v-model="value"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly || value.userIsRestrictedType"
          :pvm="pvm"
          data-cy="woAddress"
        />
      </v-col>

      <!-- ##################################################################################### -->

      <v-col cols="12" sm="6" lg="4" xl="3">
        <v-row>
          <v-col cols="5">
            <v-text-field
              v-model="value.repeatInterval"
              :readonly="formState.readOnly"
              :label="$ay.t('RepeatInterval')"
              ref="repeatInterval"
              data-cy="repeatInterval"
              :rules="[form().integerValid(this, 'repeatInterval')]"
              :error-messages="form().serverErrors(this, 'repeatInterval')"
              @input="fieldValueChanged('repeatInterval')"
              type="number"
            ></v-text-field>
          </v-col>
          <v-col cols="5">
            <v-select
              v-model="value.repeatUnit"
              :items="pvm.selectLists.pmTimeUnits"
              item-text="name"
              item-value="id"
              :readonly="formState.readOnly"
              :ref="`repeatUnit`"
              data-cy="usertype"
              :rules="[form().integerValid(this, `repeatUnit`)]"
              :error-messages="form().serverErrors(this, `repeatUnit`)"
              @input="fieldValueChanged(`repeatUnit`)"
            ></v-select>
          </v-col>
        </v-row>
      </v-col>

      <v-col cols="12" sm="6" lg="4" xl="3">
        <v-row>
          <v-col cols="5">
            <v-text-field
              v-model="value.generateBeforeInterval"
              :readonly="formState.readOnly"
              :label="$ay.t('GenerateBefore')"
              ref="generateBeforeInterval"
              data-cy="generateBeforeInterval"
              :rules="[form().integerValid(this, 'generateBeforeInterval')]"
              :error-messages="
                form().serverErrors(this, 'generateBeforeInterval')
              "
              @input="fieldValueChanged('generateBeforeInterval')"
              type="number"
            ></v-text-field>
          </v-col>
          <v-col cols="5">
            <v-select
              v-model="value.generateBeforeUnit"
              :items="pvm.selectLists.pmTimeUnits"
              item-text="name"
              item-value="id"
              :readonly="formState.readOnly"
              :ref="`generateBeforeUnit`"
              data-cy="usertype"
              :rules="[form().integerValid(this, `generateBeforeUnit`)]"
              :error-messages="form().serverErrors(this, `generateBeforeUnit`)"
              @input="fieldValueChanged(`generateBeforeUnit`)"
            ></v-select>
          </v-col>
        </v-row>
      </v-col>

      <v-col cols="12" sm="6" lg="4" xl="3">
        <GZDaysOfWeek
          :label="$ay.t('ExcludeDaysOfWeek')"
          v-model="value.excludeDaysOfWeek"
          :readonly="formState.readOnly"
          ref="excludeDaysOfWeek"
          data-cy="excludeDaysOfWeek"
          :error-messages="form().serverErrors(this, 'excludeDaysOfWeek')"
          @input="fieldValueChanged('excludeDaysOfWeek')"
        ></GZDaysOfWeek>
      </v-col>

      <v-col cols="12" sm="6" lg="4" xl="3">
        <gz-date-time-picker
          :label="$ay.t('PMNextServiceDate')"
          v-model="value.nextServiceDate"
          :readonly="formState.readOnly"
          ref="nextServiceDate"
          data-cy="nextServiceDate"
          :rules="[form().required(this, 'nextServiceDate')]"
          :error-messages="form().serverErrors(this, 'nextServiceDate')"
          @input="fieldValueChanged('nextServiceDate')"
        ></gz-date-time-picker>
      </v-col>

      <v-col cols="12" sm="6" lg="4" xl="3">
        <gz-date-time-picker
          :label="$ay.t('PMStopGeneratingDate')"
          v-model="value.stopGeneratingDate"
          :readonly="formState.readOnly"
          ref="stopGeneratingDate"
          data-cy="stopGeneratingDate"
          :error-messages="form().serverErrors(this, 'stopGeneratingDate')"
          @input="fieldValueChanged('stopGeneratingDate')"
        ></gz-date-time-picker>
      </v-col>

      <v-col
        v-if="form().showMe(this, 'CopyWiki')"
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-checkbox
          v-model="value.copyWiki"
          :readonly="formState.readOnly"
          :label="$ay.t('CopyWiki')"
          ref="copyWiki"
          data-cy="copyWiki"
          :error-messages="form().serverErrors(this, 'copyWiki')"
          @change="fieldValueChanged('copyWiki')"
        ></v-checkbox>
      </v-col>

      <v-col
        v-if="form().showMe(this, 'copyAttachments')"
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-checkbox
          v-model="value.copyAttachments"
          :readonly="formState.readOnly"
          :label="$ay.t('CopyAttachments')"
          ref="copyAttachments"
          data-cy="copyAttachments"
          :error-messages="form().serverErrors(this, 'copyAttachments')"
          @change="fieldValueChanged('copyAttachments')"
        ></v-checkbox>
      </v-col>

      <v-col cols="12" sm="6" lg="4" xl="3">
        <v-checkbox
          v-model="value.active"
          :readonly="formState.readOnly"
          :label="$ay.t('Active')"
          ref="active"
          data-cy="active"
          :error-messages="form().serverErrors(this, 'active')"
          @change="fieldValueChanged('active')"
        ></v-checkbox>
      </v-col>

      <!-- ##################################################################################### -->
      <v-col
        v-if="
          form().showMe(this, 'WorkOrderSummary') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <v-textarea
          v-model="value.notes"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :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-col
        v-if="
          form().showMe(this, 'Contract') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-pick-list
          :aya-type="$ay.ayt().Contract"
          :show-edit-icon="!value.userIsRestrictedType"
          v-model="value.contractId"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('Contract')"
          ref="contractId"
          data-cy="contractId"
          :error-messages="form().serverErrors(this, 'contractId')"
          @input="fieldValueChanged('contractId')"
        ></gz-pick-list>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'Project') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-pick-list
          :aya-type="$ay.ayt().Project"
          :show-edit-icon="!value.userIsRestrictedType"
          v-model="value.projectId"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('Project')"
          ref="projectId"
          data-cy="projectId"
          :error-messages="form().serverErrors(this, 'projectId')"
          @input="fieldValueChanged('projectId')"
        ></gz-pick-list>
      </v-col>

      <v-col
        v-if="form().showMe(this, 'WorkOrderCustomerContactName')"
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-text-field
          v-model="value.customerContactName"
          :readonly="
            formState.readOnly ||
              value.userIsTechRestricted ||
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
          "
          :label="$ay.t('WorkOrderCustomerContactName')"
          ref="customerContactName"
          data-cy="customerContactName"
          :error-messages="form().serverErrors(this, 'customerContactName')"
          @input="fieldValueChanged('customerContactName')"
        ></v-text-field>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'WorkOrderCustomerReferenceNumber') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-text-field
          v-model="value.customerReferenceNumber"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderCustomerReferenceNumber')"
          ref="customerReferenceNumber"
          data-cy="customerReferenceNumber"
          :error-messages="form().serverErrors(this, 'customerReferenceNumber')"
          @input="fieldValueChanged('customerReferenceNumber')"
        ></v-text-field>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'WorkOrderInternalReferenceNumber') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-text-field
          v-model="value.internalReferenceNumber"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderInternalReferenceNumber')"
          ref="internalReferenceNumber"
          data-cy="internalReferenceNumber"
          :error-messages="form().serverErrors(this, 'internalReferenceNumber')"
          @input="fieldValueChanged('internalReferenceNumber')"
        ></v-text-field>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'WorkOrderOnsite') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-checkbox
          v-model="value.onsite"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderOnsite')"
          ref="onsite"
          data-cy="onsite"
          :error-messages="form().serverErrors(this, 'onsite')"
          @change="fieldValueChanged('onsite')"
        ></v-checkbox>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'Tags') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <gz-tag-picker
          v-model="value.tags"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          ref="tags"
          data-cy="tags"
          :error-messages="form().serverErrors(this, 'tags')"
          @input="fieldValueChanged('tags')"
        ></gz-tag-picker>
      </v-col>

      <v-col
        v-if="
          !(
            value.userIsSubContractorFull || value.userIsSubContractorRestricted
          )
        "
        cols="12"
      >
        <gz-custom-fields
          v-model="value.customFields"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :parent-v-m="this"
          key-start-with="WorkOrderCustom"
          ref="customFields"
          data-cy="customFields"
          :error-messages="form().serverErrors(this, 'customFields')"
          @input="fieldValueChanged('customFields')"
        ></gz-custom-fields>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'Wiki') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <gz-wiki
          :aya-type="pvm.ayaType"
          :aya-id="value.id"
          ref="wiki"
          v-model="value.wiki"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          @input="fieldValueChanged('wiki')"
        ></gz-wiki
      ></v-col>

      <v-col
        v-if="
          form().showMe(this, 'Attachments') &&
            value.id &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <gz-attachments
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :aya-type="pvm.ayaType"
          :aya-id="value.id"
        ></gz-attachments
      ></v-col>
    </v-row>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

import GzWoAddress from "./work-order-address.vue";
import GZDaysOfWeek from "./days-of-week-control.vue";
export default {
  components: {
    GzWoAddress,
    GZDaysOfWeek
  },
  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;
    },
    async fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readonly) {
        //flag this record dirty so it gets picked up by save
        this.value.isDirty = true;
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    }
  }
};

/*
l.Add(new FormField { TKey = "PMPreparedByID", FieldKey = "PMPreparedByID" });
l.Add(new FormField { TKey = "PMIntroduction", FieldKey = "PMIntroduction" });
l.Add(new FormField { TKey = "PMPMRequestDate", FieldKey = "PMPMRequestDate" });
l.Add(new FormField { TKey = "PMValidUntilDate", FieldKey = "PMValidUntilDate" });
l.Add(new FormField { TKey = "PMDateSubmitted", FieldKey = "PMDateSubmitted" });
l.Add(new FormField { TKey = "PMDateApproved", FieldKey = "PMDateApproved" });
l.Add(new FormField { TKey = "CopyWiki", FieldKey = "CopyWiki" });
l.Add(new FormField { TKey = "CopyAttachments", FieldKey = "CopyAttachments" });

Example workorder
{
    id: 10,
    concurrency: 7728489,
    serial: 10,
    notes: "Quae officia placeat aliquid ducimus consequatur quia.",
    wiki: null,
    customFields: null,
    tags: ["green", "zone6"],
    customerId: 12,
    projectId: null,
    internalReferenceNumber: "irf-3339",
    customerReferenceNumber: "crf-1889",
    customerContactName: "contact name here",
    fromPMId: null,
    fromPMId: null,
    fromCSRId: null,
    serviceDate: "2021-05-29T21:25:31.421011Z",
    completeByDate: "2021-06-03T21:25:31.421011Z",
    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: 21,
        concurrency: 7728489,
        notes: "itemnotes",
        wiki: null,
        customFields: null,
        tags: [],
        pmId: 10,
        techNotes: "technotes",
        workOrderItemStatusId: null,
        workOrderItemPriorityId: null,
        requestDate: "2021-05-29T21:25:31.421011Z",
        warrantyService: false,
        isDirty: false,
        expenses: [],
        labors: [],
        loans: [],
        parts: [],
        partRequests: [],
        scheduledUsers: [
          {
            id: 41,
            concurrency: 7728489,
            userId: 15,
            estimatedQuantity: 1.0,
            startDate: null,
            stopDate: null,
            serviceRateId: null,
            isDirty: false,
            pmItemId: 21
          },
          {
            id: 42,
            concurrency: 7728489,
            userId: 22,
            estimatedQuantity: 2.0,
            startDate: null,
            stopDate: null,
            serviceRateId: null,
            isDirty: false,
            pmItemId: 21
          }
        ],
        tasks: [],
        travels: [],
        units: [],
        outsideServices: []
      },
      {
        id: 22,
        concurrency: 7728489,
        notes: "itemnotes",
        wiki: null,
        customFields: null,
        tags: [],
        pmId: 10,
        techNotes: "technotes",
        workOrderItemStatusId: null,
        workOrderItemPriorityId: null,
        requestDate: "2021-05-29T21:25:31.421011Z",
        warrantyService: false,
        isDirty: false,
        expenses: [],
        labors: [],
        loans: [],
        parts: [],
        partRequests: [],
        scheduledUsers: [
          {
            id: 43,
            concurrency: 7728489,
            userId: 24,
            estimatedQuantity: 1.0,
            startDate: null,
            stopDate: null,
            serviceRateId: null,
            isDirty: false,
            pmItemId: 22
          },
          {
            id: 44,
            concurrency: 7728489,
            userId: 40,
            estimatedQuantity: 2.0,
            startDate: null,
            stopDate: null,
            serviceRateId: null,
            isDirty: false,
            pmItemId: 22
          }
        ],
        tasks: [],
        travels: [],
        units: [],
        outsideServices: []
      }
    ],
    states: [
      {
        id: 37,
        concurrency: 7728489,
        pmId: 10,
        workOrderStatusId: 2,
        created: "2021-05-29T21:30:31.421011Z",
        userId: 37,
        isDirty: false,
        workOrderStatus: null
      },
      {
        id: 38,
        concurrency: 7728489,
        pmId: 10,
        workOrderStatusId: 3,
        created: "2021-05-29T22:25:31.421011Z",
        userId: 10,
        isDirty: false,
        workOrderStatus: null
      },
      {
        id: 39,
        concurrency: 7728489,
        pmId: 10,
        workOrderStatusId: 1,
        created: "2021-05-29T22:30:31.421011Z",
        userId: 31,
        isDirty: false,
        workOrderStatus: null
      },
      {
        id: 40,
        concurrency: 7728489,
        pmId: 10,
        workOrderStatusId: 3,
        created: "2021-05-29T23:25:31.421011Z",
        userId: 2,
        isDirty: false,
        workOrderStatus: null
      },
      {
        id: 41,
        concurrency: 7728489,
        pmId: 10,
        workOrderStatusId: 9,
        created: "2021-04-06T00:10:44.636Z",
        userId: 1,
        isDirty: false,
        workOrderStatus: null
      }
    ],
    isDirty: false,
    isLockedAtServer: false
  };


*/
</script>
