/* eslint-disable no-restricted-syntax */
import { Space, Table, Button, Popconfirm, notification, Spin, Input, Radio } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../SchemeConfig.less';
import {
  GetVectorService,
  deleteVectorService,
  getSolutionList,
  updatePublishedMetaData,
  GettMaplayer,
  deleteConfig,
} from '@/services/webConfig/api';
import AddModal from './AddModal';
import PreviewModal from './VectorPreviewModal';
import MeteDataModal from './MeteDataModal';
import AddSlicedModal from './AddSlicedModal';
const VectorData = props => {
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // table表格数据
  const [tileSlicedData, setTileSlicedData] = useState([]);
  const [visible, setVisible] = useState(false); // 弹窗
  const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗
  const [meteDataVisible, setMeteDataVisible] = useState(false); // 预览弹窗
  const [flag, setFlag] = useState(0); // 更新list
  const [loading, setLoading] = useState([]); // 更新状态
  const [allLoading, setAllLoading] = useState(false); // 更新状态
  const [type, setType] = useState(''); // 弹窗类型
  const [solutionNames, setSolutionNames] = useState('');
  const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
  const [record, setRecord] = useState();
  const [currentMetaData, setCurrentMetaData] = useState(null);
  const [searchValue, setSearchValue] = useState('');
  const [radioType, setRadioType] = useState('1');
  const [addVisible, setAddVisible] = useState(false); // 弹窗
  const [treeTileLoading, setTreeTileLoading] = useState(false);
  const [name, setName] = useState([]);
  const { Search } = Input;
  const columns = [
    {
      title: '服务名',
      dataIndex: 'ServiceName',
      key: 'ServiceName',
      align: 'center',
    },
    {
      title: 'IP',
      dataIndex: 'GISServerIP',
      key: 'GISServerIP',
      align: 'center',
    },
    {
      title: '端口',
      dataIndex: 'GISServerPort',
      key: 'GISServerPort',
      align: 'center',
    },
    {
      title: '工程名',
      dataIndex: 'GISServerProjectName',
      key: 'GISServerProjectName',
      align: 'center',
    },
    {
      title: '发布时间',
      dataIndex: 'PublishTime',
      key: 'PublishTime',
      align: 'center',
    },
    {
      title: '编辑',
      align: 'center',
      width: 260,
      render: (text, record, index) => (
        <Space>
          <Button type="primary" size="small" onClick={() => metadata(record)}>
            元数据
          </Button>
          <Button type="primary" size="small" onClick={() => previewMetaData(record, index)}>
            预览
          </Button>
          <Button
            type="primary"
            size="small"
            loading={loading[index] || allLoading}
            onClick={() => enterLoading(record, index)}
          >
            更新
          </Button>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该矢量数据？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
  const columnsPart = [
    {
      title: '服务名',
      dataIndex: 'servicename',
      key: 'servicename',
      align: 'center',
    },
    {
      title: '标签',
      dataIndex: 'label',
      key: 'label',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: '编辑',
      align: 'center',
      render: (text, record) => (
        <Space>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              changebaseMap(record);
            }}
          >
            编辑
          </Button>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该切片管网？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delConfirmSliced(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
  // 更新
  const enterLoading = (record, index) => {
    const newLoadings = [...loading];
    newLoadings[index] = true;
    setLoading(newLoadings);
    let query = {
      serviceName: record.ServiceName,
      _version: 9999,
      solution: solutionNames,
    };

    updatePublishedMetaData(query)
      .then(res => {
        const newLoadings = [...loading];
        newLoadings[index] = false;
        setLoading(newLoadings);
        if (res.success) {
          setFlag(flag + 1);
          notification.success({
            message: '提示',
            duration: 3,
            description: '更新元数据成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: '更新元数据失败',
          });
        }
      })
      .catch(err => {
        const newLoadings = [...loading];
        newLoadings[index] = false;
        setLoading(newLoadings);
        notification.error({
          message: '提示',
          duration: 3,
          description: '服务无法访问',
        });
      });
  };
  const previewMetaData = record => {
    setCurrentMetaData(record);
    setPreviewVisible(true);
  };

  const metadata = record => {
    setCurrentMetaData(record);
    setMeteDataVisible(true);
  };

  const solutionName = () => {
    getSolutionList({
      _version: 9999,
    }).then(res => {
      setSolutionNames(res.data.currentSolution);
    });
  };
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
    setAddVisible(false);
  };
  const delConfirm = record => {
    console.log(' record.ServiceName', record.ServiceName.split('.'));
    let query = {
      serviceName: record.ServiceName.split('.')[0],
      _version: 9999,
      solution: solutionNames,
    };
    deleteVectorService(query).then(res => {
      if (res.success) {
        setFlag(flag + 1);
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除元数据成功',
        });
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: '删除元数据失败',
        });
      }
    });
  };

  const delConfirmSliced = record => {
    const { servicename = '' } = record;
    setTreeLoading(true);
    deleteConfig({
      servicename,
      terminalType: 'base',
      isBaseMap: true,
    })
      .then(res => {
        setFlag(flag + 1);
        if (res.code == '0') {
          // form.resetFields();
          // callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '删除失败',
          });
        }
      })
      .catch(err => {
        setFlag(flag + 1);
        setTreeLoading(false);
      });
  };
  const handleAdd = () => {
    setType('add');
    if (radioType == 1) {
      setVisible(true);
    } else {
      setAddVisible(true);
    }
  };
  useEffect(() => {
    renderTile({ info: searchValue });
    renderTileSliced();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = (params = { info: '' }) => {
    setTreeLoading(true);
    solutionName();
    GetVectorService(params)
      .then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok') {
          let arr = [];
          res.data.VectorList.map(item => {
            arr.push(false);
          });
          setLoading(arr);

          setTileData(res.data.VectorList);
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
        setTreeLoading(false);
      });
  };

  const renderTileSliced = () => {
    setTreeTileLoading(true);
    GettMaplayer({
      terminalType: 'base',
      isBaseMap: true,
    })
      .then(res => {
        setTreeTileLoading(false);
        if (res.code == '0') {
          let newdata = res.data.general.baseMap.layers?.filter(i => i.isVector === 1);
          setTileSlicedData(newdata);
          let data = [];
          newdata.map(item => {
            data.push(item.servicename);
          });
          setName(data);
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        setTreeTileLoading(false);
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
      });
  };
  // 搜索
  const handleSearch = text => {
    setFlag(flag + 1);
  };
  // 搜索框改变时存储输入的值
  const handleChange = e => {
    setSearchValue(e.target.value);
  };

  const updateAll = async () => {
    let query = {
      version: 9999,
      solution: solutionNames,
    };
    for (const [index, item] of tileData.entries()) {
      setAllLoading(true);
      query.serviceName = item.ServiceName;
      let res = null;
      res = await updatePublishedMetaData(query);
      if (res.success) {
        setAllLoading(false);
        notification.success({
          message: '提示',
          duration: 1,
          // description: `${item.ServiceName}更新辣`,
          description: `更新元数据成功`,
        });
      } else {
        setAllLoading(false);
        notification.error({
          message: '提示',
          duration: 3,
          description: '更新元数据失败',
        });
      }
      if (index === tileData.length - 1) {
        setFlag(flag + 1);
      }
    }
  };

  const handleSelect = e => {
    setRadioType(e.target.value);
  };

  const changebaseMap = e => {
    setType('edit');
    setRecord(e);
    setAddVisible(true);
  };

  return (
    <>
      <div className={styles.pipeNetwork}>
        <div className={styles.tileBtnVe}>
          <div className={styles.tileBtnLeft}>
            <span>管网类型：</span>
            <Radio.Group defaultValue="1" value={radioType} onChange={e => handleSelect(e)}>
              <Radio.Button value="1" style={{ width: '90px', textAlign: 'center' }}>
                管网
              </Radio.Button>
              <Radio.Button value="2" style={{ width: '90px', textAlign: 'center' }}>
                切片管网
              </Radio.Button>
            </Radio.Group>
          </div>
          <div className={styles.tileBtnRight}>
            {radioType == 1 && (
              <>
                <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
                <Search
                  allowClear
                  placeholder="请输入服务名或工程名"
                  onSearch={handleSearch}
                  onChange={handleChange}
                  value={searchValue}
                  enterButton
                  style={{ width: '300px', marginRight: '20px' }}
                />
                <Button
                  type="primary"
                  onClick={() => {
                    updateAll();
                  }}
                  loading={allLoading}
                  style={{ marginRight: '20px' }}
                >
                  批量更新
                </Button>
              </>
            )}
            <Button
              type="primary"
              onClick={() => {
                handleAdd();
              }}
            >
              新增
            </Button>
          </div>
        </div>
        <div style={{ height: 'calc(100% - 51px)', width: '100%' }}>
          <Table
            loading={radioType == 1 ? treeLoading : treeTileLoading}
            columns={radioType == 1 ? columns : columnsPart}
            dataSource={radioType == 1 ? tileData : tileSlicedData}
            bordered
            rowKey="CreateTime"
            scroll={{ y: 'calc(100% - 70px)' }}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
            }}
          />
        </div>
        <AddModal
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={formObj}
          solutionNames={solutionNames}
        />
        <PreviewModal
          visible={previewVisible}
          onCancel={() => setPreviewVisible(false)}
          metaData={currentMetaData}
        />
        <MeteDataModal
          visible={meteDataVisible}
          onCancel={() => setMeteDataVisible(false)}
          metaData={currentMetaData}
        />
        <AddSlicedModal
          visible={addVisible}
          onCancel={() => setAddVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={record}
          name={name}
        />
      </div>
    </>
  );
};
export default VectorData;
