<template>
  <h4>Dokumen Pendukung <span style="color: red;">*</span></h4>

  <div style="display: flex; justify-content: end;">
    <DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
  </div>

  <DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen Pendukung" :width="600" :height="450">
    <template #content>
      <PopupUploadDokumenPendukung v-if="isFormOpen" :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" @addDokumenPendukung="addDokumenPendukung" />
    </template>
  </DxPopup>

  <DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen Pendukung?" :width="400" :height="300">
    <template #content>
      Hapus Dokumen Pendukung?
    </template>
    <DxToolbarItem
      widget="dxButton"
      :options="removeDokumenButtonOptions"
      location="after"
      toolbar="bottom"
    />
    <DxToolbarItem
      widget="dxButton"
      :options="cancelRemoveButtonOptions"
      location="after"
      toolbar="bottom"
    />
  </DxPopup>

  <DxDataGrid ref="datagrid" :data-source="dataSource" key-expr="filename" :column-auto-width="true">
    <DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
      <DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
    </DxColumn>
    <DxColumn data-field="filename" caption="File" />
    <DxColumn data-field="keterangan" caption="Keterangan" />
    <DxColumn type="buttons" caption="Aksi" :fixed="true">
      <DxDataButton text="Edit" hint="Edit Dokumen Pendukung" icon="edit" @click="editDokumen" />
      <DxDataButton text="Delete" hint="Hapus Dokumen Pendukung" icon="trash" @click="removeDokumen" />
    </DxColumn>
    <DxToolbar>
      <DxItem name="searchPanel" location="before" />
      <DxItem name="addRowButton" show-text="always" css-class="">
        <DxTexts add-row="Tambah"></DxTexts>
      </DxItem>
    </DxToolbar>
    <DxPaging :page-size="5" />
    <DxPager :visible="true" :allowed-page-sizes="[5, 10, 50]" display-mode="compact" :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" info-text="Hal {0} dari {1} ({2} data)" />
  </DxDataGrid>
</template>

<script setup>
import http from "@/utils/http";
import jenisDokumens from "@/store/jenis-dokumen";
import {
  DxColumn,
  DxDataGrid,
  DxItem,
  DxLookup,
  DxPager,
  DxPaging,
  DxTexts,
  DxToolbar,
  DxButton as DxDataButton
} from "devextreme-vue/data-grid";
import PopupUploadDokumenPendukung from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue";
import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
import DxButton from "devextreme-vue/button";
import {defineProps, defineEmits, ref, watch} from "vue";
import ArrayStore from "devextreme/data/array_store";
import DataSource from "devextreme/data/data_source";

const props = defineProps(['drpId', 'drpTahun']);
const emit = defineEmits(['addDokumenPendukung']);


// const URL = process.env.VUE_APP_ROOT_API + '/drp';
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';

const datagrid = ref(null)
const isFormOpen = ref(false);
const isRemoveConfirmationDialogOpen = ref(false);
const dokumenData = ref();
const documents = ref([])

const addDokumen = () => {
  isFormOpen.value = !isFormOpen.value;
}

const editDokumen = (e) => {
  dokumenData.value = e.row.data;
  isFormOpen.value = !isFormOpen.value;
}

const removeDokumenButtonOptions = ref({
  text: 'Hapus',
  async onClick() {
    await http.delete(URL_UPLOAD, {
      filename: dokumenData.value.filename
    })
    isRemoveConfirmationDialogOpen.value = false;
    documents.value.splice(dokumenData.value.id, 1);
    datagrid.value.instance.refresh();
  }
})

const removeDokumen = (e) => {
  isRemoveConfirmationDialogOpen.value = true;
  dokumenData.value = e.row.data;
};

const cancelRemoveButtonOptions = ref({
  text: 'Batal',
  onClick() {
    isRemoveConfirmationDialogOpen.value = false;
  }
})

const addDokumenPendukung = (payload) => {
  emit('addDokumenPendukung', payload);
  documents.value.push(payload)
  isFormOpen.value = false;
  datagrid.value.instance.refresh();
}

const dataSource = new DataSource({
  store: new ArrayStore({
    data: documents.value,
    key: 'filename',
  }),
});


watch(() => props.drpId, () => {
  datagrid.value.instance.refresh();
})
</script>

<style scoped>
a.dx-link.dx-icon-edit.dx-link-icon {
    color: orange !important;
}

a.dx-link.dx-icon-trash.dx-link-icon {
    color: red !important;
}
</style>
