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

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

      <v-col cols="12" sm="6" lg="4" xl="3">
        <v-row dense>
          <v-col cols="5">
            <v-text-field
              ref="repeatInterval"
              v-model="value.repeatInterval"
              dense
              :readonly="formState.readOnly"
              :label="$ay.t('RepeatInterval')"
              data-cy="repeatInterval"
              :rules="[form().integerValid(this, 'repeatInterval')]"
              :error-messages="form().serverErrors(this, 'repeatInterval')"
              type="number"
              @input="fieldValueChanged('repeatInterval')"
            ></v-text-field>
          </v-col>
          <v-col cols="5">
            <v-select
              :ref="`repeatUnit`"
              v-model="value.repeatUnit"
              dense
              :items="pvm.selectLists.pmTimeUnits"
              item-text="name"
              item-value="id"
              :readonly="formState.readOnly"
              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 dense>
          <v-col cols="5">
            <v-text-field
              ref="generateBeforeInterval"
              v-model="value.generateBeforeInterval"
              dense
              :readonly="formState.readOnly"
              :label="$ay.t('GenerateBefore')"
              data-cy="generateBeforeInterval"
              :rules="[form().integerValid(this, 'generateBeforeInterval')]"
              :error-messages="
                form().serverErrors(this, 'generateBeforeInterval')
              "
              type="number"
              @input="fieldValueChanged('generateBeforeInterval')"
            ></v-text-field>
          </v-col>
          <v-col cols="5">
            <v-select
              :ref="`generateBeforeUnit`"
              v-model="value.generateBeforeUnit"
              dense
              :items="pvm.selectLists.pmTimeUnits"
              item-text="name"
              item-value="id"
              :readonly="formState.readOnly"
              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
          ref="excludeDaysOfWeek"
          v-model="value.excludeDaysOfWeek"
          :label="$ay.t('ExcludeDaysOfWeek')"
          :readonly="formState.readOnly"
          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
          ref="nextServiceDate"
          v-model="value.nextServiceDate"
          :label="$ay.t('PMNextServiceDate')"
          :readonly="formState.readOnly"
          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
          ref="stopGeneratingDate"
          v-model="value.stopGeneratingDate"
          :label="$ay.t('PMStopGeneratingDate')"
          :readonly="formState.readOnly"
          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
          ref="copyWiki"
          v-model="value.copyWiki"
          dense
          :readonly="formState.readOnly"
          :label="$ay.t('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
          ref="copyAttachments"
          v-model="value.copyAttachments"
          dense
          :readonly="formState.readOnly"
          :label="$ay.t('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
          ref="active"
          v-model="value.active"
          dense
          :readonly="formState.readOnly"
          :label="$ay.t('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
          ref="notes"
          v-model="value.notes"
          dense
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderSummary')"
          :error-messages="form().serverErrors(this, 'notes')"
          data-cy="notes"
          auto-grow
          @input="fieldValueChanged('notes')"
        ></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
          ref="contractId"
          v-model="value.contractId"
          :aya-type="$ay.ayt().Contract"
          :show-edit-icon="!value.userIsRestrictedType"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('Contract')"
          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
          ref="projectId"
          v-model="value.projectId"
          :aya-type="$ay.ayt().Project"
          :show-edit-icon="!value.userIsRestrictedType"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('Project')"
          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
          ref="customerContactName"
          v-model="value.customerContactName"
          dense
          :readonly="
            formState.readOnly ||
              value.userIsTechRestricted ||
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
          "
          :label="$ay.t('WorkOrderCustomerContactName')"
          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
          ref="customerReferenceNumber"
          v-model="value.customerReferenceNumber"
          dense
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderCustomerReferenceNumber')"
          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
          ref="internalReferenceNumber"
          v-model="value.internalReferenceNumber"
          dense
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderInternalReferenceNumber')"
          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
          ref="onsite"
          v-model="value.onsite"
          dense
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderOnsite')"
          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
          ref="tags"
          v-model="value.tags"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          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
          ref="customFields"
          v-model="value.customFields"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :parent-v-m="this"
          key-start-with="WorkOrderCustom"
          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
          ref="wiki"
          v-model="value.wiki"
          :aya-type="pvm.ayaType"
          :aya-id="value.id"
          :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>
import GzWoAddress from "./work-order-address.vue";
import GZDaysOfWeek from "./days-of-week-control.vue";
export default {
  components: {
    GzWoAddress,
    GZDaysOfWeek
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      canEditSerial: window.$gz.role.hasRole([
        window.$gz.role.AUTHORIZATION_ROLES.BizAdmin
      ])
    };
  },
  computed: {
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    }
  },

  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);
      }
    }
  }
};
</script>
