import {memo} from 'react';
import {Button} from "antd";
import {SelectModal} from "../../../components/SelectModal";
import {ProFormSelect, ProFormText, QueryFilter} from "@ant-design/pro-components";
import {FORM_TYPE, INDEX_TYPE, PUBLISH_STATUS, SENSITIVE} from "../constants";
import {STATUS_TYPE} from "../../../constants";

export const IndexFilterForm = memo(({
  onModelSelect,
  onFinish
}) => {
  const modalTypeOption = [
    {...FORM_TYPE.ATOMIC, icon: true},
    {...FORM_TYPE.DERIVED, icon: true},
    {...FORM_TYPE.COMPOSITE, icon: true},
  ]
  const statusOption = [
    {label: '有效', value: 1},
    {label: '失效', value: 0}
  ]

  const publishOption = [
    {label: '全部', value: 2},
    {label: '已发布', value: 1},
    {label: '未发布', value: 0}
  ]
  return (
    <QueryFilter
      defaultCollapsed
      labelWidth={0}
      onFinish={onFinish}
      submitter={{
        render: (props, doms) => {
          return [
            doms[1],
            <Button htmlType="button" onClick={()=>{}} key="edit">
              导出
            </Button>,
            <SelectModal
              key="selectModal"
              description="请选择模型创建方式"
              title="创建模式"
              options={modalTypeOption}
              onSelect={onModelSelect}
              buttonProps={{
                children:'创建指标',
                style:{
                  backgroundColor:"#fa8c16"
                }
              }}
            />
          ]},
      }}
    >
      <ProFormText name="name" placeholder="请输入指标名或指标符"/>
      <ProFormSelect
        name="type"
        valueEnum={INDEX_TYPE}
        placeholder="指标类型"
      />
      <ProFormSelect
        name="sensitiveLevel"
        valueEnum={SENSITIVE}
        placeholder="敏感度"
      />
      <ProFormSelect
        name="status"
        valueEnum={STATUS_TYPE}
        placeholder="是否生效"
      />
      <ProFormSelect
        name="publish"
        valueEnum={PUBLISH_STATUS}
        placeholder="发布状态"
      />
    </QueryFilter>
  )
})
