import { Button, Space, Modal, FormInstance, Form, Select } from "antd";
import { inject, observer } from "mobx-react";
import type { ColumnsType } from "antd/es/table";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { UserDataType } from "@/model/userModel";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
const { Option } = Select;
// 网格
const Grid = (props: Store) => {
  const { gridStore, communityStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  const [tagId, setId] = useState<Number | null>(null);
  const columns: ColumnsType<UserDataType> = [
    { title: "网格名称", dataIndex: "grid_name" },
    { title: "常驻人口数", dataIndex: "resident_population" },
    { title: "网格领导", dataIndex: "grid_leader" },
    { title: "所属社区", dataIndex: "community_name" },
    { title: "网格区域", dataIndex: "grid_area" },
    {
      title: "操作",
      dataIndex: "id",
      render: (any, record) => (
        <div>
          <Space wrap>
            <Button
              type="dashed"
              size="small"
              onClick={() => {
                edit(record);
              }}
            >
              编辑
            </Button>
            <Button
              type="dashed"
              danger
              size="small"
              onClick={() => {
                gridStore.deleteItem(record.id);
              }}
            >
              删除
            </Button>
          </Space>
        </div>
      ),
    },
  ];
  const edit = (record) => {
    setProjectConfig(defaultConfig);
    setIsModalOpen(true);
    formRef.current?.setFieldsValue(record);
    setRecord(record);
    setId(record.id);
  };
  const onFinish = (values: any) => {
    if (!tagId) {
      gridStore.add(values);
    } else {
      gridStore.putItem(tagId, values);
    }
    setIsModalOpen(false);
  };
  useEffect(() => {
    gridStore.getlist();
    communityStore.getlist();
  }, [gridStore,communityStore]);
  const defaultConfig = [
    {
      type: "input",
      label: "网格名称",
      name: "grid_name",
      value: "",
      rules: [{ required: true, message: "请输入网格名称!" }],
    },
    {
      type: "input",
      label: "网格领导名称",
      name: "grid_leader",
      value: "",
      rules: [{ required: true, message: "请输入网格领导名称!" }],
    },
    {
      type: "input",
      label: "常驻人口数",
      name: "resident_population",
      value: "",
      rules: [{ required: true, message: "请输入常驻人口数" }],
    },
    {
      type: "input",
      label: "网格区域",
      name: "grid_area",
      value: "",
      rules: [{ required: true, message: "请输入网格区域" }],
    },
  ];
  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button
            type="default"
            onClick={() => {
              setProjectConfig(defaultConfig);
              setId(null);
              setIsModalOpen(true);
            }}
          >
            添加
          </Button>
        </Space>

        <BTable
          store={gridStore}
          columns={columns}
          dataSource={gridStore.list}
        />
        <Modal
          title={!tagId ? "添加部门" : "编辑部门"}
          width={800}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          okText="确定"
          cancelText="取消"
          onCancel={() => {
            setId(null);
            setIsModalOpen(false);
          }}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {
              formRef.current?.setFieldsValue(record);
            }}
            formName="card_basic"
            colProps={25}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          >
            <>
              <Form.Item key="community_identity" label="所属社区" name="community_identity">
                <Select placeholder="">
                  {communityStore.list?.map((v: any) => {
                    return (
                      <Option key={v.identity} value={v.identity}>
                        {v.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </>
          </SimpleForm>
        </Modal>
      </Space>
    </div>
  );
};

export default inject("gridStore", "communityStore")(observer(Grid));
