import React, { Component } from 'react';
import { designO2Page, usePageTitle, useTableOption, O2Table, O2ColumnInput, O2ColumnLov } from 'o2-design';
import formatterCollections from 'utils/intl/formatterCollections';
import intl from 'utils/intl';
import { getCurrentOrganizationId } from 'utils/utils';
import { O2PCM_M } from 'o2Utils/config';

const prefix = `${O2PCM_M}`;
const organizationId = getCurrentOrganizationId();

const Page = designO2Page(() => {
  usePageTitle(() => intl.get('多语言前缀.view.title.list').d('列表页'));
  const option = useTableOption({
    url: `${prefix}/v1/${organizationId}/items`,
    keyField: 'itemId',
  });

  return () => (
    <O2Table option={option}>
      {/* 开启 formFilter 即出现在查询表单 */}
      <O2ColumnInput title="名称" field="name" formFilter />
      <O2ColumnLov title="类型" field="type" lovCode="O2MD.PARAM_TYPE" formFilter />
    </O2Table>
  );
});
// 如果没有多语言需求，其实可以直接 export default Page
@formatterCollections({ code: ['多语言前缀'] })
export default class extends Component {
  render() {
    return <Page {...this.props} />;
  }
}