import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
import { post } from '@/services/ajax';
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import {
  Button,
  Col,
  Form,
  Input,
  Modal,
  Pagination,
  Popconfirm,
  Row,
  Select,
  Table,
  Tree,
} from 'antd';
import React, { useState } from 'react';
import styles from './index.module.scss';

interface DataType {
  key: React.Key;
  firstName: string;
  lastName: string;
  age: number;
  address: string;
  tags: string[];
}

const DepartmentsList: React.FC = () => {
  const [param, setParam] = useState({
    curr_page: 1,
    page_count: 20,
  });

  const [departmentID, setDepartmentsID] = useState(1);

  const departments = [
    {
      id: 1,
      name: '福州晨丰科技有限公司',
      parent_id: 0,
      sort: 2147483447,
      department_leader: 'chenf,LiXiang,CFRS',
      children: [
        {
          id: 2,
          name: '总经办',
          parent_id: 1,
          sort: 2147483447,
          department_leader: 'chenf',
          children: null,
        },
        {
          id: 3,
          name: '研发部',
          parent_id: 1,
          sort: 2147483247,
          department_leader: 'yangxb',
          children: [
            {
              id: 18,
              name: '.Net组',
              parent_id: 3,
              sort: 100005000,
              department_leader: 'xief',
              children: null,
            },
            {
              id: 19,
              name: '平台组',
              parent_id: 3,
              sort: 100004000,
              department_leader: 'yangxb',
              children: null,
            },
            {
              id: 20,
              name: 'CAD组',
              parent_id: 3,
              sort: 100003000,
              department_leader: 'chenx',
              children: null,
            },
            {
              id: 21,
              name: '测试组',
              parent_id: 3,
              sort: 100001000,
              department_leader: '',
              children: null,
            },
            {
              id: 23,
              name: '是的防守对方',
              parent_id: 3,
              sort: 100000000,
              department_leader: '',
              children: null,
            },
            {
              id: 24,
              name: '12',
              parent_id: 3,
              sort: 99999000,
              department_leader: '',
              children: [
                {
                  id: 25,
                  name: '3',
                  parent_id: 24,
                  sort: 100000000,
                  department_leader: '',
                  children: null,
                },
              ],
            },
            {
              id: 181,
              name: '.Net组',
              parent_id: 3,
              sort: 100005000,
              department_leader: 'xief',
              children: null,
            },
            {
              id: 191,
              name: '平台组',
              parent_id: 3,
              sort: 100004000,
              department_leader: 'yangxb',
              children: null,
            },
            {
              id: 201,
              name: 'CAD组',
              parent_id: 3,
              sort: 100003000,
              department_leader: 'chenx',
              children: null,
            },
            {
              id: 211,
              name: '测试组',
              parent_id: 3,
              sort: 100001000,
              department_leader: '',
              children: null,
            },
            {
              id: 231,
              name: '是的防守对方是的防守对方是的防守对方是的防守对方',
              parent_id: 3,
              sort: 100000000,
              department_leader: '',
              children: null,
            },
          ],
        },
      ],
    },
  ];

  const data: DataType[] = [
    {
      key: '2',
      firstName: 'Jim',
      lastName: 'Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      firstName: 'Joe',
      lastName: 'Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  const [open, setOpen] = useState(false);
  const [popOpen, setPopOpen] = useState(-1);

  return (
    <PageContainer>
      <div style={{ display: 'flex' }}>
        <div
          style={{
            width: 260,
            flexShrink: 0,
            minHeight: 'calc(100vh - 55px - 60px - 96px)',
            maxHeight: 'calc(100vh - 55px - 60px)',
            overflow: 'auto',
            marginRight: 12,
            background: '#fff',
            position: 'sticky',
            top: 64,
            padding: '12px 0',
          }}
        >
          <Tree
            className={'department-tree'}
            blockNode
            selectedKeys={[departmentID]}
            defaultExpandAll
            style={{}}
            treeData={departments}
            fieldNames={{ title: 'name', key: 'id' }}
            onSelect={(selectedKeys) => {
              console.log(selectedKeys);
              if (selectedKeys.length) {
                setDepartmentsID(Number(selectedKeys[0]));
              }
            }}
            titleRender={(nodeData: any) => {
              // console.log(nodeData);
              return (
                <div className={styles.departmentItem}>
                  <div className={styles.name} title={nodeData.name}>
                    {nodeData.name}
                  </div>
                  <div className={styles.btnsBox}>
                    <FormOutlined
                      title="修改"
                      onClick={(e) => {
                        e.stopPropagation();
                        setOpen(true);
                      }}
                      className={styles.edit}
                    />
                    <Popconfirm
                      title="确认删除?"
                      open={popOpen == nodeData.id}
                      onCancel={(e) => {
                        setPopOpen(-1);
                        e?.stopPropagation();
                      }}
                      onConfirm={(e) => {
                        e?.stopPropagation();
                        console.log(nodeData.id);
                      }}
                    >
                      <DeleteOutlined
                        title="删除"
                        onClick={(e) => {
                          e.stopPropagation();
                          setPopOpen(nodeData.id);
                        }}
                        className={styles.del}
                      />
                    </Popconfirm>
                  </div>
                </div>
              );
            }}
          ></Tree>
        </div>
        <Modal
          open={open}
          title="修改部门"
          onCancel={() => setOpen(false)}
          centered
          onOk={() => {}}
        >
          <Form>
            <Form.Item label="名称">
              <Input type="text"></Input>
            </Form.Item>
          </Form>
        </Modal>
        <div style={{ flexGrow: 1, minWidth: 0 }}>
          <SearchBarPlugin>
            <Form>
              <Row gutter={{ xs: 0, sm: 16 }}>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Select
                      defaultValue="lucy"
                      style={{ width: '100%' }}
                      onChange={() => {}}
                      options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Input autoComplete="off"></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Input autoComplete="off"></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Select
                      defaultValue="lucy"
                      style={{ width: '100%' }}
                      onChange={() => {}}
                      options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                        { value: 'disabled', label: 'Disabled', disabled: true },
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Input autoComplete="off"></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Input autoComplete="off"></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Input autoComplete="off"></Input>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </SearchBarPlugin>
          <SearchBottonsCardPlugin>
            <Row justify={'center'}>
              <Button
                type="primary"
                onClick={() => {
                  post({
                    url: '/Departments/List',
                  }).then((res) => {});
                }}
              >
                搜索
              </Button>
            </Row>
          </SearchBottonsCardPlugin>
          <Table
            size="middle"
            dataSource={data}
            style={{ padding: 16, borderRadius: 6, background: '#fff', marginTop: 16 }}
            pagination={false}
            bordered={true}
          >
            <Table.Column title="ID" dataIndex={'key'}></Table.Column>
            <Table.Column title="firstName" dataIndex={'firstName'}></Table.Column>
            <Table.Column
              width={90}
              title="操作"
              render={(_text, record: any) => {
                return (
                  <Button
                    type="primary"
                    onClick={() => {
                      console.log(record);
                    }}
                  >
                    {record.firstName}
                  </Button>
                );
              }}
            ></Table.Column>
          </Table>

          <Pagination
            style={{
              background: '#fff',
              borderRadius: 6,
              marginTop: 16,
              padding: 16,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            current={param.curr_page}
            pageSize={param.page_count}
            total={1000}
            pageSizeOptions={[10, 20, 50, 100]}
            onShowSizeChange={(current, size) => {
              param.page_count = size;
              setParam({ ...param });
            }}
            showTotal={(total, range) => {
              return <span style={{ lineHeight: 1 }}>共{total}条</span>;
            }}
            onChange={(page, pageSize) => {
              param.curr_page = page;
              setParam({ ...param });
            }}
          />
        </div>
      </div>
    </PageContainer>
  );
};

export default DepartmentsList;