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

      <v-col
        v-if="
          form().showMe(this, 'QuoteStatus') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <GzQuoteState
          v-model="value"
          :form-key="formCustomTemplateKey"
          :readonly="formState.readOnly"
          :pvm="pvm"
          data-cy="woState"
          :all-states="pvm.selectLists.quotestatus"
          :allowed-states="pvm.selectLists.allowedquotestatus"
        />
      </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
        v-if="
          form().showMe(this, 'QuoteIntroduction') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <v-textarea
          ref="introduction"
          v-model="value.introduction"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          :label="$ay.t('QuoteIntroduction')"
          :error-messages="form().serverErrors(this, 'introduction')"
          data-cy="introduction"
          auto-grow
          @input="fieldValueChanged('introduction')"
        ></v-textarea>
      </v-col>
      <v-col
        v-if="
          form().showMe(this, 'WorkOrderSummary') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
      >
        <v-textarea
          ref="notes"
          v-model="value.notes"
          :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, 'QuoteQuoteRequestDate') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-date-time-picker
          ref="requested"
          v-model="value.requested"
          :label="$ay.t('QuoteQuoteRequestDate')"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          data-cy="requested"
          :error-messages="form().serverErrors(this, 'requested')"
          @input="fieldValueChanged('requested')"
        ></gz-date-time-picker>
      </v-col>

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

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

      <v-col
        v-if="
          form().showMe(this, 'QuoteDateApproved') &&
            !(
              value.userIsSubContractorFull ||
              value.userIsSubContractorRestricted
            )
        "
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <gz-date-time-picker
          ref="approved"
          v-model="value.approved"
          :label="$ay.t('QuoteDateApproved')"
          :readonly="formState.readOnly || value.userIsTechRestricted"
          data-cy="approved"
          :error-messages="form().serverErrors(this, 'approved')"
          @input="fieldValueChanged('approved')"
        ></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, 'WorkOrderCustomerContactName')"
        cols="12"
        sm="6"
        lg="4"
        xl="3"
      >
        <v-text-field
          ref="customerContactName"
          v-model="value.customerContactName"
          :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"
          :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"
          :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"
          :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 GzQuoteState from "./quote-state.vue";
import GzWoAddress from "./work-order-address.vue";
export default {
  components: {
    GzQuoteState,
    GzWoAddress
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      canEditSerial: window.$gz.role.hasRole([
        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
      ])
    };
  },
  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>
