<template>
  <div>
    <platform-grid
      ref="i18nGridRef"
      :table-props="{ borderded: false, flat: true }"
      :table-title="i18nConfigure.tableTitle"
      :table-init-load-data="i18nConfigure.tableInitLoadData"
      :table-row-key="i18nConfigure.tableRowKey"
      :table-data-url="i18nConfigure.tableDataUrl"
      :table-columns="i18nConfigure.tableColumns"
      :table-buttons="i18nConfigure.tableButtons"
      :add-form-props="i18nConfigure.addFormProps"
      :table-show-sort-no="false"
      :table-dense="true"
      :table-row-drag="true"
      :table-pagination="i18nConfigure.tablePagination"
    >
    </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 Language = {
  en: '英文',
  zh_CN: '简体中文',
  tw_CN: '繁体中文',
};

const LanguageOptions = [
  { label: '英文', value: 'en' },
  { label: '简体中文', value: 'zh_CN' },
  { label: '繁体中文', value: 'tw_CN' },
];

const i18nGridRef = ref();
const i18nConfigure = {
  tableTitle: '多语言消息列表',
  tableInitLoadData: true,
  tableRowKey: 'id',
  tableDataUrl: Environment.apiContextPath('/api/system/i18n'),
  tablePagination: {
    sortBy: 'code',
    descending: false,
    reqPageStart: 0,
    rowsPerPage: 20,
  },
  tableColumns: [
    { name: 'code', label: t('code') },
    { name: 'lang', label: t('lang'), format: (value) => Language[value] },
    { name: 'message', label: t('message') },
  ],
  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: 'lang', label: t('lang'), type: 'select', required: true, options: LanguageOptions },
      { modelName: 'message', label: t('message'), type: 'text', required: true },
    ],
  },
};
</script>
