import React, { useRef, useEffect, useState } from "react";
import { Button, Card, Form, Input, Select, TreeSelect } from "antd";
import useBool from "@/utils/hooks/useBool";
import Page from "@/components/Page";
import { arr2Tree } from "@/utils/array";
import {
  getSysPosition,
  postSysPosition,
  putSysPosition,
  getSysPositionById,
} from "@/service/sysposition";
import { getSysOrg } from "@/service/sysorg";
import { useSearchParams, useNavigate } from "react-router-dom";
import { formItemLayout, tailFormItemLayout } from "@/utils/form";

const { Option } = Select;
export default (props) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const navigate = useNavigate();
  const [submiting, startSubmit, cancelSubmit] = useBool();

  const [orgTreeData, setOrgTreeData] = useState([]);

  const [form] = Form.useForm();

  useEffect(() => {
    if (id) {
      getSysPositionById(id).then((res) => {
        form.setFieldsValue(res);
      });
    }
  }, [id]);

  useEffect(() => {
    // getSysPosition({ pageSize: 999 }).then((res) => {
    //   setPositionList(res.records || []);
    // });
    getSysOrg({ pageSize: 999 }).then((res) => {
      const [tree] = arr2Tree(
        (res.records || []).map((x) => ({
          title: x.name,
          key: x.orgId,
          value: x.orgId,
          parentId: x.parentId,
          raw: x,
        }))
        // "1"
      );
      setOrgTreeData(tree);
    });
  }, []);

  const onFinish = (values) => {
    startSubmit();

    if (id) {
      // 修改
      putSysPosition(id, values)
        .then((res) => {
          navigate(-1);
        })
        .catch(() => {
          cancelSubmit();
        });
    } else {
      // 新增
      postSysPosition(values)
        .then((res) => {
          navigate(-1);
        })
        .catch(() => {
          cancelSubmit();
        });
    }
  };

  return (
    <Page back>
      <Card>
        <Form
          onFinish={onFinish}
          form={form}
          {...formItemLayout}
          scrollToFirstError
          style={{ maxWidth: "1000px" }}
        >
          <Form.Item
            name="name"
            label="岗位名称"
            getValueFromEvent={(e) =>
              e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            }
          >
            <Input />
          </Form.Item>
          {/* <Form.Item
            name="orgId"
            label="所属机构"
            rules={[{ required: true, message: "请填写机构" }]}
          >
            <TreeSelect
              showSearch
              // style={{ width: "100%", maxWidth: 300 }}
              dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
              placeholder="请选择机构"
              treeDefaultExpandAll
              treeData={orgTreeData}
            ></TreeSelect>
          </Form.Item> */}

          <Form.Item name="status" label="状态">
            <Select style={{ width: "100%" }} placeholder="请选择状态">
              <Option value={0}>不正常</Option>
              <Option value={1}>正常</Option>
            </Select>
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button loading={submiting} type="primary" htmlType="submit">
              保存
            </Button>
            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
              返回
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Page>
  );
};
