import React, { useState, useEffect } from 'react';
import { Form, Card, Space, Table, Popconfirm, Spin, Tooltip, notification } from 'antd';

import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  PlusSquareFilled,
  RightOutlined,
  EditTwoTone,
  DeleteOutlined,
} from '@ant-design/icons';
import classnames from 'classnames';
import PageContainer from '@/components/BasePageContainer';
import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
import AddModal from './BookConfig';
import styles from './standingBook.less';
const StandingBook = props => {
  const [allData, setAllData] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [treeLoading, setTreeLoading] = useState(false);
  const [maxLength, setMaxLength] = useState(0);
  const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
  const [formObj, setFormObj] = useState('');
  const [flag, setFlag] = useState(0); // 弹窗类型
  const [isVisible, setIsVisible] = useState(false); // 弹窗
  const [isType, setIsType] = useState(''); // 弹窗类型
  const [pickItem, setPickItem] = useState('');
  const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
  const { Item } = Form;

  const editor = record => {
    setFormObj(record);
    setIsType('edit');
    setIsVisible(true);
  };
  const Submit = prop => {
    setIsVisible(false);
    setFlag(flag + 1);
  };

  const columns = [
    {
      title: '台账类型',
      dataIndex: 'AccountType',
      key: 'AccountType',
      width: 100,
    },
    {
      title: '台账名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: 200,
    },

    {
      title: '台账表名',
      dataIndex: 'tableName',
      key: 'tableName',
      align: 'center',
      width: 200,
      ellipsis: true,
    },
    {
      title: '台账字段',
      dataIndex: 'fields',
      key: 'fields',
      align: 'center',
    },
    {
      title: '检索字段',
      dataIndex: 'searchFields',
      key: 'searchFields',
      align: 'center',
    },
    {
      title: '添加字段',
      dataIndex: 'addFields',
      key: 'addFields',
      align: 'center',
    },

    {
      title: '编辑字段',
      dataIndex: 'editFields',
      key: 'editFields',
      align: 'center',
    },
    {
      title: '前端字段',
      dataIndex: 'webFields',
      key: 'webFields',
      align: 'center',
    },
    {
      title: '手持字段',
      dataIndex: 'mobileFields',
      key: 'mobileFields',
      align: 'center',
      width: 100,
    },
    {
      title: '外部字段',
      dataIndex: 'outFields',
      key: 'outFields',
      align: 'center',
      width: 100,
      render: text => (
        <span
          style={{
            display: 'inline-block',
            width: '80px',
            color: Number(text) > 0 ? 'red' : '',
            backgroundColor: Number(text) > 0 ? 'yellow' : '',
          }}
        >
          {text}
        </span>
      ),
    },
    {
      title: '操作',
      ellipsis: true,
      align: 'center',
      render: (text, record) => (
        <Space>
          <Tooltip title="编辑此表">
            <EditTwoTone onClick={() => editor(record)} style={{ fontSize: '16px' }} />
          </Tooltip>

          <Tooltip title="删除此表">
            <Popconfirm
              placement="bottomRight"
              title={<p>是否删除此表</p>}
              // title={`确认删除用户${currentUser}`}
              okText="确认"
              cancelText="取消"
              onConfirm={() => deleteChart(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    setTreeLoading(true);
    GetCM_Ledger_LoadLedgers().then(res => {
      setTreeLoading(false);
      if (res.msg === 'Ok' && res.data.root) {
        console.log(res.data.root);
        setMaxLength(res.data.root.length + 1);
        let arr = formateArrDataA(res.data.root, 'type');
        let newArr = [];
        Object.keys(arr).map((item, index) => {
          newArr.push(item);
        });
        console.log(arr);
        setAllData(arr);
        // 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
        flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
        console.log(newArr, 'newArr');
        setTableData(newArr);
      }
    });
  }, [flag]);
  const formateArrDataA = (initialArr, name) => {
    console.log(initialArr);
    console.log(name);
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    return tempObj;
  };
  // 删除表字段
  const deleteChart = record => {
    CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
      if (res.msg === 'Ok' || res.msg === '') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  // 显示弹框
  const showPopup = () => {
    setIsVisible(true);
    setIsType('add');
  };
  const onSubmit = () => {
    setIsVisible(false);
    setFlag(flag + 1);
  };
  return (
    <PageContainer className={styles.userManageContainer}>
      <div className={styles.contentContainers}>
        <Spin spinning={treeLoading} tip="loading...">
          <Card
            className={classnames({
              [styles.orgContainer]: true,
              [styles.orgContainerHide]: !treeVisible,
            })}
          >
            {treeVisible ? (
              <>
                <div>
                  <span
                    style={{
                      fontSize: '15px ',
                      fontWeight: 'bold',
                      color: '#333E51',
                      paddingLeft: '14px',
                    }}
                  >
                    台账列表
                  </span>
                  <Tooltip title="添加台账表">
                    <PlusSquareFilled
                      style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        verticalAlign: 'middle',
                        float: 'right',
                        paddingRight: '14px',
                      }}
                      onClick={e => showPopup()}
                    />
                  </Tooltip>
                  <hr style={{ width: '100%', color: '#eeecec' }} />
                  <div
                    style={{
                      height: 'calc(100vh - 150px)',
                      overflowY: 'scroll',
                    }}
                  >
                    {tableData.length > 0 &&
                      tableData.map((item, index) => {
                        return (
                          <div
                            className={classnames({
                              [styles.listItem]: true,
                              [styles.pickItem]: item === pickItem,
                              [styles.listHover]: item !== pickItem && item === hoverItemIndex,
                            })}
                            onClick={e => setPickItem(item)}
                            onMouseEnter={() => {
                              setHoverItemIndex(item);
                            }}
                            onMouseLeave={() => {
                              setHoverItemIndex('');
                            }}
                            key={index}
                          >
                            {item}（{allData[item] ? allData[item].length : ''}）
                          </div>
                        );
                      })}
                  </div>
                </div>
              </>
            ) : (
              ''
            )}

            <div className={styles.switcher}>
              {treeVisible && (
                <Tooltip title="隐藏台账列表">
                  <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
                </Tooltip>
              )}
              {!treeVisible && (
                <Tooltip title="显示台账列表">
                  <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
                </Tooltip>
              )}
            </div>
          </Card>
        </Spin>
        <div
          className={classnames({
            [styles.userContainer]: true,
            [styles.userContainerHide]: !treeVisible,
          })}
        >
          <Table
            size="small"
            rowKey="ID"
            bordered
            onRow={record => {
              return {
                onDoubleClick: event => {
                  event.stopPropagation();
                  editor(record);
                }, // 双击
              };
            }}
            columns={columns}
            dataSource={allData[pickItem]}
            // loading={tableLoading}
            scroll={{ x: 'max-content', y: 'calc(100vh - 150px)' }}
            // scroll={{ x: 'max-content' }}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSizeOptions: [10, 20, 50, 100],
              defaultPageSize: 20,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </div>
        <AddModal
          visible={isVisible}
          type={isType}
          formObj={formObj}
          maxLength={maxLength}
          callBackSubmit={onSubmit}
          onCancel={() => setIsVisible(false)}
          tableData={tableData}
        />
      </div>
    </PageContainer>
  );
};
export default StandingBook;
