import { Space, Table, Button, Popconfirm, notification, Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less';
import { GetVectorDataList, DeleteVectorData, RefreshVectorData } from '@/services/webConfig/api';
import AddModal from './AddModal';
// import PreviewModal from './VectorPreviewModal'
const VectorData = props => {
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // table表格数据
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 更新list
  const [loading, setLoading] = useState([]); // 更新状态
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
  const columns = [
    {
      title: '项目名',
      dataIndex: 'projectName',
      key: 'projectName',
      align: 'center',
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      key: 'ip',
      align: 'center',
    },
    {
      title: '端口',
      dataIndex: 'port',
      key: 'port',
      align: 'center',
    },
    {
      title: '数据源名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: '发布时间',
      dataIndex: 'publishDatetime',
      key: 'publishDatetime',
      align: 'center',
    },
    {
      title: '编辑',
      align: 'center',
      render: (text, record, index) => (
        <Space>
          <Button
            type="primary"
            size="small"
            loading={loading[index]}
            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 enterLoading = (record, index) => {
    const newLoadings = [...loading];
    newLoadings[index] = true;
    setLoading(newLoadings);
    let query = {
      id: record.id,
    };

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

  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  const delConfirm = record => {
    DeleteVectorData(record.id).then(res => {
      if (res.msg === '') {
        setFlag(flag + 1);
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除元数据成功',
        });
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: '删除元数据失败',
        });
      }
    });
  };
  const handleAdd = () => {
    setType('add');
    setVisible(true);
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
    GetVectorDataList().then(res => {
      if (res.msg === 'Ok') {
        let arr = [];
        res.data.map(item => {
          arr.push(false);
        });
        setLoading(arr);
        setTreeLoading(false);
        setTileData(res.data);
      } else {
        setTreeLoading(false);
        notification.error({
          message: '获取失败',
          description: res.message,
        });
      }
    });
  };

  return (
    <>
      <Spin tip="loading..." spinning={treeLoading}>
        <div className={styles.tileBtn}>
          <Button
            type="primary"
            onClick={() => {
              handleAdd();
            }}
          >
            新增
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={tileData}
          bordered
          rowKey="id"
          scroll={{ y: 600 }}
          pagination={{
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
        />
        <AddModal
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={formObj}
        />
      </Spin>
    </>
  );
};
export default VectorData;