<template lang="pug">
div
  qt-header(title="Gestão documentos")
  v-container
    v-btn.primary(
      fixed
      fab
      bottom
      right
      @click="openCreateDialog()"
    )
      v-icon add
    v-row(justify-center)
      v-col(cols="12")
        v-data-table.elevation-1(
          :headers="tableHeaders"
          :items="signedDocuments.list"
          item-key="id"
          :loading="loadings.data"
        )
          template(v-slot:item.edit="{ item }")
            v-icon.mr-2(small @click="editItem(item)") edit
          template(v-slot:item.delete="{ item }")
            v-icon(small @click="deleteItem(item)") delete
    qt-global-dialog(
      v-model="editorDialog.visible"
      showRButton
      :disabledRButton="!formValid"
      showLButton
      scrollable
      max-width="700px"
      borderRadius="13px"
      :headerTitle="this.form.id ? 'Editar documento' : 'Novo documento'"
      :rButtonLoading="loadings.form"
      :rButtonTitle="this.form.id ? 'Salvar documento' : 'Cadastrar documento'"
      :persistent="loadings.form"
      @clickRButton="save()"
    )
      template(v-slot:content)
        v-form(ref="form" v-model="formValid")
          v-container
            qt-form-response(
              ref="additionalForm"
              mode="only-fields"
              :loadingResponses="loadings.itemData"
              :formId="colocarIdDoSIgnedDocumentsDatabaseAqui"
              :formResponseId="form.formResponseId"
              @formSent="formSent"
            )
</template>

<script>
import { mapState } from 'vuex'
import { formMethods } from '@/utils/forms'

export default {
  components: {},
  computed: {
    ...mapState(['signedDocuments'])
  },
  data: function () {
    return {
      search: null,
      FieldType: [],
      rules: {
        required: (v) => !!v || 'Campo obrigatório'
      },
      tableHeaders: [
        {
          text: 'Nome',
          align: 'left',
          value: 'name'
        },
        {
          text: 'Slug',
          align: 'left',
          value: 'slug'
        },
        {
          text: 'Editar',
          width: '100',
          align: 'center',
          sortable: false,
          value: 'edit'
        },
        {
          text: 'Deletar',
          width: '100',
          align: 'center',
          sortable: false,
          value: 'delete'
        }
      ],
      editorDialog: {
        visible: false
      },
      loadings: {
        data: false,
        form: false
      },
      formValid: true,
      form: {
        id: null,
        name: '',
        slug: ''
        // color: ''
      }
    }
  },
  methods: {
    ...formMethods('signedDocuments')
  },
  async created() {
    this.loadings.data = true
    await Promise.all([this.$store.dispatch('signedDocuments/list')])
    this.loadings.data = false
  }
}
</script>

<style lang="sass" scoped>
.toolbar-settings
  box-shadow: none !important
  border-radius: 100px 100px 0px 0px
.text-settings
  font-family: Roboto
  font-style: normal
  font-weight: 500
  font-size: 18px
  line-height: 20px
  letter-spacing: 0.4px
</style>