<template>
  <div>
    <div class="mb-n2 ml-10">
      <span class="text-caption" v-if="variant == 'customer'">{{
        $ay.t("CustomerSignature")
      }}</span>
      <span class="text-caption" v-else>{{ $ay.t("TechSignature") }}</span>
    </div>

    <template>
      <div class="mb-6 mb-sm-0">
        <v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
          <v-icon>$ayiEdit</v-icon>
        </v-btn>

        <span class="text-h6" @click="openDialog = true">{{
          pvm.currentState.name
        }}</span>
        <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
          >$ayiLock</v-icon
        >
        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
          >$ayiCheckCircle</v-icon
        >
      </div>
    </template>

    <v-row justify="center">
      <v-dialog v-model="openDialog" max-width="600px">
        <v-card>
          <v-card-title>
            <span class="text-h5">{{ $ay.t("Signaturehere") }}</span>
          </v-card-title>
          <v-card-text>
            <template v-if="$vuetify.breakpoint.smAndUp">
              <!-- WIDE VIEW -->
              <Sign data-cy="sign" />
            </template>
            <template v-else>
              <!-- NARROW VIEW -->
              <Sign data-cy="sign" />
            </template>

            <template>
              <div class="mt-8">
                input name here show date here
              </div>
            </template>
          </v-card-text>
          <v-card-actions>
            <v-btn color="red darken-1" text @click="erase()">{{
              $ay.t("Clear")
            }}</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
              $ay.t("Cancel")
            }}</v-btn>
            <v-btn
              color="blue darken-1"
              :disabled="selectedStatus == null"
              text
              @click="save()"
              >{{ $ay.t("OK") }}</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  data() {
    return {
      selectedStatus: null,
      openDialog: false
    };
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    },
    variant: {
      type: String,
      default: null
    },
    formKey: { type: String, default: "" }, //used to grab template from store
    readonly: Boolean,
    disabled: Boolean
  },

  methods: {
    form() {
      return window.$gz.form;
    },

    save() {
      this.openDialog = false;
    },
    cancelDialog() {
      this.openDialog = false;
    },
    erase() {
      this.selectedStatus = null;
      this.openDialog = false;
    },
    fieldValueChanged(ref) {
      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {}
};
</script>
