<template>
  <div>
    <h3 class="content-block main-title">DRP Pengadaan</h3>
    <p class="content-block">Detil / Konten DRP</p>
    <div class="content-block">
      <div class="dx-card responsive-paddings">
        <div id="app-container">
          <DxDataGrid ref="currDataGrid"
            :data-source="dataSource" 
            key-expr="id"
            :allow-column-reordering="true"
            :column-auto-width="true">
            <DxEditing
                :allow-adding="true"
                :allow-updating="true"
                :allow-deleting="true"
                :use-icons="true"
                mode="popup">
                <DxTexts 
                add-row="Tambah"
                edit-row="Ubah"
                delete-row="Hapus"
                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
                save-row-changes="Simpan"
                cancel-row-changes="Batal"
                ></DxTexts>
                <DxForm label-location="top" :col-count="4">
                  <DxItem dataField="nomor" :col-span="2">
                    <DxRequiredRule message="Masukan Nomor PRK" />
                  </DxItem>
                  <DxItem dataField="metodePenyampaianId" :col-span="2">
                    <DxRequiredRule message="Pilih Metode Penyampaian Dokumen Penawaran" />
                  </DxItem>
                  <DxItem dataField="namaPengadaan" :col-span="2">
                    <DxRequiredRule message="Masukan Nama Pengadaan"  :col-span="2"/>
                  </DxItem>
                  <DxItem dataField="supplyPositioningMatrixId" :col-span="2">
                    <DxRequiredRule message="Pilih Supply Positioning Matrix" />
                  </DxItem>
                  <DxItem dataField="unitInisiatorId" :col-span="2">
                    <DxRequiredRule message="Pilih Nama Divisi/Inisiator Pengadaan" />
                  </DxItem>
                  <DxItem dataField="jenisKontrakId" :col-span="2">
                    <DxRequiredRule message="Pilih Jenis Perjanjian / Kontrak" />
                  </DxItem>
                  <DxItem dataField="lokasiId" :col-span="2">
                    <DxRequiredRule message="Pilih Lokasi Pengadaan" />
                  </DxItem>
                  <DxItem dataField="sumberDanaId" :col-span="2">
                    <DxRequiredRule message="Pilih Sumber Dana" />
                  </DxItem>
                  <DxItem dataField="jenisPengadaanId" :col-span="2">
                    <DxRequiredRule message="Pilih Jenis Pengadaan" />
                  </DxItem>
                  <DxItem dataField="rencanaTanggal">
                    <DxRequiredRule message="Masukan Tanggal Rencana" />
                  </DxItem>
                  <DxItem dataField="targetTanggal">
                    <DxRequiredRule message="Masukan Tanggal COD" />
                  </DxItem>
                  <DxItem dataField="metodePengadaanId" :col-span="2">
                    <DxRequiredRule message="Pilih Metode Pengadaan" />
                  </DxItem>
                  <DxItem dataField="pagu" :col-span="2">
                    <DxRequiredRule message="Masukkan Nilai Pagu Anggaran" />
                  </DxItem>>
                  <DxItem dataField="strategiPengadaanId" :col-span="2">
                    <DxRequiredRule message="Pilih Strategi Pengadaan" />
                  </DxItem>
                  <DxItem dataField="hpe" :col-span="2">
                    <DxRequiredRule message="Masukkan Nilai HPE" />
                  </DxItem>
                </DxForm>
                <DxPopup
                    :hide-on-outside-click="true"
                    :show-title="true"
                    
                    title="Form DRP Pengadaan">
                </DxPopup>
            </DxEditing>
            <DxToolbar>
                <DxItem name="groupPanel" />
                <DxItem name="searchPanel" location="before"/>
                <DxItem name="addRowButton" show-text="always" css-class="">
                  <DxTexts add-row="Tambah"></DxTexts>
                </DxItem>
                <DxItem name="exportButton" />
                <DxItem name="columnChooserButton" />
            </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)" />
            <DxFilterRow :visible="false" />
            <DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
            <DxColumn data-field="nomor" caption="Nomor PRK"></DxColumn>
            <DxColumn data-field="metodePenyampaianId" caption="Metode Penyampaian Dokumen Penawaran">
              <DxLookup display-expr="metodePenyampaian" value-expr="id" :data-source="metodepenyampaian"/>
            </DxColumn>
            <DxColumn data-field="namaPengadaan" caption="Nama Pengadaan"></DxColumn>
            <DxColumn data-field="lokasiId" caption="Lokasi Pengadaan">
              <DxLookup display-expr="lokasi" value-expr="id" :data-source="lokasi"/>
            </DxColumn>
            <DxColumn data-field="jenisPengadaanId" caption="Jenis Pengadaan">
              <DxLookup display-expr="jenisPengadaan" value-expr="id" :data-source="jenispengadaan"/>
            </DxColumn>
            <DxColumn data-field="unitInisiatorId" caption="Divisi / Unit Inisiator Pengadaan">
              <DxLookup display-expr="unitInisiator" value-expr="id" :data-source="unitinisiator"/>
            </DxColumn>
            <DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)">
              <DxFormat
                type="fixedPoint"
                format="$ #,##0.##"
                :precision="2"
              />
            </DxColumn>
            <DxColumn data-field="sumberDanaId" caption="Sumber Dana">
              <DxLookup display-expr="sumberDana" value-expr="id" :data-source="sumberdana"/>
            </DxColumn>
            <DxColumn data-field="supplyPositioningMatrixId" caption="Supply Positioning Matrix">
              <DxLookup display-expr="supplyPositioningMatrix" value-expr="id" :data-source="supplypositioningmatrix"/>
            </DxColumn>
            <DxColumn data-field="metodePengadaanId" caption="Metode Pengadaan">
              <DxLookup display-expr="metodePengadaan" value-expr="id" :data-source="metodepengadaan"/>
            </DxColumn>
            <DxColumn data-field="jenisKontrakId" caption="Jenis Perjanjian/Kontrak">
              <DxLookup display-expr="jenisKontrak" value-expr="id" :data-source="jeniskontrak"/>
            </DxColumn>
            <DxColumn data-field="strategiPengadaanId" caption="Strategi Pengadaan">
              <DxLookup display-expr="strategiPengadaan" value-expr="id" :data-source="strategipengadaan"/>
            </DxColumn>
            <DxColumn data-field="rencanaTanggal" caption="Rencana Pelaksanaan Pengadaan" data-type="date"></DxColumn>
            <DxColumn data-field="targetTanggal" caption="Target COD" data-type="date"></DxColumn>
            <DxColumn data-field="hpe" caption="Nilai HPE (Rp)">
              <DxFormat
                type="fixedPoint"
                :precision="2"
              />
            </DxColumn>
            <DxColumnFixing :enabled="true" />
            <DxColumn :allow-fixing="false" type="buttons" caption="Aksi">
              <DxButton name="edit"/>
              <DxButton name="delete"/>
            </DxColumn>
            <template #row-cell-template="{ data }">
              <DxText>{{ data.rowIndex + data.component.pageIndex() + 1 }}</DxText>
            </template>
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Pengadaan..."/>
            <!--<DxExport
              :enabled="true"
              :formats="['xlsx', 'pdf']"
              :allow-export-selected-data="true"
            />-->
          </DxDataGrid>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
import {
  DxDataGrid, 
  DxEditing,
  DxItem,
  DxForm,
  DxPopup,
  DxColumn,
  DxFilterRow,
  DxPager,
  DxPaging,
  DxSearchPanel,
  DxToolbar,
  DxTexts,
  DxRequiredRule,
  DxLookup,
  DxColumnFixing,
  DxFormat
} from "devextreme-vue/data-grid";
import CustomStore from "devextreme/data/custom_store";

const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/list';
const URL_metodepenyampaian = process.env.VUE_APP_ROOT_API+'/metodepenyampaian';
const URL_supplypositioningmatrix = process.env.VUE_APP_ROOT_API+'/supplypositioningmatrix';
const URL_unitinisiator = process.env.VUE_APP_ROOT_API+'/unitinisiator';
const URL_jeniskontrak = process.env.VUE_APP_ROOT_API+'/jeniskontrak';
const URL_lokasi = process.env.VUE_APP_ROOT_API+'/lokasi';
const URL_sumberdana = process.env.VUE_APP_ROOT_API+'/sumberdana';
const URL_jenispengadaan = process.env.VUE_APP_ROOT_API+'/jenispengadaan';
const URL_metodepengadaan = process.env.VUE_APP_ROOT_API+'/metodepengadaan';
const URL_strategipengadaan = process.env.VUE_APP_ROOT_API+'/strategipengadaan';

const metodepenyampaianOptions = new CustomStore({
  key: 'id',
  
  load:() => {
      return fetch(URL_metodepenyampaian+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  byKey: (key) => {
      return fetch(URL_metodepenyampaian+'/' + key)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  }
});

const supplypositioningmatrixOptions = new CustomStore({
  key: 'id',
  
  load:() => {
      return fetch(URL_supplypositioningmatrix+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  byKey: (key) => {
      return fetch(URL_supplypositioningmatrix+'/' + key)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  }
});

const unitinisiatorOptions = new CustomStore({
  key: 'id',
  
  load:() => {
      return fetch(URL_unitinisiator+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  byKey: (key) => {
      return fetch(URL_unitinisiator+'/' + key)
      .then((response) => response.json())
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  }
});

const jeniskontrakOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_jeniskontrak+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_jeniskontrak+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });

const lokasiOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_lokasi+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_lokasi+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });
  
const sumberdanaOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_sumberdana+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_sumberdana+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });

const jenispengadaanOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_jenispengadaan+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_jenispengadaan+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });

const metodepengadaanOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_metodepengadaan+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_metodepengadaan+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });
  
const strategipengadaanOptions = new CustomStore({
    key: 'id',
    
    load:() => {
        return fetch(URL_strategipengadaan+process.env.VUE_APP_PAGE_SIZE)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    },
  
    byKey: (key) => {
        return fetch(URL_strategipengadaan+'/' + key)
        .then((response) => response.json())
        .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
    }
  });

const dataSource = new CustomStore({
  key: 'id',

  load: () => {
    let uri = window.location.href.split('?');
    let drpid = '';
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      //console.log(getVars['drpid']);
      drpid = getVars['drpid'];
    }
    
      return fetch(URL+'/'+drpid)
      .then(response => response.json())
      .then(response => {
        return {
          data: response.data,
          totalCount: response.pagination.totalRecords
        };
      })
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  insert: (values) => {
        return fetch(URL, {
            method: "POST",
            body: JSON.stringify(values),
            headers: {
                'Content-Type': 'application/json'
            }
        });
    },

  update: (key, values) => {
      return fetch(URL + "/" + encodeURIComponent(key), {
          method: "PUT",
          body: JSON.stringify(values),
          headers: {
              'Content-Type': 'application/json'
          }
      });
  },

  remove: (key) => {
      return fetch(URL + "/" + encodeURIComponent(key), {
          method: "DELETE",
      });
  },
});

export default {
  components: {
    DxDataGrid,
    DxEditing,
    DxItem,
    DxForm,
    DxPopup,
    DxColumn,
    DxFilterRow,
    DxPager,
    DxPaging,
    DxSearchPanel,
    DxToolbar,
    DxTexts,
    DxRequiredRule,
    DxLookup,
    DxColumnFixing,
    DxFormat
  },

  data() {
      return {
          //jsonUrl: URL,
          dataSource,
          metodepenyampaian: metodepenyampaianOptions,
          supplypositioningmatrix: supplypositioningmatrixOptions,
          unitinisiator: unitinisiatorOptions,
          jeniskontrak: jeniskontrakOptions,
          lokasi: lokasiOptions,
          sumberdana: sumberdanaOptions,
          jenispengadaan: jenispengadaanOptions,
          metodepengadaan: metodepengadaanOptions,
          strategipengadaan: strategipengadaanOptions
      }
  },
}
</script>

<style lang="scss">
</style>
