<template>
  <v-btn
    id="submit"
    elevation="0"
    :loading="false"
    :style="{
      'border-radius': input.borderRadius + 'px',
      border: `${input.borderWidth}px ${input.borderType} ${input.borderColor}`,
      width: '100% !important',
      height: input.borderHeight + 'px',
      fontFamily: input.fontFamily,
      fontSize: input.fontSize + 'px',
      margin: `${input.borderMargin.top}px ${input.borderMargin.right}px ${input.borderMargin.bottom}px ${input.borderMargin.left}px`,
      padding: `${input.borderPadding.top}px ${input.borderPadding.right}px ${input.borderPadding.bottom}px ${input.borderPadding.left}px`,
      fontWeight: input.fontWeight,
      color: input.textColor,
      borderRadius: input.borderRadius + 'px',
      backgroundColor: input.backgroundColor,
      outlineColor: input.borderActive,
    }"
    @click="(isLoading = true), $emit('submit')"
  >
    {{ widget.text.buttonText }}
  </v-btn>
</template>

<script>
export default {
  name: "submitBtn",
  data: function () {
    return {
      isLoading: false,
      input: this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.textInput
        : this.widget.style.input,
    };
  },
  watch: {
    "widget.style.input.defaultStyle": function () {
      this.input = this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.textInput
        : this.widget.style.input;
    },
  },
  props: {
    formBody: Object,
    widget: Object,
  },
};
</script>
