import React, { useRef, useEffect, useState } from 'react';
import { Button, Card, Form, Input, Select } from 'antd';
import useBool from '@/utils/hooks/useBool';
import { getSysPosition, postSysPosition, putSysPosition, getSysPositionById } from "@/service/sysposition";
import { useSearchParams, useNavigate } from 'react-router-dom';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

const { Option } = Select;
export default (props) => {

  const [loading, startLoading, cancelLoading] = useBool();
  const [submiting, startSubmit, cancelSubmit] = useBool();
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const actionRef = useRef();
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const [sysPositionList, setSysPositionList] = useState([]);

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

  useEffect(() => {
    getSysPosition({ pageSize: 999 }).then((res) => {
      console.log('res', res.records);
      setSysPositionList(res.records);
    })
  }, [])

  const onFinish = (values) => {
    startSubmit();
    console.log('fff', id);
    if (id) {

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


  console.log('tiantian', sysPositionList);


  return (
    <Card loading={loading}>
      <Form onFinish={onFinish} form={form} {...formItemLayout} scrollToFirstError style={{ maxWidth: '1000px' }}>
        <Form.Item
          name="name"
          label="岗位名称"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="positionPId"
          label="上级岗位"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="orgId"
          label="所属单位"
        >
          <Select allowClear>
            {sysPositionList.map((item) => (
              <Option value={item.positionId} key={item.positionId}>
                {item.orgId}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="sortNum"
          label="排序"
        >
          <Input />
        </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>
  )
}