import React, { useState, useEffect } from 'react';
import {
  Table,
  Tooltip,
  Spin,
  Modal,
  Form,
  Input,
  Space,
  Button,
  Popconfirm,
  notification,
  message,
  Row,
  Col,
} from 'antd';
import { EditTwoTone, DeleteOutlined } from '@ant-design/icons';
import { get, CITY_SERVICE } from '@/services';

import {
  GetDataDictionaryList,
  EditDataDictionary,
  AddDataDictionary,
  DeleteDataDictionary,
} from '@/services/dataCenter/api';
import styles from './WebDic.less';

const { Search } = Input;
const WebDic = () => {
  const [loading, setLoading] = useState(false);
  const [level, setLevel] = useState(0); // 设置级别,一级1,二级2,添加条目时使用
  const [addVisible, setAddVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [data, setData] = useState([]); // 一级条目数据
  const [subData, setSubData] = useState([]); // 二级条目数据
  const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置
  const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置
  const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID,添加二级条目时使用
  const [first, setFirst] = useState(true); // 是否第一次加载
  const [addForm] = Form.useForm();
  const [editForm] = Form.useForm();

  const columns = [
    {
      title: '名称',
      dataIndex: 'nodeName',
      key: 'nodeName',
      width: 220,
    },
    {
      title: '值',
      dataIndex: 'nodeValue',
      key: 'nodeValue',
      render: record => {
        if (!record) {
          return '-';
        }
        return record;
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: record => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
                  setSelectColor(record);
                }
                setEditVisible(true);
                editForm.setFieldsValue({
                  nodeName1: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该数据?"
              okText="确认"
              cancelText="取消"
              onConfirm={submitDelete}
            >
              <DeleteOutlined
                onClick={() => {
                  setSelect(record);
                  if (record.parentID === '-1') {
                    setSelectColor(record);
                  }
                }}
                style={{
                  fontSize: '16px',
                  margin: '0px 10px',
                  color: '#e86060',
                }}
              />
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData('-1');
  }, []);
  // 根据父节点nodeID(即parentID)获取数据,一级条目parentID = -1
  const getData = value => {
    setLoading(true);
    // get(`${CITY_SERVICE}/OMS.svc/D_GetDataDictionaryList`, {
    //   _version: 9999,
    //   _dc: new Date().getTime(),
    //   nodeID: value,
    //   key: '',
    // })
    //   .then(res => {
    //     if (res) {
    //       if (res.length > 0) {
    //         res.map(item => {
    //           item.key = item.nodeID;
    //           return item;
    //         });
    //       }
    //       // value为 -1 时获取一级条目数据,否则获取二级条目数据
    //       if (value === '-1') {
    //         setData(res); // 设置一级条目数据
    //         if (first) {
    //           setSelect(res[0]); // 默认当前选中一级条目第一条
    //           setSelectColor(res[0]);
    //           setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
    //           setFirst(false);
    //           // 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
    //           if (res[0] && res[0].parentID === '-1') {
    //             getData(res[0].nodeID);
    //           }
    //         }
    //       } else if (value) {
    //         setSubData(res); // 设置二级条目,res为空[]时也要设置
    //       }
    //     } else {
    //       notification.error({
    //         message: '获取失败',
    //         description: res.message,
    //       });
    //     }
    //     setLoading(false);
    //   })
    //   .catch(err => {
    //     setLoading(false);
    //     message.error(err);
    //   });

    GetDataDictionaryList({ nodeID: value }).then(resnew => {
      if (resnew.code == 0) {
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
        }
        // value为 -1 时获取一级条目数据,否则获取二级条目数据
        if (value === '-1') {
          setData(res); // 设置一级条目数据
          if (first) {
            setSelect(res[0]); // 默认当前选中一级条目第一条
            setSelectColor(res[0]);
            setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
            setFirst(false);
            // 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
            if (res[0] && res[0].parentID === '-1') {
              getData(res[0].nodeID);
            }
          }
        } else if (value) {
          setSubData(res); // 设置二级条目,res为空[]时也要设置
        }
        setLoading(false);
      } else {
        setLoading(false);
        notification.error({
          message: '获取失败',
          description: resnew.msg,
        });
      }
    });
  };
  const setRowClassName = record =>
    record.nodeID === selectColor.nodeID ? styles.clickRowStyle : '';

  // 提交-添加
  const submitAdd = value => {
    const nodeName1 = addForm.getFieldValue('nodeName1');
    const nodeValue = addForm.getFieldValue('nodeValue');
    // if (nodeName1) {
    //   get(`${CITY_SERVICE}/OMS.svc/D_AddDataDictionary`, {
    //     _version: 9999,
    //     _dc: new Date().getTime(),
    //     nodeID: value,
    //     nodeName: nodeName1,
    //     nodeValue,
    //   })
    //     .then(res => {
    //       if (res.success) {
    //         setAddVisible(false);
    //         if (level === 1) {
    //           getData('-1');
    //           getData(res.message); // res.message为添加成功返回的一级条目ID
    //           // 设置添加二级条目的父级ID及父级ID选中状态
    //           setSelect({ nodeID: res.message, parentID: '-1' });
    //           setSelectID(res.message);
    //           setSelectColor({ nodeID: res.message });
    //         } else {
    //           getData(value);
    //         }
    //         notification.success({
    //           message: '提交成功',
    //         });
    //       } else {
    //         notification.error({
    //           message: '提交失败',
    //           description: res.message,
    //         });
    //       }
    //     })
    //     .catch(err => {
    //       message.error(err);
    //     });
    // } else {
    //   notification.error({
    //     message: '提交失败',
    //     description: '名称不能为空',
    //   });
    // }
    AddDataDictionary({
      nodeID: value,
      nodeName: nodeName1,
      nodeValue,
    }).then(res => {
      if (res.code == 0) {
        setAddVisible(false);
        if (level === 1) {
          getData('-1');
          getData(res.msg); // res.message为添加成功返回的一级条目ID
          // 设置添加二级条目的父级ID及父级ID选中状态
          setSelect({ nodeID: res.msg, parentID: '-1' });
          setSelectID(res.msg);
          setSelectColor({ nodeID: res.msg });
        } else {
          getData(value);
        }
        notification.success({
          message: '提交成功',
        });
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };
  // 提交-修改
  const submitEdit = () => {
    const nodeName1 = editForm.getFieldValue('nodeName1');
    const nodeValue = editForm.getFieldValue('nodeValue');
    if (nodeName1) {
      // get(`${CITY_SERVICE}/OMS.svc/D_EditDataDictionary`, {
      //   _version: 9999,
      //   _dc: new Date().getTime(),
      //   nodeID: select.nodeID,
      //   nodeName: nodeName1,
      //   nodeValue,
      // })
      //   .then(res => {
      //     if (res.success) {
      //       setEditVisible(false);
      //       getData(select.parentID);
      //       notification.success({
      //         message: '提交成功',
      //       });
      //     } else {
      //       notification.error({
      //         message: '提交失败',
      //         description: res.message,
      //       });
      //     }
      //   })
      //   .catch(err => {
      //     message.error(err);
      //   });

      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName: nodeName1,
        nodeValue,
      }).then(res => {
        if (res.code == 0) {
          setEditVisible(false);
          getData(select.parentID);
          notification.success({
            message: '提交成功',
          });
        } else {
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
        }
      });
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
      });
    }
  };
  // 提交-删除
  const submitDelete = () => {
    DeleteDataDictionary({
      nodeID: select.nodeID,
    })
      .then(res => {
        if (res.code === 0) {
          getData(select.parentID);
          if (select.parentID === '-1') {
            setSubData([]);
          }
          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  const setItem = value => {
    setLevel(value);
    setAddVisible(true);
    addForm.resetFields();
    // addForm.setFieldsValue({ nodeName1: '', nodeValue: '' });
  };
  const pagenation = {
    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
    pageSizeOptions: [10, 20, 50, 100],
    defaultPageSize: '20',
    showQuickJumper: true,
    showSizeChanger: true,
  };
  const onSearch = key => {};

  return (
    <div className={styles.WebDic}>
      <Spin spinning={loading} tip="loading...">
        <Row style={{ background: 'white' }}>
          <Col span={12} className={styles.left}>
            <div style={{ marginBottom: '10px', fontSize: '16px' }}>
              <span style={{ padding: '0 10px' }}>一级条目</span>
              <Button type="primary" size="small" onClick={() => setItem(1)}>
                添加
              </Button>
              <Search
                style={{ width: '300px', marginLeft: '10px' }}
                onSearch={onSearch}
              />
            </div>
            {/* 一级条目 表格 */}
            <Table
              size="small"
              bordered
              columns={columns}
              dataSource={data}
              scroll={{ x: 'max-content' }}
              rowClassName={setRowClassName}
              onRow={record => ({
                onClick: () => {
                  getData(record.nodeID);
                  setSelect(record);
                  setSelectColor(record);
                  setSelectID(record.nodeID);
                },
              })}
              pagination={pagenation}
            />
          </Col>
          <Col span={12}>
            <div style={{ marginBottom: '10px', fontSize: '16px' }}>
              <span style={{ padding: '0 10px' }}>二级条目</span>
              <Button type="primary" size="small" onClick={() => setItem(2)}>
                添加
              </Button>
            </div>
            {/* 二级条目 表格 */}
            <Table
              size="small"
              bordered
              columns={columns}
              dataSource={subData}
              scroll={{ x: 'max-content' }}
              pagination={pagenation}
            />
          </Col>
        </Row>
      </Spin>

      {/* 添加 */}
      <Modal
        title={level === 1 ? '添加一级条目' : '添加二级条目'}
        visible={addVisible}
        onOk={() => {
          if (level === 1) {
            submitAdd('-1');
          } else {
            submitAdd(selectID);
          }
        }}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={addForm} labelCol={{ span: 3 }}>
          <Form.Item
            name="nodeName1"
            label="名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入名称" />
          </Form.Item>
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 修改 */}
      <Modal
        title={select.parentID === '-1' ? '修改一级条目' : '修改二级条目'}
        visible={editVisible}
        onOk={submitEdit}
        onCancel={() => {
          setEditVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
          <Form.Item
            name="nodeName1"
            label="名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入名称" />
          </Form.Item>
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default WebDic;