<template>
  <div>
    <platform-grid
      ref="dictionaryGridRef"
      :table-props="{ borderded: false, flat: true }"
      :table-title="dictionaryConfigure.tableTitle"
      :table-init-load-data="dictionaryConfigure.tableInitLoadData"
      :table-row-key="dictionaryConfigure.tableRowKey"
      :table-data-url="dictionaryConfigure.tableDataUrl"
      :table-columns="dictionaryConfigure.tableColumns"
      :table-buttons="dictionaryConfigure.tableButtons"
      :add-form-props="dictionaryConfigure.addFormProps"
      :table-show-sort-no="false"
      :table-dense="true"
      :table-row-drag="true"
      :table-pagination="dictionaryConfigure.tablePagination"
      @row-drag-drop-after="rowDragDropAfter"
    >
    </platform-grid>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios } from 'platform-core';

const { t } = useI18n();

const dictionaryGridRef = ref();
const dictionaryConfigure = {
  tableTitle: '数据字典列表',
  tableInitLoadData: true,
  tableRowKey: 'id',
  tableDataUrl: Environment.apiContextPath('/api/system/dictionary'),
  tablePagination: {
    sortBy: 'order',
    descending: false,
    reqPageStart: 0,
    rowsPerPage: 0,
  },
  tableColumns: [
    { name: 'code', label: t('code') },
    { name: 'value', label: t('value') },
    { name: 'value', label: t('displayValue'), format: (value) => t(value) },
    { name: 'order', label: t('order') },
  ],
  tableButtons: ['refresh', 'add', 'edit', 'delete'],
  addFormProps: {
    dialogInitWidth: '50%',
    dialogInitHeight: '90%',
    formColsNumber: 1,
    formColsAuto: false,
    formFields: [
      { modelName: 'code', label: t('code'), type: 'text', required: true },
      { modelName: 'value', label: t('value'), type: 'text', required: true },
      { modelName: 'order', label: t('order'), type: 'text', required: true },
    ],
  },
};

const rowDragDropAfter = () => {
  const rows = dictionaryGridRef.value.getRowsFun();
  for (let i = 0; i < rows.length; i++) {
    rows[i].order = i;
  }
  axios.post(Environment.apiContextPath('/api/system/dictionary/updateDictionariesOrder'), rows).then(() => {
    //dictionaryGridRef.value.refreshTable();
  });
};
</script>
