import React, {
  useEffect,
  useState,
  useRef,
  useContext,
  useMemo,
  forwardRef,
  useImperativeHandle,
} from 'react';
import {
  CreateTablePost,
  getTableInfo,
  updateTablePost,
  GetDefaultTableFields,
  reloadTableFields,
  removeFields,
} from '@/services/tablemanager/tablemanager';
import {
  Form,
  Modal,
  Button,
  Input,
  Select,
  Checkbox,
  Table,
  notification,
  InputNumber,
  Tooltip,
  Switch,
  Spin,
  Empty,
} from 'antd';
import {
  DeleteOutlined,
  PlusOutlined,
  MinusOutlined,
  DeleteFilled,
  KeyOutlined,
} from '@ant-design/icons';
import styles from './TableView.less';
import primaryKey from '../../../../assets/images/icons/主键.svg';
// import index from '../../../../assets/images/icons/索引.svg';
import clearImg from '@/assets/font/omsfont/clear.svg';
// import { defaultFields } from './defaultFields';
const EditableContext = React.createContext(null);

const tableMap = {
  事件表: '事件',
  事件工单表: '事件',
  工单表: '工单',
  台账表: '台账',
  设备表: '设备',
  反馈表: '反馈',
};
const desabledArr = ['FileUpload', 'Coordinate', 'DrawPath', 'DrawArea', 'Device', 'RelationForm'];
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};
const EditableCell = ({
  index,
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ellipsis,
  width,
  dataSource,
  tableDataCount,
  defaultData,
  setDefaultData,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef(null);
  const form = useContext(EditableContext);

  // 复选框回显
  useEffect(() => {
    const arr = [
      'WebDisplay',
      'IsSort',
      'AccurateSearch',
      'LikeSearch',
      'IsAdd',
      'IsEdit',
      'MobileDisplay',
    ];
    if (record && arr.includes(dataIndex)) {
      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    }
  }, [dataSource]);

  useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, [dataIndex]: values[dataIndex], index, errors: [] }, dataIndex);
    } catch (errInfo) {
      toggleEdit();
      handleSave({ ...record, index, errors: errInfo.errorFields[0].errors }, dataIndex);
      console.log('Save failed:', errInfo);
    }
  };
  const saveCheckBox = async key => {
    let values = await form.validateFields();
    values[key] = values[key] ? 1 : 0;
    form.setFieldsValue({
      [dataIndex]: values[key],
    });
    handleSave({ ...record, ...values, index });
  };
  const saveSwitch = async key => {
    let values = await form.validateFields();
    values[key] = values[key] ? 1 : 0;
    form.setFieldsValue({
      [dataIndex]: values[key],
    });
    handleSave({ ...record, ...values, index });
  };

  const saveAddCheckBox = async e => {
    const values = await form.validateFields();
    form.setFieldsValue({
      [dataIndex]: values.IsAddFieldConfig,
    });
    handleSave({ ...record, ...values, index });
    let defaultArr = JSON.parse(JSON.stringify(defaultData));
    defaultArr.forEach(item => {
      if (item.Name === record.Name) {
        item.IsAddFieldConfig = values.IsAddFieldConfig;
      }
    });
    setDefaultData(defaultArr);
  };

  const rendeFrom = val => {
    let lengthMin = 0;
    let lengthMax = 0;
    let decimalPlaceMin = 0;
    let decimalPlaceMax = 0;
    // 字段类型为精确数值型（decimal），字段长度1-38小数点位数0-38
    if (record.FieldType === 8) {
      lengthMin = 1;
      lengthMax = 38;
      decimalPlaceMin = 0;
      decimalPlaceMax = 38;
    }
    // 字段类型为字符串型（nvarchar）、二进制（varbinary），字段长度为0-4000
    if (record.FieldType === 2 || record.FieldType === 10) {
      lengthMin = 1;
      lengthMax = 4000;
    }
    // 字段类型为字符串型（varchar）、，字段长度为0-8000
    if (record.FieldType === 0 || record.FieldType === 1) {
      lengthMin = 1;
      lengthMax = 8000;
    }
    if (val === '字段名称') {
      return <Input ref={inputRef} onPressEnter={save} onBlur={save} />;
    }
    if (val === '列表对齐') {
      return (
        <Select ref={inputRef} onPressEnter={save} onBlur={save} showSearch>
          <Select.Option value="左">左</Select.Option>
          <Select.Option value="中">中</Select.Option>
          <Select.Option value="右">右</Select.Option>
        </Select>
      );
    }
    if (val === '列计算规则') {
      return (
        <Select
          ref={inputRef}
          onPressEnter={save}
          onBlur={save}
          showSearch
          disabled={!record.WebDisplay}
        >
          <Select.Option value="合计">合计</Select.Option>
          <Select.Option value="平均">平均</Select.Option>
          <Select.Option value="计数">计数</Select.Option>
          <Select.Option value="无">(无)</Select.Option>
        </Select>
      );
    }
    if (val === '字段长度') {
      return (
        <InputNumber
          ref={inputRef}
          min={lengthMin}
          max={lengthMax}
          onPressEnter={save}
          onBlur={save}
        />
      );
    }
    if (val === '小数点位') {
      return (
        <InputNumber
          ref={inputRef}
          min={decimalPlaceMin}
          max={decimalPlaceMax}
          onPressEnter={save}
          onBlur={save}
        />
      );
    }

    return <Input ref={inputRef} onPressEnter={save} onBlur={save} />;
  };

  let childNode = children;

  if (editable) {
    // 字段类型为 字符串型（varchar）、二进制（varbinary）、字符型（nchar）、字符串型（nvarchar）、精确数值型（decimal）让修改
    if (
      title === '字段长度' &&
      (record.FieldType !== 0 &&
        record.FieldType !== 10 &&
        record.FieldType !== 1 &&
        record.FieldType !== 2 &&
        record.FieldType !== 8)
    ) {
      return <td {...restProps}>--</td>;
    }
    // 字段类型为 精确数值型（decimal）让修改
    if (title === '小数点位' && record.FieldType !== 8) {
      return <td {...restProps}>--</td>;
    }
    // 只读
    if (record.ReadOnly && title !== '允许空值' && title !== '是否附加') {
      return <td {...restProps}>{childNode}</td>;
    }
    // 表单规则
    let rules = [];
    if (title === '字段名称') {
      rules = [
        {
          required: true,
          message: '字段名称不能为空',
        },
        {
          validator: (rule, value) => {
            let list = JSON.parse(JSON.stringify(dataSource));
            // 合并内置字段
            if (
              value &&
              [...defaultData, ...list].some(
                (item, i) => item.Name === value && item.keyIndex !== record.keyIndex,
              )
            ) {
              return Promise.reject(new Error('字段名称重复，请重新输入'));
            }
            return Promise.resolve();
          },
        },
        {
          pattern: /^(?!(\d+)$)[\u4e00-\u9fffa-zA-Z0-9_]+$/,
          message: '不能输入特殊符号或者数字开头',
        },
      ];
    }
    childNode = editing ? (
      <Form.Item
        style={{
          width: `${width - 20}px`,
          height: '32px',
          margin: 0,
          marginLeft: '50%',
          transform: 'translateX(-50%)',
        }}
        rules={rules}
        name={dataIndex}
      >
        {rendeFrom(title)}
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        // title={children[1]}
        style={{
          width: `${width - 20}px`,
          height: '32px',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          margin: 'auto',
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
    const checkArr = ['列表显示', '表单可添加', '表单可编辑', '手持可用'];
    const switchArr = ['是否排序', '表头检索', '模糊检索'];
    if (checkArr.includes(title)) {
      childNode = (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          valuePropName="checked"
        >
          <Checkbox
            onChange={() => saveCheckBox(dataIndex)}
            disabled={record.ReadOnly || tableDataCount}
          />
        </Form.Item>
      );
    }
    if (switchArr.includes(title)) {
      childNode = (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          valuePropName="checked"
        >
          <Switch
            checkedChildren="是"
            unCheckedChildren="否"
            onChange={() => saveSwitch(dataIndex)}
            disabled={desabledArr.includes(record.widget)}
          />
        </Form.Item>
      );
    }
  }

  return <td {...restProps}>{childNode}</td>;
};
const TableView = forwardRef((props, ref) => {
  const { callBackSubmit, onCancel, visible, tableType, defaultFieldsList, tbData } = props;
  const [dataSource, setDataSource] = useState([]);
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(!visible);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tableMsg, setTableMsg] = useState({});
  const [tableDataCount, setTableDataCount] = useState(false);
  const [defaultData, setDefaultData] = useState([]);
  const [showDefault, setShowDefault] = useState(true);
  const [exceptionArr, setExceptionArr] = useState([]);
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    onFinish,
    setTableData,
  }));

  const formObj = {
    IsCanUpgrade: false,
    TableDataCount: false,
    TableFields: null,
    exceptionEvents: '(无)',
    exceptionFields: '(无)',
    extraFieldCount: '10',
    fieldCount: '12',
    fieldRatio: '12/22',
    groupCount: '3',
    groupName: '事件工单表',
    groupOrder: 0,
    interfaceText: '',
    key: 19,
    labelStyle: '',
    missingFieldCount: '(无)',
    missingFieldCountHtml: '1',
    officeTmpl: '无',
    officeTmplHtml: '2',
    order: 0,
    repeatFieldCount: '(无)',
    repeatFieldCountHtml: '1',
    tableAlias: '资产采购',
    tableID: 165,
    tableName: '事件_资产_采购申请表',
    tableStyle: '一行三列/左右布局',
  };
  const type = 'tableEdit';
  useEffect(() => {
    if (visible) {
      if (type === 'tableEdit') {
        setCount(tbData.length);
        setDataSource(tbData);
        // form.setFieldsValue({
        //   tableName: formObj.tableName,
        //   alias: formObj.tableAlias,
        // });
        // getTableInfo({ tableName: formObj.tableName, isIncludeField: true })
        //   .then(res => {
        //     setLoading(false);
        //     if (res.code === 0) {
        //       setTableDataCount(res.data.root[0].TableDataCount);
        //       setTableMsg({
        //         tableStyle: res.data.root[0].tableStyle ? res.data.root[0].tableStyle : '大',
        //         officeTmpl: res.data.root[0].officeTmpl,
        //         interfaceName: res.data.root[0].interfaceText,
        //         tableID: res.data.root[0].tableID,
        //       });
        //       const defaultList = [];
        //       const fieldList = res.data.root[0].TableFields.map((item, index) => {
        //         item.groupName = formObj.groupName;
        //         const obj = {
        //           ...item,
        //           keyIndex: index,
        //         };
        //         if (item.ReadOnly) {
        //           defaultList.push(obj);
        //         }
        //         return obj;
        //       });
        //       setDefaultData(defaultList);
        //       setCount(fieldList.length);

        //       setShowDefault(false);
        //       let list = JSON.parse(JSON.stringify(fieldList));
        //       list = list.filter(item => !item.ReadOnly);
        //       setDataSource(list);
        //     } else {
        //       notification.error({ message: '提示', duration: 3, description: res.msg });
        //     }
        //   })
        //   .catch(() => {
        //     setLoading(false);
        //     notification.error({ message: '提示', duration: 3, description: '网络异常' });
        //   });
      } else {
        let list = defaultFieldsList
          .find(item => item.value === tableType)
          .list.map((item, i) => ({ ...item, keyIndex: i }));
        console.log(list);
        setDefaultData(list);
        setCount(list.length);
        setShowDefault(false);
        let listitem = JSON.parse(JSON.stringify(list));
        listitem = listitem.filter(item => !item.ReadOnly);
        setDataSource(listitem);
      }
      reloadTableFieldsArr();
    } else {
      setShowDefault(false);
      setDataSource([]);
      setDefaultData([]);
      setSelectedRowKeys([]);
      setExceptionArr([]);
      form.resetFields();
    }
  }, [visible]);

  const removeMissingFields = () => {
    let ids = exceptionArr.map(item => item.ID).join(',');
    removeFields({
      fieldIDs: ids,
    }).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '清除成功',
        });
        reloadTableFieldsArr();
      }
    });
  };
  const reloadTableFieldsArr = () => {
    reloadTableFields({
      tableName: formObj.tableName,
    }).then(res => {
      if (res.msg === 'Ok') {
        setExceptionArr(res.data.root.filter(item => item.group === '(缺少字段)'));
      }
    });
  };

  // 设置loading与表格数据
  const setTableData = (flag, data) => {
    setLoading(flag);
    setDataSource(data);
  };

  // 提交表单
  const onFinish = () => {
    // 校验提示
    let checkMsg = '';
    let TableFields = JSON.parse(JSON.stringify(dataSource));

    // console.log(TableFields,'TableFieldsTableFields');
    return TableFields;
  };
  // 添加字段
  const handleAdd = () => {
    const newData = {
      keyIndex: count,
      Name: '',
      FieldType: 0,
      FieldLength: 255,
      DecimalPlace: 0,
      IsNullable: true,
      IsAddFieldConfig: true,
    };
    setDataSource([...dataSource, newData]);
    setCount(count + 1);
    setTimeout(() => {
      let tableEl = document.querySelector(`.${styles.content} .ant-table-body`);
      tableEl.scrollTop = tableEl.scrollHeight;
    }, 10);
  };

  // 批量删除字段
  const deleteFilleds = () => {
    if (selectedRowKeys.length === 0) {
      notification.error({ message: '提示', duration: 3, description: '请选择字段' });
      return;
    }
    const list = [];
    dataSource.forEach(item => {
      const isDelete = selectedRowKeys.some(value => value === item.keyIndex);
      if (!isDelete) {
        list.push(item);
      }
    });
    setDataSource(list);
  };
  // 删除字段
  const handleDelete = (record, keyIndex) => {
    if (record.ReadOnly) {
      notification.error({ message: '提示', duration: 3, description: '内置字段不允许删除' });
      return;
    }
    const newData = dataSource.filter((item, index) => index !== keyIndex);
    setDataSource(newData);
  };
  const addArr = useMemo(() => {
    let arr = JSON.parse(JSON.stringify(dataSource));
    if (showDefault) {
      return arr;
    }
    return [...defaultData, ...arr];
  }, [showDefault, defaultData, dataSource]);
  // 修改后存值
  const handleSave = (row, key) => {
    if (key === 'FieldType') {
      if (row.FieldType === 0 || row.FieldType === 2) {
        row.FieldLength = 255;
        row.DecimalPlace = 0;
      } else if (row.FieldType === 10) {
        row.FieldLength = 50;
        row.DecimalPlace = 0;
      } else if (row.FieldType === 1) {
        row.FieldLength = 10;
        row.DecimalPlace = 0;
      } else if (row.FieldType === 8) {
        row.FieldLength = 18;
        row.DecimalPlace = 3;
      } else {
        row.FieldLength = 0;
        row.DecimalPlace = 0;
      }
    }
    const { index } = row;
    const newData = [...dataSource];
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    // 内置字段同步更改
    // if (index < defaultData.length) {
    //   const newDefaultData = [...defaultData];
    //   newDefaultData.splice(index, 1, { ...item, ...row });
    //   setDefaultData(newDefaultData);
    // }
    setDataSource(newData);
  };
  // 是否显示默认字段
  const showDefaultFields = e => {
    setShowDefault(e);
    let list = JSON.parse(JSON.stringify(dataSource));
    if (e) {
      // 显示内置字段
      list = [...defaultData, ...list];
    } else {
      list = list.filter(item => !item.ReadOnly);
    }
    setDataSource(list);
  };
  const deleteAddField = (row, index) => {
    let arr = JSON.parse(JSON.stringify(dataSource));
    arr.forEach(item => {
      if (item.Name === row.Name) {
        item.IsAddFieldConfig = false;
      }
    });
    if (!showDefault) {
      let defaultArr = JSON.parse(JSON.stringify(defaultData));
      defaultArr.forEach(item => {
        if (item.Name === row.Name) {
          item.IsAddFieldConfig = false;
        }
      });
      setDefaultData(defaultArr);
    }
    setDataSource(arr);
    // }
  };
  // 表格设置
  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const getStyles = type => {
    switch (type) {
      case '文本控件':
        return { background: '#DEFED9', color: '#48BC2E' };
      case '选择器控件':
        return { background: '#E1EDFE', color: '#0765F3' };
      case '业务控件':
        return { background: '#FCE2FA', color: '#DD3CC4' };
      case '时间控件':
        return { background: '#E1EDFE', color: '#0765F3' };
      case '附件控件':
        return { background: '#FCF2E0', color: '#F59E06' };
      case 'GIS控件':
        return { background: '#D1F5EB', color: '#0A9C71' };
      case '高级控件':
        return { background: '#D6F1FE', color: '#0195D4' };
      default:
        return {};
    }
  };
  const defaultColumns = [
    {
      title: '序号',
      align: 'center',
      width: 50,
      render: (text, record, index) => <span>{index + 1}</span>,
      fixed: 'left',
    },
    {
      title: '字段名称',
      dataIndex: 'FieldName',
      width: 200,
      // ellipsis: true,
      // editable: true,
      align: 'center',
      fixed: 'left',
    },
    {
      title: '字段别名',
      dataIndex: 'AliasName',
      width: 200,
      // ellipsis: true,
      // editable: true,
      align: 'center',
    },
    {
      title: '字段形态',
      dataIndex: 'Shape',
      width: 200,
      ellipsis: true,
      // editable: true,
      align: 'center',
      render: (text, record) => {
        return text ? (
          <span
            style={{
              ...getStyles(record.type),
              padding: '2px 10px',
              borderRadius: '5px',
              border: '1px solid',
            }}
          >
            {text}
          </span>
        ) : (
          ''
        );
      },
      // render: text => {
      //   switch (text) {
      //     case 0:
      //       return '字符串型（varchar）';
      //     case 1:
      //       return '字符型（nchar）';
      //     case 2:
      //       return '字符串型（nvarchar）';
      //     case 3:
      //       return '字符串型（nvarchar(max)）';
      //     case 4:
      //       return '布尔型（bit）';
      //     case 5:
      //       return '整数型（int）';
      //     case 6:
      //       return '浮点型（float）';
      //     case 7:
      //       return '长整型（bigint）';
      //     case 8:
      //       return '精确数值型（decimal）';
      //     case 9:
      //       return '时间（datetime）';
      //     case 10:
      //       return '二进制（varbinary）';
      //     case 11:
      //       return '二进制（varbinary(max)）';
      //     case 12:
      //       return '字符串型（varchar(max)）';

      //     default:
      //       return null;
      //   }
      // },
    },
    {
      title: '列表显示',
      dataIndex: 'WebDisplay',
      width: 100,
      ellipsis: true,
      editable: true,
      align: 'center',
    },
    {
      title: '列计算规则',
      dataIndex: 'ColumnCalculationRule',
      width: 100,
      ellipsis: true,
      editable: true,
      align: 'center',
    },
    {
      title: '列表对齐',
      dataIndex: 'Alignment',
      width: 100,
      ellipsis: true,
      editable: true,
      align: 'center',
    },
    // {
    //   title: '允许空值',
    //   dataIndex: 'IsNullable',
    //   width: 100,
    //   editable: true,
    //   align: 'center',
    // },
    {
      title: '是否排序',
      dataIndex: 'IsSort',
      width: 100,
      editable: true,
      align: 'center',
    },
    {
      title: '表头检索',
      dataIndex: 'AccurateSearch',
      width: 100,
      editable: true,
      align: 'center',
    },
    {
      title: '模糊检索',
      dataIndex: 'LikeSearch',
      width: 100,
      editable: true,
      align: 'center',
    },
    {
      title: '表单可添加',
      dataIndex: 'IsAdd',
      width: 100,
      editable: true,
      align: 'center',
    },
    {
      title: '表单可编辑',
      dataIndex: 'IsEdit',
      width: 100,
      editable: true,
      align: 'center',
    },
    {
      title: '手持可用',
      dataIndex: 'MobileDisplay',
      width: 100,
      editable: true,
      align: 'center',
    },
    // {
    //   title: '操作',
    //   width: 50,
    //   align: 'center',
    //   render: (_, record, index) =>
    //     dataSource.length >= 1 ? (
    //       <Tooltip title="删除">
    //         <Button
    //           style={{ border: 'none', padding: '4px 5px', background: 'none' }}
    //           onClick={() => handleDelete(record, index)}
    //           disabled={record.ReadOnly}
    //         >
    //           <DeleteOutlined
    //             style={{ fontSize: '16px', color: `${record.ReadOnly ? '#ccc' : '#e86060'}` }}
    //             disabled={record.ReadOnly}
    //           />
    //         </Button>
    //       </Tooltip>
    //     ) : null,
    // },
  ];
  const columns = defaultColumns.map(col => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record, index) => ({
        index,
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        width: col.width,
        title: col.title,
        ellipsis: col.ellipsis,
        align: col.align,
        dataSource,
        tableDataCount,
        defaultData,
        setDefaultData,
        handleSave,
      }),
    };
  });
  // 表格复选框
  const onSelectChange = newSelectedRowKeys => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: record => ({
      disabled: record.ReadOnly,
    }),
  };
  return (
    // <Modal
    //   title={type === 'add' ? `建表【${tableType}】` : `表编辑`}
    //   visible={visible}
    //   width="1300px"
    //   onOk={onFinish}
    //   onCancel={onCancel}
    //   maskClosable={false}
    //   destroyOnClose
    //   centered
    // >
    <div className={styles.content}>
      <div>
        <Spin spinning={loading}>
          <Table
            rowKey="keyIndex"
            // rowSelection={rowSelection}
            size="small"
            style={{ marginTop: '10PX' }}
            components={components}
            rowClassName={() => 'editable-row'}
            bordered
            dataSource={dataSource}
            columns={columns}
            scroll={{ y: '460px' }}
            pagination={false}
            id="box"
          />
          <div id="page-bottom" />
        </Spin>
      </div>
    </div>
    // </Modal>
  );
});
export default TableView;
