import { Button, Space, Modal, FormInstance, Form, Select } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { columns, defaultCatConfig } from "./dict_column";
const { Option } = Select;
const list = [
  { id: 1, name: "婚姻" },
  { id: 2, name: "政治面貌" },
  { id: 3, name: "文化程度" },
  { id: 4, name: "民族" },
  { id: 5, name: "单位性质" },
  { id: 6, name: "服役军兵种" },
  { id: 7, name: "军衔" },
  { id: 8, name: "技术职称" },
  { id: 9, name: "职务级别" },
];
const Dict = (props: Store) => {
  const { sysStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  useEffect(() => {
    sysStore.getlist({ drop_type: 0 });
    setProjectConfig(defaultCatConfig);
  }, [sysStore]);
  const column_widget = (any, record) => {
    return (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            edit(record);
          }}
        >
          编辑
        </Button>

        <Button
          type="dashed"
          danger
          size="small"
          onClick={() => {
            sysStore.deleteItem(record.id);
          }}
        >
          删除
        </Button>
      </Space>
    );
  };
  const edit = (record) => {
    setIsModalOpen(true);
    setRecord(record);
  };
  const onFinish = (values: any) => {
    if (!record?.id) {
      sysStore.add(values);
    } else {
      sysStore.putItem(record.id, values);
    }
    setIsModalOpen(false);
  };

  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button
            type="default"
            onClick={() => {
              setRecord(null);
              setProjectConfig(defaultCatConfig);
              setIsModalOpen(true);
            }}
          >
            添加字典
          </Button>
        </Space>
        <BTable
          store={sysStore}
          columns={[
            ...columns,
            {
              title: "操作",
              dataIndex: "id",
              ellipsis: {
                showTitle: false,
              },
              render: (any, record) => column_widget(any, record),
            },
          ]}
          dataSource={sysStore.list}
        />
        <Modal
          title={!record?.id ? "添加字典" : "编辑字典"}
          width={500}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          okText="确定"
          cancelText="取消"
          onCancel={() => {
            setIsModalOpen(false);
          }}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {
              if (record?.id) {
                formRef.current?.setFieldsValue(record);
              } else {
                formRef.current?.setFieldsValue(null);
              }
            }}
            formName="card_basic"
            colProps={25}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          >
            <>
              <Form.Item key="drop_type" label="类型" name="drop_type" rules={[]}>
                <Select placeholder="">
                  {list?.map((v: any) => {
                    return (
                      <Option key={v.id} value={v.id}>
                        {v.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </>
          </SimpleForm>
        </Modal>
      </Space>
    </div>
  );
};

export default inject("sysStore")(observer(Dict));
