<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('WorkOrderSerialNumber')"
          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, 'CustomerSignature') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <GzWoSignature
          v-model="value"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :pvm="pvm"
          variant="customer"
          data-cy="customerSignature"
        />
      </v-col>
      <v-col
        v-if="
          form().showMe(this, 'WorkOrderStatus') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <GzWoState
          v-model="value"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly"
          :pvm="pvm"
          data-cy="woState"
          :all-states="pvm.selectLists.wostatus"
          :allowed-states="pvm.selectLists.allowedwostatus"
          :error-messages="form().serverErrors(this, 'LastStatusId')"
        />
      </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"
          :error-messages="form().serverErrors(this, 'Address')"
        />
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'TechSignature') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <GzWoSignature
          v-model="value"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :pvm="pvm"
          variant="tech"
          data-cy="techSignature"
        />
      </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, 'WorkOrderCloseByDate') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-date-time-picker
          ref="completeByDate"
          v-model="value.completeByDate"
          :label="$ay.t('WorkOrderCloseByDate')"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          data-cy="completeByDate"
          :error-messages="form().serverErrors(this, 'completeByDate')"
          @input="fieldValueChanged('completeByDate')"
        ></gz-date-time-picker>
      </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, 'WorkOrderInvoiceNumber') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-text-field
          ref="invoiceNumber"
          v-model="value.invoiceNumber"
          dense
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('WorkOrderInvoiceNumber')"
          data-cy="invoiceNumber"
          :error-messages="form().serverErrors(this, 'invoiceNumber')"
          @input="fieldValueChanged('invoiceNumber')"
        ></v-text-field>
      </v-col>

      <v-col
        v-if="
          form().showMe(this, 'WorkOrderServiceDate') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-date-time-picker
          ref="serviceDate"
          v-model="value.serviceDate"
          :label="$ay.t('WorkOrderServiceDate')"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          data-cy="serviceDate"
          :error-messages="form().serverErrors(this, 'serviceDate')"
          @input="fieldValueChanged('serviceDate')"
        ></gz-date-time-picker>
      </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"
          data-cy="wiki"
          @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"
          data-cy="attachments"
        ></gz-attachments
      ></v-col>
    </v-row>
  </div>
</template>
<script>
import GzWoState from "./work-order-state.vue";
import GzWoAddress from "./work-order-address.vue";
import GzWoSignature from "./work-order-signature.vue";
export default {
  components: {
    GzWoState,
    GzWoAddress,
    GzWoSignature
  },

  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) {
        this.value.isDirty = true;
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  }
};
</script>
