import React, { useState, createContext, useEffect } from "react";
import {
  Button,
  Input,
  Select,
  message,
  Table,
  Tag,
  Modal,
  Form,
  InputNumber,
  Radio,
  ConfigProvider,
  TreeSelect,
  Row,
  Col,
  // Icon
} from "antd";
import type { ColumnsType } from "antd/es/table";
import {
  SyncOutlined,
  SearchOutlined,
  ExclamationCircleFilled,
  SwapOutlined,
} from "@ant-design/icons";
import zh_CN from "antd/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
// import 'moment/locale/zh-cn';
import {
  getDatasAPI,
  delDataAPI,
  addDataAPI,
  editDataAPI,
  getDataAPI,
} from "../../../api/system/dept";
import "./index.scss";
import { useForm } from "antd/es/form/Form";
interface searchValueType {
  deptName: string | undefined;
  state: string | undefined;
}
//表格单项数据类型
interface TableDataType {
  children: number[];
  createTime: string;
  deptId: number;
  deptName: string;
  orderNum: string;
  state: string;
}
let thisDept = {};
let treeData: any = [];
let isTreeAnyId = false;
// const Dayjs=dayjs.Dayjs
export default function Role() {
  const { confirm } = Modal;
  //提示组件
  const [messageApi, contextHolder] = message.useMessage();
  const [isAllExpend, setIsAllExpend] = useState(true);
  //搜索框内所有内容
  let [searchValue, setSearchValue] = useState<searchValueType>({
    deptName: undefined,
    state: undefined,
  });
  // const is
  //树列表数据

  // const [isTreeAnyId,setIsTreeAnyId]=useState(false)
  const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
  const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
  //Modal
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalTitle, setModalTitle] = useState("");
  //表单区域
  const [isDisbaled, setIsDisbaled] = useState<boolean>(false);
  //serach
  const [formSearch] = Form.useForm();
  const [formModal] = Form.useForm();
  //当前页面页数
  //表格内数据
  let [tableData, setTableData] = useState<TableDataType[]>([]);
  //表格格式
  const columns: ColumnsType<TableDataType> = [
    {
      title: "部门名称",
      dataIndex: "deptName",
      key: "deptName",
    },
    {
      title: "排序",
      dataIndex: "orderNum",
      key: "orderNum",
    },
    {
      title: "状态",
      key: "state",
      dataIndex: "state",
      render: (text) => (
        <>
          {text === "0" ? (
            <Tag color="success">正常</Tag>
          ) : (
            <Tag color="error">停用</Tag>
          )}
        </>
      ),
    },
    {
      title: "创建时间",
      key: "createTime",
      dataIndex: "createTime",
    },
    {
      title: "操作",
      key: "",
      dataIndex: "",
      render: (text) => (
        <>
          <Button type="link" onClick={() => handleNewAdd(text.deptId)}>
            {"新增"}
          </Button>
          {/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
          <Button type="link" onClick={() => handleEdit(text)}>
            {"修改"}
          </Button>
          {text.parentId !== 0 ? (
            <Button type="link" onClick={() => handleDelete(text)}>
              {"删除"}
            </Button>
          ) : null}
        </>
      ),
    },
  ];
  //请求表格内容参数
  let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
    deptName: undefined,
    state: undefined,
  });
  const handleDelete = (dept: any) => {
    confirm({
      title: "系统提示",
      icon: <ExclamationCircleFilled />,
      content: `确定删除角色名称为${dept.deptName}的数据吗`,
      okText: "确定",
      okType: "danger",
      cancelText: "取消",
      onOk() {
        (async () => {
          try {
            let { code } = await delDataAPI(dept.deptId);
            if (code === 1000) {
              console.log("del", dept.deptId);
              messageApi.open({
                type: "success",
                content: "操作成功",
              });
              getDatas({});
            }
          } catch (error) {
            console.log(error);
          }
        })();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  const handleSerach = () => {
    // console.log("搜索框", searchValue);
    // setSearchValue({ ...searchValue });
    searchValue = formSearch.getFieldsValue();
    console.log(searchValue);
    // queryTableDataParams={...searchValue}
    setQueryTableDataParams({ ...searchValue });
  };
  const handleReset = () => {
    formSearch.resetFields();
    searchValue = formSearch.getFieldsValue();

    setQueryTableDataParams({ ...searchValue });
    // setSearchValue({ ...searchValue });
    // setCount(1)
  };
  const handleEdit = async (dept: any) => {
    if (dept.parentId === 0) {
      setIsDisbaled(true);
      formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
    } else {
      setIsDisbaled(false);
      // formModal.setFieldsValue({...thisDept});
    }
    await getData(dept.deptId);
    if (dept.parentId === 0) {
      setIsDisbaled(true);
      formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
    } else {
      setIsDisbaled(false);
      formModal.setFieldsValue({ ...thisDept });
    }
    console.log(thisDept);
    setModalTitle("修改角色");
    setIsModalOpen(true);
    // formModal.setFieldsValue({...thisDept});
    // formModal.setFieldsValue({...thisDept,parentId:dept.deptName});
  };
  const handleNewAdd = (deptId?: string) => {
    setModalTitle("新增角色");
    setIsModalOpen(true);
    if (deptId) {
      formModal.setFieldsValue({
        parentId: deptId,
        deptName: undefined,
        orderNum: 0,
        leader: undefined,
        phone: undefined,
        email: undefined,
        state: "0",
      });
    } else
      formModal.setFieldsValue({
        parentId: undefined,
        deptName: undefined,
        orderNum: 0,
        leader: undefined,
        phone: undefined,
        email: undefined,
        state: "0",
      });
  };
  const handleModalOk = () => {
    formModal
      .validateFields()
      .then((values) => {
        // form.resetFields();
        console.log("add", values);
        // onCreate(values);
        // setSelectedKeys([])
        // setIsModalOpen(false);
        if (modalTitle == "新增角色") {
          console.log(values);
          postAdd(values);
        } else if (modalTitle == "修改角色") {
          editData(values);
        }
      })
      .catch((info) => {
        console.log("Validate Failed:", info);
      });
  };
  //遍历菜单树获取所有节点ID
  const getTree = function (tree: any) {
    tree.title = tree.deptName;
    tree.value = tree.deptId;
    if (!isTreeAnyId) {
      treeAnyId.push(tree.deptId);
      setTreeAnyId([...treeAnyId]);
    }
    if (tree.children) {
      for (let child of tree.children) {
        getTree(child);
      }
    }
    // treeData=tree
  };
  const handleModalCanle = () => {
    setIsModalOpen(false);
  };
  //获取详细数据
  const getData = async (deptId: number) => {
    try {
      const { code, data } = await getDataAPI(deptId);
      if (code === 1000) {
        thisDept = data;
        // console.log(thisDept);
      }
    } catch (error) {}
  };
  //修改数据
  const editData = async (dept: any) => {
    try {
      console.log(thisDept);

      console.log({ ...thisDept, ...dept });

      const { code } = await editDataAPI({ ...thisDept, ...dept });
      if (code === 1000) {
        messageApi.open({
          type: "success",
          content: "操作成功",
        });
        setIsModalOpen(false);
        getDatas(queryTableDataParams);
      } else {
        messageApi.open({
          type: "error",
          content: "操作失败",
        });
      }
    } catch (error) {}
  };
  //获取部门数据
  const getDatas = async (queryTableDataParams: any) => {
    console.log("参数:", queryTableDataParams);
    try {
      const { code, data } = await getDatasAPI(queryTableDataParams);
      console.log(data);

      if (code === 1000) {
        // console.log(isTreeAnyId);

        for (let child of data) {
          getTree(child);
        }
        setExpandedRowKeys([...treeAnyId]);
        // console.log(treeAnyId);
        console.log(data);

        setTableData(data);
        treeData = data;
        console.log(treeData);

        // setTotal(data.total);
      }
    } catch (err: any) {
      console.log("555", err);
    }
    isTreeAnyId = true;
  };
  //新增
  const postAdd = async (dept: any) => {
    try {
      let { code } = await addDataAPI(dept);
      console.log(code);

      if (code === 1000) {
        console.log("success");
        messageApi.open({
          type: "success",
          content: "操作成功",
        });
        formModal.setFieldsValue({});
        getDatas({ ...queryTableDataParams });
        setIsModalOpen(false);
      } else {
        messageApi.open({
          type: "error",
          content: "角色名称已存在",
        });
      }
    } catch (error) {}
  };
  useEffect(() => {
    queryTableDataParams = {
      ...queryTableDataParams,
    };

    getDatas(queryTableDataParams);
    // console.log(queryParams);
    console.log(tableData);
  }, [queryTableDataParams]);
  return (
    <ConfigProvider locale={zh_CN}>
      <div className="deptBox">
        <Form
          layout="inline"
          initialValues={undefined}
          form={formSearch}
          onFinish={handleSerach}
          style={{ fontWeight: "700" }}
        >
          <Form.Item
            label="部门名称"
            name="deptName"
            style={{ width: 300 + "px", marginTop: "10px" }}
          >
            <Input placeholder="请输入部门名称" allowClear />
          </Form.Item>
          <Form.Item
            label="状态"
            name="state"
            wrapperCol={{ span: 22 }}
            style={{ marginTop: "10px" }}
          >
            <Select
              style={{ width: 300 + "px" }}
              allowClear
              showSearch
              placeholder="请选择部门状态"
              optionFilterProp="lable"
              options={[
                {
                  value: 0,
                  label: "正常",
                },
                {
                  value: 1,
                  label: "停用",
                },
              ]}
            />
          </Form.Item>
          <Form.Item style={{ marginTop: "10px" }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginLeft: 20 + "px" }}
              onClick={() => handleSerach()}
            >
              <SearchOutlined />
              搜索
            </Button>
          </Form.Item>
          <Form.Item style={{ marginTop: "10px" }}>
            <Button onClick={() => handleReset()}>
              <SyncOutlined />
              重置
            </Button>
          </Form.Item>
        </Form>
        {/* 新增 */}
        <div className="newAdd">
          <Button type="primary" onClick={() => handleNewAdd()}>
            +新增
          </Button>
          <Button
            type="primary"
            style={{ backgroundColor: "rgb(144,147,153)" }}
            onClick={() => {
              setIsAllExpend(!isAllExpend);
              if (isAllExpend) {
                setExpandedRowKeys([]);
              } else setExpandedRowKeys(treeAnyId);
            }}
          >
            <SwapOutlined rotate={90} />
            {isAllExpend ? "全部收起" : "全部展开"}
          </Button>
        </div>
        {/* 弹出 */}
        <Modal
          open={isModalOpen}
          title={modalTitle}
          okText="确定"
          cancelText="取消"
          onCancel={handleModalCanle}
          onOk={handleModalOk}
          width={"700px"}
        >
          <Form
            form={formModal}
            // layout="inline"
            name="form_in_modal"
            initialValues={{ state: "0" }}
            labelAlign="right"
            // labelCol={{span:12}}
            wrapperCol={{ span: 16 }}
          >
            <Row>
              <Col span={24}>
                <Form.Item
                  name="parentId"
                  label="上级部门"
                  rules={[{ required: true, message: "请选择上级部门" }]}
                  // style={{ width: 100 + "%" }}
                >
                  <TreeSelect
                    disabled={isDisbaled}
                    // showSearch
                    style={{ width: "559px" }}
                    // value={value}
                    dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                    placeholder="请选择上级部门"
                    allowClear
                    // treeDefaultExpandAll
                    // onChange={onChange}
                    treeData={treeData}
                    //
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <Form.Item
                  name="deptName"
                  label="部门名称"
                  rules={[{ required: true, message: "请输入部门名称" }]}
                  // style={{ width: 45 + "%", marginTop: "20px" }}
                >
                  <Input placeholder="请输入部门名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  required
                  name="orderNum"
                  label="显示顺序"
                  rules={[{ required: true, message: "请输入角色显示顺序" }]}
                  // style={{ width: 40 + "%", marginTop: "20px" }}
                >
                  <InputNumber min={0} controls={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row style={{translate:'25px'}}>
              <Col  span={12}>
                <Form.Item
                  name="leader"
                  label="负责人"
                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
                >
                  <Input placeholder="请输入负责人" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="phone"
                  label="联系电话"
                  // style={{ width: 40 + "%", marginTop: "20px" }}
                >
                  <Input placeholder="请输入联系电话" />
                </Form.Item>
              </Col>
            </Row>

            <Row style={{translate:'38px'}}>
              <Col span={12}>
                <Form.Item
                  name="email"
                  label="邮箱"
                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
                >
                  <Input placeholder="请输入邮箱" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="state"
                  label="状态"
                  className="collection-create-form_last-form-item"
                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
                >
                  <Radio.Group>
                    <Radio defaultChecked={true} value="0">
                      正常
                    </Radio>
                    <Radio value="1">停用</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
        {/* 表格 */}
        <div className="tablebox">
          {contextHolder}
          <Table
            expandedRowKeys={expandedRowKeys}
            onExpand={(expanded, record) => {
              // console.log(expanded, record);

              if (expanded) {
                setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
              } else {
                const newEx = expandedRowKeys.filter((element) => {
                  return element != record.deptId;
                });
                // console.log(expandedRowKeys);

                setExpandedRowKeys(newEx);
              }
              console.log(expandedRowKeys);
            }}
            columns={columns}
            rowKey={"deptId"}
            dataSource={tableData}
            pagination={false}
          />
        </div>
      </div>
    </ConfigProvider>
  );
}